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表单试图提交。

要解决此问题，您可以：

将按钮移到Struts表单之外（不是很优雅）
将“onclick =”返回false;“子句添加到按钮

<button id="myGoogleButton" onclick="return false;">Register with Google+</button>
在DIV中包裹“按钮”，如：

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

我希望这可以修复别人的问题。我花了9天时间试图解决这个问题。

Google+自定义登录按钮

1 个答案: