Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google OAuth2 Sign-in with AngularJS callback

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

https://developers.google.com/+/web/signin/server-side-flow

  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:

https://developers.google.com/+/web/signin/server-side-flow#step_4_add_the_sign-in_button_to_your_page

<!-- Add where you want your sign-in button to render -->
<div id="signinButton">
  <span class="g-signin"
    data-scope="https://www.googleapis.com/auth/plus.login"
    data-clientid="YOUR_CLIENT_ID"
    data-redirecturi="postmessage"
    data-accesstype="offline"
    data-cookiepolicy="single_host_origin"
    data-callback="signInCallback">
  </span>
</div>
<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!

like image 511
Matthew Lucas Avatar asked Mar 07 '13 04:03

Matthew Lucas


1 Answers

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

https://developers.google.com/+/web/signin/#javascript_api

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

like image 99
Matthew Lucas Avatar answered Oct 10 '22 09:10

Matthew Lucas