猿问

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,但是
把urlcopy给朋友的时候就会404了,除非加上#/,这个问题在angular和后端有什么好的解决方案么
问题二
angular有没有办法直接在页面里面使用,例如新浪微博登录的组件是个js,他会在页面载入
后对一个dom做一些处理,angular对dom的操作是在directive,然后经过编译-链接巴拉巴拉,总之就是新浪的登录jswidget
不能用,还是说angular需要特殊的处理。
问题三
angular中oauth又没有比较成熟可复用的东西(中国的例如新浪微博,qq,豆瓣),https://oauth.io/这个木有微博啊
oauth需要下面这几步:
1.引导用户授权获取code
2.主动向oauth的网站发起请求,获取access_token
这一步对用户应该是透明的,现在我的想法是让页面主动跳转到一个有authService的页面中,这个authService主动来获取需要用到的数据,然后把access_token以及user存到$routeScope(有没有类似backbone的localstorage?)中,这个操作无论成功与否都要跳转到下一个页面,这就是登录成功才能看到的页面
if'code'ofparam_dict
$window.location.href=href+'#'+DEFAULT_URL
oauth到第一步的测试代码
'usestrict'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'
})
#Catchall
.otherwise({redirectTo:'DEFAULT_URL'})
#Withoutserversidesupporthtml5mustbedisabled.
$locationProvider.html5Mode(false)
])
parse_query_dict=(query)->
query=query.trim()
ifquery.length<=1
return{}
query=query.substring(1)
query_dict={}
list=query.split('&')
forqinlist
k_v=q.split('=')
query_dict[k_v[0]]=k_v[1]
returnquery_dict
phonecatApp.run([
'$rootScope'
'$route'
'$location'
'$window'
($rootScope,$route,$location,$window)->
$rootScope.$on('$locationChangeStart',(event,next,current)->
ifnot$rootScope.user
if$location.path()=='/'
params=$window.location.search
ifparams
href=$window.location.href
href=href.replace(params,'')
param_dict=parse_query_dict(params)
if'code'ofparam_dict
$window.location.href=href+'#'+DEFAULT_URL
#nologgeduser,weshouldbegoingto#login
ifnext.templateUrl=="partials/login.html"
#alreadygoingto#login,noredirectneeded
else
#notgoingto#login,weshouldredirectnow
#$location.path"/login"
)
])
守着一只汪
浏览 328回答 2
2回答

子衿沉夜

我来回答一下第一个问题:要去掉?code=XXX,用location.href肯定会刷新页面的,使用window.pushState才对。参考:MDN:操纵浏览器的历史记录
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答