6

我们有一个 API，Oauth2 Provider。

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

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

我会提供一个

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

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

我遇到了angular-oauth，这似乎在一定程度上解决了这个问题。但，

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

现在，

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

Q2，我如何在SignIn之后捕获重定向以提取access_token？

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

4

1 回答 1

7

让我们尝试回答您的三个问题：

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 提供程序交互，该提供程序使用 Basic Auth 或其他方法对 rest 调用做出反应。然后你可能可以使用 $http 调用。

于 2014-01-20T21:25:21.830 回答