Google OAuth2 Sign-in with AngularJS callback

Question

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

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

User clicks the sign-in button. The authorization request is sent to Google's OAuth servers

OAuth dialog is triggered for the user

access_token, id_token, and a one-time code are returned

Client sends id_token and code to server

Server exchanges one-time code for access_token

Google returns access_token

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!

Matthew Lucas · Accepted Answer · 2013-03-07 20:36:13Z

11

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.

answered Mar 7, 2013 at 20:36

Matthew Lucas

4431 gold badge5 silver badges15 bronze badges

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

3 Comments

thitemple Over a year ago

How did you solve it? I tried passing a function as reference to the callbalck but is not working.

alalonde Over a year ago

@VinTem The key for me was passing a string representing the element ID rather than the angular (jqlite) element itself.

craigvl Over a year ago

To make this even easier I found this nice little angular directive that does the work of generating the google plus button, opening the window and returing the access token to orgin window which you can then send to your sever to get user details. github.com/sirkitree/angular-directive.g-signin

Collectives™ on Stack Overflow

Google OAuth2 Sign-in with AngularJS callback

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related