AngularJS和Oauth2提供程序的身份验证？

Question

我们有一个API,Oauth2提供商.

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

我正在寻找的是一个Implicit Grant流程.

我会提供一个

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

我在后端有一个Rails REST API,为Oauth2提供了一个门卫/设计.

我遇到了角度oauth,似乎在一定程度上解决了这个问题.但,

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

现在,

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

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

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

Answer 1

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

Q1)您应该基本了解一般的OAuth2流程.它不是您正在研究的特定于AngularJS的实现.如果您不想使用弹出窗口进行授权,那么在返回之后您必须耍一下才能使redirect_url/state正常工作(如果您想要#state - 保存 - 否则只需指定你的条目 - redirect_uri中的网址).您不应该使用$ http进行重定向,因为这仅适用于XHR和类似的调用.要让您的用户访问登录页面,只需执行$ window.location.href =' http://yourlogin.com/oauthloginpage ';

然后,您的应用将重定向到登录页面 - 请不要忘记redirect_url的参数.如果需要,还可以在请求中指定其他参数,如"scope"/"state".

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

只需使用以下代码获取角度的部分:

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

然后将paramPart解析为带有split('&')的数组,并通过查找"key"access_token来迭代它,并且 - 瞧 - 您的access_token已准备好被带入本地存储/服务/ cookie.

您可以使用其他实现将URL拆分为部分 - 可能有更好的部分,但这里将是"快速镜头".解析后,您可以使用正常的$ location.path(....)调用将用户再次重定向到正确的状态,并消除OAuth2的#参数.

Q3)如果你想要一种映射AngularJS-app的源状态/路由的方法 - 如果你的OAuth2-Server实现了它,请尝试滥用state参数.这将在请求< - >响应中存活.对于非弹出式实现,我目前不知道任何其他模块.

使用OAuth2的另一种方法是自己实现登录页面,然后与oauth2提供程序进行交互,使用Basic Auth或其他方法对休息调用做出反应.然后你可以使用$ http调用.