AngularJS and Google OAuth2 redirect_uri

Question

I'm trying to create a simple application using AngularJS and Google's OAuth2 for authentication.

Due to popup-blocking issues, and mobile friendliness, I decided I wouldn't use the Google APIs Client Library for JavaScript.

This left me with the option of doing a full redirect to the OAuth2 endpoint at google, and redirect users back to my app with the access_token.

I thought this would work just fine. The redirect URI would be 'http://myapp.com/#/register' with an appended 'access_token' query parameter. I would then consume the access_token and direct the user to somewhere else in my app.

This didn't work, as the Google API credentials (http://developers.google.com/console) don't like having a '#' in the Redirect URI's.

I then tried turning off the '#' requirement in URI's by using

$locationProvider.html5Mode(true);

This didn't work either, because explicitly browsing (in Chrome) to 'http://myapp.com/register' is not recognised by my Angular routes.

Any thoughts on how I should acheive this?

Answer 1

The following worked for me, with html5 mode set to true in my app.

This code goes into your controller for the redirect page (make sure to inject the $window service):

//Get parameters from hash fragment
var params = {};
if ($window.location.hash.indexOf('#') === 0) {
    var regex = /([^&=]+)=([^&]*)/g, m;
    while (m = regex.exec($window.location.hash.substr(1))) {
        params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
    }
}

//Validate params, store access token etc.
if (!params.access_token) {
    //...
}

If your app doesn't recognise the non-# routes, make sure that your server has the rewrite engine enabled and that you redirect all relevant requests to your angular app main HTML file.