We have an API, Oauth2 Provider.
我们有一个API,Oauth2提供商。
From AngularJS client Side app, how can I implement the flow of authentication to this api to get the access token for future requests?
从AngularJS客户端应用程序,我如何实现对此API的身份验证流程以获取将来请求的访问令牌?
What I am searching for is a Implicit Grant flow for this.
我正在寻找的是一个Implicit Grant流程。
I'll provide a
我会提供一个
{
client-id: "abcdefghijklmnopqrstuvqxyz0123456789",
redirect_url: "http:localhost:8080/provider_cb",
response_type: "token"
}
I have a Rails REST API in the backend and doorkeeper/devise for Oauth2 provision.
我在后端有一个Rails REST API,为Oauth2提供了一个门卫/设计。
I came across angular-oauth, which seems to solve the problem to certain extent. but,
我遇到了角度 - oauth,似乎在某种程度上解决了这个问题。但,
- I do not wish to provide a token verification function (Is this mandatory)
- I do not wish to open a new window popup for the login (Wish to do redirections in same window)
我不希望提供令牌验证功能(这是强制性的)
我不想为登录打开一个新的窗口弹出窗口(希望在同一个窗口中进行重定向)
Now,
Q1. What I do not understand is how is the whole process started, I can't make any $http request, this returns with a SignIn HTML page. Should I use $location service to redirect to it to login page? Or should I have a link to the whole GET request to /oauth/authorize?...
Q1。我不明白的是整个过程是如何开始的,我不能发出任何$ http请求,这会返回一个SignIn HTML页面。我应该使用$ location服务重定向到登录页面吗?或者我应该有一个指向/ oauth / authorize的整个GET请求的链接吗?...
Q2, How will I capture the redirect after SignIn to extract out the access_token?
Q2,如何在SignIn之后捕获重定向以提取access_token?
Q3. Do know any Service which takes care of Oauth2 authentication or a standard Angular way of doing this?
Q3。知道任何负责Oauth2身份验证的服务或标准的Angular方式吗?
1 个解决方案
#1
6
Lets try an answer to your three questions:
让我们试着回答你的三个问题:
Q1) You should basically understand the general OAuth2 process. It is not an AngularJS-specific implementation you're looking at. If you don't want to work with a popup window for the authorization, you'll have to trick around a bit to have the redirect_url / state working correctly after coming back (if you want to have #state - saving - otherwise just specify your entry - url in the redirect_uri). You should not use $http for the redirection as this is just for XHR and similar calls useful. To get your user to the login page, just do a $window.location.href = 'http://yourlogin.com/oauthloginpage';
Q1)您应该基本了解一般的OAuth2流程。它不是您正在查看的特定于AngularJS的实现。如果您不想使用弹出窗口进行授权,那么在返回之后您必须耍一下才能使redirect_url / state正常工作(如果您想要#state - 保存 - 否则只需指定你的条目 - redirect_uri中的网址)。您不应该使用$ http进行重定向,因为这仅适用于XHR和类似的调用。要让您的用户访问登录页面,只需执行$ window.location.href ='http://yourlogin.com/oauthloginpage';
Your app will then redirect to the login page - don't forget your parameters for redirect_url. Also specify other parameters within the request like "scope" / "state" if required.
然后,您的应用将重定向到登录页面 - 不要忘记redirect_url的参数。如果需要,还可以在请求中指定其他参数,如“scope”/“state”。
Q2) The redirect AFTER Login will redirect to the uri you specified within your redirect_url. Then it will come up with something like http://myapp.com/#access_token=foobar&refresh_token=foobar2&state=loremipsem
Q2)重定向AFTER登录将重定向到您在redirect_url中指定的uri。然后会出现像http://myapp.com/#access_token=foobar&refresh_token=foobar2&state=loremipsem这样的内容
Just grab the parts from angular with a bit of code like this:
只需使用以下代码获取角度的部分:
var currentURL = $location.absUrl();
var paramPartOfURL = currentURL.slice(currentURL.indexOf('#') + 1);
Then parse the paramPart into an array with split('&') and iterate through it by looking for the "key" access_token and - voila - there is your access_token ready for being taken into your local storage / service / cookie.
然后将paramPart解析为带有split('&')的数组,并通过查找“key”access_token来迭代它,并且 - 瞧 - 您的access_token已准备好被带入本地存储/服务/ cookie。
There are other implementations you might use to split URLs into parts - maybe there is a better one, but this here would be the "fast shot". After parsing, you can redirect the user again to the correct state with a normal $location.path(....) call and eliminate the # parameters of OAuth2.
您可以使用其他实现将URL拆分为部分 - 也许有更好的实现,但这里的“快速镜头”。解析后,您可以使用正常的$ location.path(....)调用将用户再次重定向到正确的状态,并消除OAuth2的#参数。
Q3) If you want to have a way of mapping the source state / route of your AngularJS-app - try misusing the state parameter if your OAuth2-Server implements it. This will survive the request <-> response. For a non-popup-implementation, I don't know any further module currently.
Q3)如果您想要一种映射AngularJS-app的源状态/路由的方法 - 如果您的OAuth2-Server实现了它,请尝试滥用state参数。这将在请求< - >响应中存活。对于非弹出式实现,我目前不知道任何其他模块。
Another way to play with the OAuth2 stuff is to implement the loginpage on your own and then just interact with a oauth2 provider reacting on rest calls with Basic Auth or other methods. Then you can use $http calls probably.
使用OAuth2的另一种方法是自己实现登录页面,然后与oauth2提供程序进行交互,使用Basic Auth或其他方法对休息调用做出反应。然后你可以使用$ http调用。
#1
6
Lets try an answer to your three questions:
让我们试着回答你的三个问题:
Q1) You should basically understand the general OAuth2 process. It is not an AngularJS-specific implementation you're looking at. If you don't want to work with a popup window for the authorization, you'll have to trick around a bit to have the redirect_url / state working correctly after coming back (if you want to have #state - saving - otherwise just specify your entry - url in the redirect_uri). You should not use $http for the redirection as this is just for XHR and similar calls useful. To get your user to the login page, just do a $window.location.href = 'http://yourlogin.com/oauthloginpage';
Q1)您应该基本了解一般的OAuth2流程。它不是您正在查看的特定于AngularJS的实现。如果您不想使用弹出窗口进行授权,那么在返回之后您必须耍一下才能使redirect_url / state正常工作(如果您想要#state - 保存 - 否则只需指定你的条目 - redirect_uri中的网址)。您不应该使用$ http进行重定向,因为这仅适用于XHR和类似的调用。要让您的用户访问登录页面,只需执行$ window.location.href ='http://yourlogin.com/oauthloginpage';
Your app will then redirect to the login page - don't forget your parameters for redirect_url. Also specify other parameters within the request like "scope" / "state" if required.
然后,您的应用将重定向到登录页面 - 不要忘记redirect_url的参数。如果需要,还可以在请求中指定其他参数,如“scope”/“state”。
Q2) The redirect AFTER Login will redirect to the uri you specified within your redirect_url. Then it will come up with something like http://myapp.com/#access_token=foobar&refresh_token=foobar2&state=loremipsem
Q2)重定向AFTER登录将重定向到您在redirect_url中指定的uri。然后会出现像http://myapp.com/#access_token=foobar&refresh_token=foobar2&state=loremipsem这样的内容
Just grab the parts from angular with a bit of code like this:
只需使用以下代码获取角度的部分:
var currentURL = $location.absUrl();
var paramPartOfURL = currentURL.slice(currentURL.indexOf('#') + 1);
Then parse the paramPart into an array with split('&') and iterate through it by looking for the "key" access_token and - voila - there is your access_token ready for being taken into your local storage / service / cookie.
然后将paramPart解析为带有split('&')的数组,并通过查找“key”access_token来迭代它,并且 - 瞧 - 您的access_token已准备好被带入本地存储/服务/ cookie。
There are other implementations you might use to split URLs into parts - maybe there is a better one, but this here would be the "fast shot". After parsing, you can redirect the user again to the correct state with a normal $location.path(....) call and eliminate the # parameters of OAuth2.
您可以使用其他实现将URL拆分为部分 - 也许有更好的实现,但这里的“快速镜头”。解析后,您可以使用正常的$ location.path(....)调用将用户再次重定向到正确的状态,并消除OAuth2的#参数。
Q3) If you want to have a way of mapping the source state / route of your AngularJS-app - try misusing the state parameter if your OAuth2-Server implements it. This will survive the request <-> response. For a non-popup-implementation, I don't know any further module currently.
Q3)如果您想要一种映射AngularJS-app的源状态/路由的方法 - 如果您的OAuth2-Server实现了它,请尝试滥用state参数。这将在请求< - >响应中存活。对于非弹出式实现,我目前不知道任何其他模块。
Another way to play with the OAuth2 stuff is to implement the loginpage on your own and then just interact with a oauth2 provider reacting on rest calls with Basic Auth or other methods. Then you can use $http calls probably.
使用OAuth2的另一种方法是自己实现登录页面,然后与oauth2提供程序进行交互,使用Basic Auth或其他方法对休息调用做出反应。然后你可以使用$ http调用。