Google OAuth2 Sign-in with AngularJS callback


For reference, here is the Google+ flow that I am working with:

  1. User clicks the sign-in button. The authorization request is sent to Google’s OAuth servers
  2. OAuth dialog is triggered for the user
  3. access_token, id_token, and a one-time code are returned
  4. Client sends id_token and code to server
  5. Server exchanges one-time code for access_token
  6. Google returns access_token
  7. Server should confirm “fully logged in” to Client

I already have this mostly working, but I would like AngularJS to know when the client is “fully logged in” at step 7.

Ideally, I would like step 3 to be handled by an AngularJS Controller, but I’m not sure if that’s possible.

The sign-in button is here:

<!-- Add where you want your sign-in button to render -->
<div id="signinButton">
<span class="g-signin"
<div id="result"></div>

The data-callback parameter allows me to specify a function, but I can only get it to work on global functions.

The only work-around I can think of is for AngularJS to constantly poll the server for updates just in case a user logs in, but I was wondering if there was a way to make this work within the event structure so that it’s all instant.

Whether this is possible or not, I would greatly appreciate any advice on how I should go about this. Please let me know if you have any questions. Thank You!

Problem courtesy of: Matthew Lucas


After a bunch of searching, I finally found what I needed here:

I couldn’t use the data-attributes to accomplish what I needed. I needed to render the button manually using the javascript API.

Solution courtesy of: Matthew Lucas

View additional discussion.

Like what you read? Give Angular.js Recipes a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.