angulaire.js - Existe-t-il une meilleure solution d'authentification angulaire pour les sites de jeux sociaux nationaux?

Question

La première étape de l'authentification de Sina guidera l'utilisateur pour ouvrir une page, puis l'url sera redirigée vers le répertoire racine du site Web une fois que l'utilisateur l'aura autorisé. Le problème est le suivant :

Question 1

L'URL aura un paramètre de code et le lien deviendra XXX.XXX.com/?code=XXXX. Lorsque htmlMode # $locationProvider.html5Mode(false) n'est pas utilisé, l'itinéraire passera à XXX.XXX. com/?code=XXXX#/

Existe-t-il un bon moyen d'obtenir la valeur de ce code (actuellement en utilisant $window.location.search, car $location.search ne peut pas obtenir cette valeur dans ce mode

) ;

Existe-t-il un bon moyen de supprimer ce XXX.XXX.com/?code=XXXX#/ ?code=XXX (s'il n'est pas supprimé, chaque lien de saut d'itinéraire sera là)
Ma solution temporaire aux deux problèmes ci-dessus consiste à remplacer $window.location.href, ce qui entraînera l'actualisation de la page entière (heureusement, il s'agit de la connexion à la page d'accueil,
C'est acceptable, mais j'ai l'impression qu'il devrait y avoir une utilisation plus avancée et angulaire)

Adresse de test http://llovebaimuda.herokuapp.com/ http://llovebaimuda.herokuapp.com/#/login#/login

Le mode HTML5 n'est pas utilisé car si vous saisissez directement l'url (par exemple : http://llovebaimuda.herokuapp.com/phone)会导致404,输入téléphone), cela provoquera 404. Saisissez
http://llovebaimuda.herokuapp.com/#/phone虽然浏览器显示http://llovebaimuda.herokuapp.com/phone，但是#/téléphone Bien que le navigateur affiche
téléphone, mais.

Lors de la copie de l'URL vers un ami, elle obtiendra un 404 à moins que #/ soit ajouté. Existe-t-il une bonne solution à ce problème en angulaire et dans le backend

.

Question 2

Existe-t-il un moyen pour Angular d'utiliser <script></script> directement dans la page. Par exemple, le composant de connexion Sina Weibo est un js, qui sera chargé sur la page
Ensuite, effectuez un traitement sur un dom. L'opération d'Angular sur le dom est dans la directive, puis compilée et liée. Bref, c'est le widget js de connexion de Sina

. Cela ne fonctionne pas ou Angular nécessite un traitement spécial.

Question 3

https://oauth.io/这个木有微博啊Il n’existe pas d’OAuth relativement mature et réutilisable dans Angular (en Chine comme Sina Weibo, QQ, Douban),

oauth nécessite les étapes suivantes :
1. Guidez les utilisateurs pour autoriser et obtenir le codeaccess_token 2. Lancez activement une demande sur le site oauth et obtenez
access_token Cette étape doit être transparente pour l'utilisateur. Maintenant, mon idée est de laisser la page passer activement à une page avec authService. Cet authService obtient activement les données nécessaires, puis enregistre

et l'utilisateur dans $routeScope (Y a-t-il un stockage local similaire. au backbone ?), cette opération passera à la page suivante, qu'elle réussisse ou non. C'est la page qui ne peut être vue qu'après une connexion réussie

.

if 'code' of param_dict
    $window.location.href = href + '#' + DEFAULT_URL

Tester le code d'oauth à la première étape<🎜>

'use strict'https://oauth.io/

STATIC_URL = '/static'
DEFAULT_URL = '/phones'

phonecatApp = angular.module('phonecatApp', [
  'ngRoute'
  'ConfigServices'
  'phonecatControllers'
  'authControllers'
  'phonecatServices'
  'phonecatFilters'
  'phonecatAnimations'
])

phonecatApp.config([
  '$routeProvider'
  '$locationProvider'

($routeProvider, $locationProvider, config) ->

  $routeProvider
    .when('/',{})

    .when('/login',{
      templateUrl: STATIC_URL + '/partials/auth/login.html'
      controller: 'LoginCtrl'
    })
    .when('/auth/:code',{
    })

    .when('/phones', {
      templateUrl: STATIC_URL + '/partials/phone/list.html'
      controller: 'PhoneListCtrl'
    })

    .when('/phones/:phoneId', {
      templateUrl: STATIC_URL + '/partials/phone/detail.html'
      controller: 'PhoneDetailCtrl'
    })

    # Catch all
    .otherwise({redirectTo: 'DEFAULT_URL'})

  # Without server side support html5 must be disabled.
  $locationProvider.html5Mode(false)

])

parse_query_dict = (query) ->
  query = query.trim()
  if query.length <= 1
    return {}
  query = query.substring(1)
  query_dict = {}
  list = query.split('&')
  for q in list
    k_v = q.split('=')
    query_dict[k_v[0]] = k_v[1]
  return query_dict

phonecatApp.run([
  '$rootScope'
  '$route'
  '$location'
  '$window'
  ($rootScope, $route, $location, $window) ->
    $rootScope.$on('$locationChangeStart', (event, next, current) ->
      if not $rootScope.user
        if $location.path() == '/'
          params = $window.location.search
          if params
            href = $window.location.href
            href = href.replace(params,'')
            param_dict = parse_query_dict(params)
            if 'code' of param_dict
              $window.location.href = href + '#' + DEFAULT_URL
        # no logged user, we should be going to #login
        if next.templateUrl == "partials/login.html"
        #  already going to #login, no redirect needed
        else
        # not going to #login, we should redirect now
        #$location.path "/login"
    )
])

Answer 1

Permettez-moi de répondre à la première question :

Pour supprimer ?code=XXX, l'utilisation de location.href actualisera définitivement la page. Utilisez plutôt window.pushState.
Référence : MDN : Manipulation de l'historique du navigateur

Answer 2

Solution inter-domaines AngularJs Sina Weibo

问题：oauth跨域
angularjs jsonp只能是get方式，而http.post和resouce oauth时都会引发跨域问题

解决办法，让跨域变成非跨域
跨域是前端问题，javascript访问非本域的东西的时候会有这个问题，因此后端实现
oauth然后让前端访问本域内的地址就可以解决这个问题。

方法有下面：
   1.后端服务器做个代理(公司牛人给的解决方案，具体怎么样实现没有深入研究) 
   2.使用新浪的sdk，后端解决oauth, <a href="/oauth2/sina/authorize">
     http://open.weibo.com/wiki/SDK(新浪) 
     http://michaelliao.github.io/sinaweibopy/(python sdk)
     https://github.com/tianyu0915/django-sina-login(python sdk 例子)