AngularJS 和对 Oauth2 提供者的身份验证？答案

【问题标题】：AngularJS and authentication to an Oauth2 Provider?AngularJS 和对 Oauth2 提供者的身份验证？
【发布时间】：2014-01-23 16:37:21
【问题描述】：

我们有一个 API，Oauth2 Provider。

从 AngularJS 客户端应用程序，我如何实现到此 api 的身份验证流程以获取未来请求的访问令牌？

我正在寻找的是一个隐式授权流程。

我会提供一个

{
    client-id: "abcdefghijklmnopqrstuvqxyz0123456789", 
    redirect_url: "http:localhost:8080/provider_cb",
    response_type: "token"
}

我在后端和门卫/设计中有一个 Rails REST API 用于 Oauth2 配置。

偶遇angular-oauth，好像在一定程度上解决了问题。但是，

我不希望提供令牌验证功能（这是强制性的）
我不希望为登录打开一个新窗口弹出窗口（希望在同一窗口中进行重定向）

现在，

第一季度。我不明白的是整个过程是如何开始的，我无法发出任何 $http 请求，这会返回一个 SignIn HTML 页面。我应该使用 $location 服务将其重定向到登录页面吗？或者我应该有一个指向 /oauth/authorize 的整个 GET 请求的链接？...

Q2，我将如何在登录后捕获重定向以提取 access_token？

第三季度。知道任何负责 Oauth2 身份验证或标准 Angular 方式的服务吗？

【问题讨论】：

总体思路是创建一个新窗口并在那里进行重定向。然后观察 url，从中检索参数并关闭窗口
因为这基本上是一个带有 RESTful api 和带有角度的前端的应用程序。是否可以在窗口中完成整个过程。我尝试使用 localhost:port/oauth/authorize?client_id=..." %> 来执行此操作，它最终将我重定向到 sign_in 并在 sign_in 之后将我重定向到我定义的一些回调。现在，我可以从 angular $routeProvider 中捕获这个 url 吗？如果我执行 html5mode(true)，我会在 Rails 路由重写中丢失令牌，并且我不能有片段的回调函数。

标签： ruby-on-rails angularjs oauth oauth-2.0 doorkeeper

【解决方案1】：

让我们试着回答你的三个问题：

Q1）你应该基本了解了一般的OAuth2流程。它不是您正在查看的特定于 AngularJS 的实现。如果您不想使用弹出窗口进行授权，则必须花点功夫才能让 redirect_url / state 在返回后正常工作（如果您想要#state - 保存 - 否则只需指定您的条目 - redirect_uri 中的 url）。您不应该使用 $http 进行重定向，因为这仅适用于 XHR 和类似的调用有用。要让您的用户进入登录页面，只需执行 $window.location.href = 'http://yourlogin.com/oauthloginpage';

然后您的应用将重定向到登录页面 - 不要忘记您的 redirect_url 参数。如果需要，还可以在请求中指定其他参数，例如“范围”/“状态”。

Q2) 登录后重定向将重定向到您在 redirect_url 中指定的 uri。然后它会想出类似http://myapp.com/#access_token=foobar&refresh_token=foobar2&state=loremipsem

只需使用如下代码从 angular 中抓取部分：

var currentURL = $location.absUrl();
var paramPartOfURL = currentURL.slice(currentURL.indexOf('#') + 1);

然后使用 split('&') 将 paramPart 解析为一个数组，并通过查找“密钥”access_token 来迭代它 - 瞧 - 您的 access_token 已准备好被带入您的本地存储/服务/cookie。

您可以使用其他实现来将 URL 拆分为多个部分 - 也许有更好的实现，但这里将是“快速拍摄”。解析后，可以通过正常的 $location.path(....) 调用再次将用户重定向到正确的状态，并消除OAuth2的#参数。

Q3) 如果您想有一种方法来映射 AngularJS 应用的源状态/路由 - 如果您的 OAuth2-Server 实现它，请尝试滥用 state 参数。这将在请求响应中继续存在。对于非弹出式实现，我目前不知道任何其他模块。

使用 OAuth2 的另一种方法是自行实现登录页面，然后只需与 oauth2 提供者交互，该提供者使用基本身份验证或其他方法对休息调用作出反应。然后你就可以使用 $http 调用了。

【讨论】：