AngularJS的ui-router与OAuth2 access_token冲突

Question

我有一个使用AngularJS和ui-router开发的前端，需要消费后端REST API，因此需要获取OAuth2访问令牌（隐式授权）。我的问题在于OAuth流程的最后一步，当我从认证服务器中获取到访问令牌时，无法处理该URL。

mydomain.com/home/#access_token=hdzjkdnba89fenbjkéz38U0D903ç&...

mydomain.com/home 是显然的重定向URI。

重定向后不到一秒钟，AngularJS会将URL更改为类似于以下内容：

mydomain.com/#/my-default-view

因此，访问令牌从URL中删除。

现在有几件事情：

• 我不允许为我的OAuth2客户端定义包含哈希（“＃”）的重定向URI。 因此，像mydomain.com/#/auth-complete/这样的东西不可行。
• 我使用$routeProvider.otherwise('/')。
• 我尝试设置$locationProvider.html5Mode(true);以删除中间的'#'，但问题是相同的（重定向后立即清除URL和访问令牌）。
• 由于在Angular修改URL后，访问令牌仍然可以在HTTP响应中访问，因此我可能可以使用$http拦截器，但这听起来对于这个常见任务来说有些过分了，不是吗？

有什么建议吗？

- Buddyshot

---

但是我如何匹配包含任意令牌的URL呢？是否可以使用类似于正则表达式的东西来表示“如果URL包含'access_token'，就不要做任何事情”？ - Buddyshot

是的，您可以进行正则表达式匹配。请查看此处的文档 https://github.com/angular-ui/ui-router/wiki/URL-Routing - erandac

哦，对不起，我没看到那个。谢谢;-) - Buddyshot

Ping @Buddyshot，你做到了吗？下面的解决方案似乎行不通，我也在这里尝试过了。 - Mateus Leon

我刚刚发布了一个答案。希望它仍然有效，我不再使用 ui-router 了。 - Buddyshot

Answer 1

对于我来说，这个方法适用于使用Google作为OAuth2提供商的客户端应用程序：

$urlRouterProvider.otherwise('/');

$stateProvider.state('access_token', {
    url: '/access_token={accessToken}&token_type={tokenType}&expires_in={expiresIn}',
    template: '',
    controller: function($stateParams) {
        var token = $stateParams.accessToken;
        // do something usefull with token
    }
})

- Luuk Buit

Answer 2

我不再使用 ui-router 了，但是对于那些仍需要解决方法的人，你只需要在正则表达式中捕获令牌即可。从 文档 中，你可以像这样做：

.state('oauth.token', {
        url: "/o/#{authToken:[0-9a-zA-Z]+}",
        ...
 })

并在authToken中获取您的访问令牌。

- Buddyshot

---

你能详细说明一下你的答案吗？ - JCC