oauth - Google+ customizing the sign-in button -

when use built-in google+ sign-in button, works expected. oauth call google made in popup, user accepts or cancels, callback called.

when try customize button using example gapi.signin.render method, google call made callback called immediately.

i server-side developer trying provide poc front-end developers. know enough javascript dangerous. can tell me why gapi.signin.render method making asynchronous call authorization, makes callback called before user has clicked in popup? in alternative, please me correct code in 2nd example below effect callback being called after user clicks accept/cancel in oauth google window. in second alternative, please tell me how can change text of built-in google+ sign-in button.

the code works (built-in, non-customizable google+ sign-in button):

<script type="text/javascript">    /**     * asynchronously load 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 does not work:

<script type="text/javascript">    /**     * asynchronously load 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 google+</button> 

i figured out why code not working custom button. had button defined within struts 2 form. apparently, in lieu of traditional chain of responsibility pattern, click event handled 1 processor, both struts form , google api processing click. so, thought failure of google gapi.signin.render call making asynchronous call callback, struts form trying submit.

to fix it, can:

1. move button outside of struts form (not elegant)

2. add "onclick="return false;" clause button

   <button id="mygooglebutton" onclick="return false;">register google+</button>

3. wrap "button" in div like:

   <div id="mygooglebutton"> <span class="zocial googleplus">register google+</span> </div>

i hope fixes else's problem. spent 9 days trying figure out.