新浪的oauth第一步會(huì)引導(dǎo)用戶打開(kāi)一個(gè)頁(yè)面,然后用戶允許后url會(huì)重定向到網(wǎng)站根目錄下,問(wèn)題是這樣的:
url會(huì)帶一個(gè)code參數(shù),鏈接會(huì)變成XXX.XXX.com/?code=XXXX,不使用htmlMode # $locationProvider.html5Mode(false) 時(shí),route會(huì)跳轉(zhuǎn)到XXX.XXX.com/?code=XXXX#/
有沒(méi)有好的辦法能取到這個(gè)code的值(現(xiàn)在用的是$window.location.search,因?yàn)?location.search在這個(gè)模式下沒(méi)能取到這個(gè)值);
有沒(méi)有好的辦法把這個(gè)XXX.XXX.com/?code=XXXX#/ ?code=XXX去掉(不去掉的話之后每一個(gè)route跳轉(zhuǎn)的鏈接都會(huì)有)
上面的這兩個(gè)問(wèn)題我暫時(shí)的解決方案是用$window.location.href替換,這樣會(huì)引起整個(gè)頁(yè)面的刷新(好在是首頁(yè)登錄,
還可以接受,不過(guò)總感覺(jué)應(yīng)該有更高級(jí)更angularinic的用法)
測(cè)試地址 http://llovebaimuda.herokuapp.com/ http://llovebaimuda.herokuapp.com/#/login#/login
不用html5mode是因?yàn)槿绻苯虞斎雞rl(例如:http://llovebaimuda.herokuapp.com/phone)會(huì)導(dǎo)致404,輸入phone)會(huì)導(dǎo)致404,輸入
http://llovebaimuda.herokuapp.com/#/phone雖然瀏覽器顯示http://llovebaimuda.herokuapp.com/phone,但是#/phone雖然瀏覽器顯示
phone,但是
angular有沒(méi)有辦法直接在頁(yè)面里面使用<script></script>,例如新浪微博登錄的組件是個(gè)js,他會(huì)在頁(yè)面載入
后對(duì)一個(gè)dom做一些處理,angular對(duì)dom的操作是在directive,然后經(jīng)過(guò)編譯-鏈接巴拉巴拉,總之就是新浪的登錄js widget
https://oauth.io/這個(gè)木有微博啊angular中oauth又沒(méi)有比較成熟可復(fù)用的東西(中國(guó)的例如新浪微博,qq,豆瓣),
oauth需要下面這幾步:
1. 引導(dǎo)用戶授權(quán)獲取codeaccess_token
2. 主動(dòng)向oauth的網(wǎng)站發(fā)起請(qǐng)求,獲取access_token
這一步對(duì)用戶應(yīng)該是透明的,現(xiàn)在我的想法是讓頁(yè)面主動(dòng)跳轉(zhuǎn)到一個(gè)有authService的頁(yè)面中,這個(gè)authService主動(dòng)來(lái)獲取需要用到的數(shù)據(jù),然后把
if 'code' of param_dict
$window.location.href = href + '#' + DEFAULT_URL
'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"
)
])
我來(lái)回答一下第一個(gè)問(wèn)題:
要去掉 ?code=XXX,用 location.href 肯定會(huì)刷新頁(yè)面的,使用 window.pushState 才對(duì)。
參考:MDN: 操縱瀏覽器的歷史記錄
問(wèn)題:oauth跨域
angularjs jsonp只能是get方式,而http.post和resouce oauth時(shí)都會(huì)引發(fā)跨域問(wèn)題
解決辦法,讓跨域變成非跨域
跨域是前端問(wèn)題,javascript訪問(wèn)非本域的東西的時(shí)候會(huì)有這個(gè)問(wèn)題,因此后端實(shí)現(xiàn)
oauth然后讓前端訪問(wèn)本域內(nèi)的地址就可以解決這個(gè)問(wèn)題。
方法有下面:
1.后端服務(wù)器做個(gè)代理(公司牛人給的解決方案,具體怎么樣實(shí)現(xiàn)沒(méi)有深入研究)
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 例子)