Issue Google+ Signin on Chrome

Question

I'm experiencing a curious issue with Google+ Signin. I am using the code very closely to what they post on their Developer site.

My Code

<script type="text/javascript">
var auth2;


var initClient = function() {
    gapi.load('auth2', function() {
        auth2 = gapi.auth2.init({
            client_id: 'MYCLIENTIDHERE.apps.googleusercontent.com',
            cookiepolicy: 'single_host_origin',
            scope: 'profile'
        });

        jQuery('#signin-button').unbind();
        auth2.attachClickHandler('signin-button', {}, onSuccess, onFailure);
    });
};


var onSuccess = function(user) {
    console.log('Signed in as ' + user.getBasicProfile().getName());

    do_all_my_other_stuff_not_important_for_here();
};

var onFailure = function(error) {
    console.log(error);
};
</script>

Behavior

When clicking the #singin-button in Chrome, most of the time NOTHING seems to happen. If in another browser, like Firefox, it works as expected.

I am pretty sure there is nothing else in my code screwing this up since when I run the identical source code on my local machine, it also works as expected (regardless of the Browser).

Question

I am really at a loss as to where to even begin to diagnose this problem any further. What would you do? Thoughts on where to look for possible solution would be welcome.

Answer 1

I have been grappling with this issue for months off and on. Sometimes it works, sometimes not.

When I get frustrated with something, eventually I just throw a console.log everywhere I can think and just see what fires and when.

Low and behold, I found out that initClient was not being triggered. Hmm....

Something was wrong with the onload parameter of the Google API.

My code was like this:

<script type="text/javascript" src="https://apis.google.com/js/platform.js?onload=initClient" async defer></script>

<script type="text/javascript">
var auth2;

var initClient = function() {
    ...

Perhaps initClient was not being created when the api was ready to fire it. So I swapped positions. I put the call to the API after the declaration. Low and behold, it worked!

After months, it just so happens the day I try and solicit some thoughts from others I finally figured it out.

Ugh. I cannot believe I did not figure that out sooner.