CODEWITHSUNDEEP
javascriptangularjsoauth-2.0google-api
mortware
mortware

Reputation: 1940

AngularJS and Google OAuth2 redirect_uri

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?

Upvotes: 11

Views: 2674

Answers (2)

Bundit J.
Bundit J.

Reputation: 151

If you are using IIS, you can install URL Rewrite extension. Then update your web.config file. For example, below config will redirect everything to your Angular app and let it handle the routing. 

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Angular Default" stopProcessing="true">
                    <match url="(.*)" />
                    <action type="Rewrite" url="index.html" logRewrittenUrl="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Upvotes: 0

Adam Reis
Adam Reis

Reputation: 4473

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.

Upvotes: 1

Related Questions