6

We have an API, Oauth2 Provider.

From AngularJS client Side app, how can I implement the flow of authentication to this api to get the access token for future requests?

What I am searching for is a Implicit Grant flow for this.

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.

I came across angular-oauth, which seems to solve the problem to certain extent. but,

  1. I do not wish to provide a token verification function (Is this mandatory)
  2. 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?...

Q2, How will I capture the redirect after SignIn to extract out the access_token?

Q3. Do know any Service which takes care of Oauth2 authentication or a standard Angular way of doing this?

Improve this question
2
  • the broad idea is to create a new window and do the redirection there. Then watch the url, retrieve parameters from it and close the window Commented Jan 6, 2014 at 10:14
  • Since this basically is one app with a RESTful api and frontend with angular. Is it possible to do the whole process in on window. I tried to do this with a <%= link_to "login","localhost:port/oauth/authorize?client_id=..." %>, which eventually redirects me to sign_in and after sign_in it redirects me to some callback I defined. Now, Can I catch this url from angular $routeProvider? If I do html5mode(true), I am losing token in rails routes rewriting, and I can't have callback function with fragments. Commented Jan 7, 2014 at 13:14

1 Answer 1

Reset to default
7

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';

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.

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

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.

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.

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.

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.