Google+自定义登录按钮

Question

当我使用内置的Google+登录按钮时,一切都按预期工作.OAuth的调用是在弹出窗口中进行的,用户接受或取消,然后调用回调.

当我尝试使用示例gapi.signin.render方法自定义我的按钮时,会进行Google调用,但会立即调用回调.

我是一名服务器端开发人员,试图为前端开发人员提供POC.我只知道足够的Javascript是危险的.有人能告诉我为什么gapi.signin.render方法正在对授权进行异步调用,这会在用户点击弹出窗口中的任何内容之前调用回调吗？在替代方案中,请帮助我更正下面第二个示例中的代码,以便仅在用户在OAuth Google窗口中单击"接受/取消"后才会调用回调.在第二种方法中,请告诉我如何更改内置Google+登录按钮的文字.

有效的代码(内置,不可自定义的Google+登录按钮):

<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>

该gapi.signin.render代码不工作:

<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

我弄清楚为什么代码不适用于自定义按钮.我在Struts 2表单中定义了按钮.显然,代替传统的责任链模式,点击事件由一个处理器处理,Struts表单和Google API都处理点击.所以,我认为是谷歌gapi.signin.render调用失败的一个异步调用回调,它是Struts表单试图提交.

要修复它,您可以:

1. 将按钮移到Struts表单之外(不是很优雅)

2. 在按钮上添加"onclick ="return false;"子句

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

3. 在DIV中包裹"按钮",如:

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

我希望这可以解决别人的问题.我花了9天试图解决这个问题.