AngularJS and authentication to an Oauth2 Provider?

Question

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?

Answer 1

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.