javascript - Google Login Hitting Twice?

Question

I'm using Google Login via JS and it appears my code is getting data twice. I'm not sure why this is occurring.

When I click my "Log In with Google" button, it spits out (console.log(result)) data for the user. THEN a prompt occurs asking me to choose an account of mine (I'm logged into several google accounts). When I click the account I'd like, the code then spits out that user data again.

Why is this occurring? It's a problem because where I spit out the data, I'd like to make a ajax call to verify the user and then redirect them. So in essence, it's trying to do this twice -- which is not cool, what if I don't want to login using the credentials google passes back on the first go around?

(function() {
   var po = document.createElement('script');
   po.type = 'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/client:plusone.js';
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(po, s);
 })();

function googleLogin() {
    var additionalParams = {
        'callback': googleCallback
    };

    gapi.auth.signIn(additionalParams);
}

function googleCallback(authResult) {
    if (authResult['status']['signed_in']) {
        gapi.client.load('oauth2', 'v2', function() {
            gapi.client.oauth2.userinfo.get().execute(function(resp) {
                console.log(resp);
            })
        });
    } else {
        console.log('Sign-in state: ' + authResult['error']);
    }
}

Update: If I sign out of all my Google accounts (with the exception of one and only one), the call to google is still duplicated. This time it logs in and I see console.log() outputting data twice. Access tokens are identical.

Update 2: console.log(resp) is outputting twice

Update 3: Just more clarification:

Answer 1

You are encountering two calls to "console.log(resp);" within your "googleCallback" function because:

The function that you define for your sign-in callback will be called every time that the user's signed in status changes

This quote is taken from the "Monitoring the user's session state" webpage.

As you can see in the article, the authorization result object has three different status "method" values:

• null
• PROMPT
• AUTO

So your callback code is being triggered when the login prompt appears ("PROMPT") and when the "Welcome back" banner appears ("AUTO").

To stop your callback code from dealing with each trigger event you could change your code as follows:

function signinCallback(authResult) {
    if (authResult['status']['signed_in']) {
        // Update the app to reflect a signed in user
        // Hide the sign-in button now that the user is authorized, for example:
        // document.getElementById('signinButton').setAttribute('style', 'display: none');

        if (authResult['status']['method'] == 'PROMPT') {
            console.log(authResult['status']['method']);

            gapi.client.load('oauth2', 'v2', function () {
                gapi.client.oauth2.userinfo.get().execute(function (resp) {
                    console.log(resp);
                })
            });
        }
    } else {
        // Update the app to reflect a signed out user
        // Possible error values:
        //   "user_signed_out" - User is signed-out
        //   "access_denied" - User denied access to your app
        //   "immediate_failed" - Could not automatically log-in the user
        console.log('Sign-in state: ' + authResult['error']);
    }
}

This code will only call the "gapi.client.oauth2.userinfo.get()" function if a user is signed-in and the event which triggered the callback is of type "PROMPT".