I have tried implementing OAuth in AngularJS using Hello.js following what I believe is the best practice. However, I am encountering some issues with my current approach as described below:
After injecting Hello.js into Angular and setting up the OAuth popup window for Google+ in my controllers.js file, I encountered a problem with the routing when redirecting from the child window to the parent window.
hello.init({
google: MY_APPLICATION_ID
},{redirect_uri:'app/_partials/'});
$scope.doLogin = function(network) {
console.log('Calling hello ' + network);
hello.login(network,function(r){ // callback
console.log("login successful..");
});
};
It seems that the redirect doesn't work properly due to issues with the $routerProvider in Angular. To bypass this, I had to use a temporary "fake" index.html view.
My route configuration looks like this:
$routeProvider.
when("/userLogin", {templateUrl: "_partials/userLogin.html", controller: "webClientController"})
.when("/dialInterface", {templateUrl: "_partials/dialInterface.html", controller: "webClientController"})
.when("/error404", {templateUrl: "_partials/error404.html", controller: "webClientController"})
.otherwise({redirectTo: '/error404'});
To manage the redirect issue, I used jQuery in the fake index.html:
<!-- temp workaround to manage oAuth since routeProvider doesn't match the REDIRECT URI correctly -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$("#go-to-dial-interface",opener.document).trigger('click');
window.close();
</script>
The content of /userLogin view:
<md-content class="md-padding md-primary" style="height: 600px;padding: 24px;" layout-fill>
<a ng-click="doLogin('google')" class="zocial googleplus">Sign in with Google+</a>
</md-content>
<a id="go-to-dial-interface" href="#dialInterface" style="visibility:hidden;"></a>
The flow of logic (and the problem faced) is outlined as follows:
- User clicks on the anchor tag triggering doLogin('google') function in the controller
- Google account is selected leading to a redirect to the fake index.html
- Index.html loads in the OAuth popup and executes script successfully but fails to trigger a redirect to #dialInterface
- Current view is reloaded without transitioning to the new view as expected
If you have any suggestions or improvements to offer, they would be greatly appreciated. Thank you for your assistance.