angular.js - angular oauth有沒有針對國內社交玩站比較好的解決方案？

新浪的oauth第一步會引導使用者開啟一個頁面，然後使用者允許後url會重新導向到網站根目錄下，問題是這樣的：

問題一

url會帶一個code參數,連結會變成XXX.XXX.com/?code=XXXX，不使用htmlMode # $locationProvider.html5Mode(false) 時，route會跳到XXX.XXX.com/?code= XXXX#/

有沒有好的辦法能取到這個code的值(現在用的是$window.location.search，因為$location.search在這個模式下沒能取到這個值)；

有沒有好的辦法把這個XXX.XXX.com/?code=XXXX#/ ?code=XXX去掉(不去掉的話之後每一個route跳轉的連結都會有)
上面的這兩個問題我暫時的解決方案是用$window.location.href替換，這樣會引起整個頁面的刷新(好在是首頁登錄，
還可以接受，不過總覺得應該有更高級更angularinic的用法)

測試網址 http://llovebaimuda.herokuapp.com/ http://llovebaimuda.herokuapp.com/#/login

不用html5mode是因為如果直接輸入url(例如：http://llovebaimuda.herokuapp.com/phone)會導致404,輸入
http://llovebaimuda.herokuapp.com/#/phone雖然瀏覽器顯示http:/ /llovebaimuda.herokuapp.com/phone，但
把url copy給朋友的時候就會404了，除非加上#/,這個問題在angular和後端有什麼好的解決方案麼

問題二

angular有沒有辦法直接在頁面裡面使用,例如新浪微博登入的元件是個js，他會在頁面載入
後來對一個dom做一些處理，angular對dom的操作是在directive，然後經過編譯-鏈接巴拉巴拉，總之就是新浪的登錄js widget
不能用，還是說angular需要特殊的處理。

問題三

angular中oauth又沒有比較成熟可重複使用的東西（中國的例如新浪微博，qq，豆瓣），https://oauth.io/這個木有微博啊

oauth需要下面這幾步：
1. 引導使用者授權取得code
2. 主動向oauth的網站發起請求，取得access_token
這一步對使用者應該是透明的，現在我的想法是讓頁面主動跳到一個有authService的頁面中，這個authService主動來獲取需要用到的數據，然後把access_token以及user存到$routeScope(有沒有類似backbone的localstorage?)中,這個操作無論成功與否都要跳到下一個頁面，這就是登入成功才能看到的頁面

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

oauth到第一步的測試程式碼

'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"
    )
])

曾经蜡笔没有小新2739 天前675

angular.js - angular oauth有沒有針對國內社交玩站比較好的解決方案？

問題一

問題二

問題三

oauth到第一步的測試程式碼

全部回覆(2)我來回復

angularjs 新浪微博跨域解決方案