Angular Google OAuth redirect not working with html5mode enabled

Question

I am working on project in which we are using Google OAuth API to signup and login users to ower application.

The project is based on angularjs and asp.net.

The login process works fine when html5mode is not enabled, but for SEO reasons we are required to remove the hash (#) from the url using :

$locationProvider.html5Mode(true);

in this case the response received after the authentication is always in the form

http://site/#access_token=...

and for the route configuration in angular we are using

$routeProvider.when('/access_token=:accessToken', {
      templateUrl: '/app/identification/identification.html',
      controller: 'identificationGoogle'
});

the problem is when html5 mode is enabled, after the redirection is done, the associated controller is never activated even if the browser window url is in the previous form.

it does not work until you refresh the page.

so is there any solution to this problem to avoid the need to reload the page.

the angular version used is : 1.3.15.

I believe you need to remove # tag from response url because angular html5Mode does not work with # tag url's — Mahesh Singh Chouhan
– Mahesh Singh Chouhan, Commented Mar 28, 2017 at 15:06
yes I know, after reloading the page using the refresh button, angular recognizes the hash and removes it automatically so the url becomes (/access_token...), but for some reason it does not after the redirect — abderrahmane
– abderrahmane, Commented Mar 28, 2017 at 15:14

abderrahmane · Accepted Answer · 2017-03-29 09:12:08Z

0

I found the solution.

the solution was by adding the base tag which is required for angular when using html5 mode

<base href="/">

and changing the redirect_uri in the key configuration on Google's Developer Console to

http://site/

instead of

http://site/index.cshtml

the problem happened because the redirect url was not the same as the base url.

so when the redirect is done to the old url, this later didnt match the base url and so angular's routing didnt work. in this case the browser is automatically redirected to

http://site/#access_token=...

so after the page is reloaded explicitly, the base url and the loaded url are a match in this case, so the routing works fine.

answered Mar 29, 2017 at 9:12

abderrahmane

212 bronze badges

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

Collectives™ on Stack Overflow

Angular Google OAuth redirect not working with html5mode enabled

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related