Google+ customizing the sign-in button

Question

When I use the built-in Google+ sign-in button, everything works as expected. The OAuth call to Google is made in the popup, the user accepts or cancels, then the callback is called.

When I try to customize my button using the example gapi.signin.render method, the Google call is made but the callback is called immediately.

I am a server-side developer trying to provide a POC for the front-end developers. I only know enough Javascript to be dangerous. Can someone tell me why the gapi.signin.render method is making an asynchronous call to the authorization, which makes the callback get called before the user has clicked anything in the popup? In the alternative, please help me correct the code in the 2nd example below to effect the callback being called only after the user clicks Accept/Cancel in the OAuth Google window. In the second alternative, please tell me how I can change the text of the built-in Google+ sign-in button.

The code that works (built-in, non-customizable Google+ sign-in button):

<SCRIPT TYPE="text/javascript">
   /**
    * Asynchronously load the Google Javascript file.
    */
   (
     function() {
        var po = document.createElement( 'script' );
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/client:plusone.js?onload=googleLoginCallback';
        var s = document.getElementsByTagName('script')[ 0 ];
        s.parentNode.insertBefore( po, s );
     }
   )();


   function googleLoginCallback( authResult ) {
      alert( "googleLoginCallback(authResult):  Inside." );
   }
</SCRIPT>

<DIV ID="googleLoginButton" CLASS="show">
   <DIV
      CLASS="g-signin"
      data-accesstype="online"
      data-approvalprompt="auto"
      data-callback="googleLoginCallback"
      data-clientid="[Google Client Id].apps.googleusercontent.com"
      data-cookiepolicy="single_host_origin"
      data-height="tall"
      data-requestvisibleactions="http://schemas.google.com/AddActivity"
      data-scope="https://www.googleapis.com/auth/userinfo.email"
      data-theme="dark"
      data-width="standard">
   </DIV>
</DIV>

The gapi.signin.render code that does not work:

<SCRIPT TYPE="text/javascript">
   /**
    * Asynchronously load the Google Javascript file.
    */
   (
     function() {
        var po = document.createElement( 'script' );
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/client:plusone.js?onload=myGoogleButtonRender';
        var s = document.getElementsByTagName('script')[ 0 ];
        s.parentNode.insertBefore( po, s );
     }
   )();


   function myGoogleButtonRender( authResult ) {
      gapi.signin.render( 'myGoogleButton', {
         'accesstype': 'online',
         'approvalprompt': 'auto',
         'callback': 'googleLoginCallback',
         'clientid': '[Google Client Id].apps.googleusercontent.com',
         'cookiepolicy': 'single_host_origin',
         'height': 'tall',
         'requestvisibleactions': 'http://schemas.google.com/AddActivity',
         'scope': 'https://www.googleapis.com/auth/userinfo.email',
         'theme': 'dark',
         'width': 'standard'
      });
   }

   function googleLoginCallback( authResult ) {
      alert( "googleLoginCallback(authResult):  Inside." );
   }
</SCRIPT>

<button id="myGoogleButton">Register with Google+</button>

Answer 1

I figured out why the code was not working for a custom button. I had the button defined within a Struts 2 form. Apparently, in lieu of the traditional Chain of Responsibility pattern, where the click event is handled by one processor, both the Struts form and the Google API were processing the click. So, what I thought was a failure of the Google gapi.signin.render call making an asynchronous call to the callback, it was the Struts form trying to submit.

To fix it, you can:

1. Move the button outside of the Struts form (not very elegant)

2. Add "onclick="return false;" clause to the button

   <button id="myGoogleButton" onclick="return false;">Register with Google+</button>

3. Wrap the "button" in a DIV like:

   <DIV ID="myGoogleButton"> <SPAN CLASS="zocial googleplus">Register with Google+</SPAN> </DIV>

I hope this fixes someone else's problem. I spent 9 days trying to figure this out.