3

当我使用内置的 Google+ 登录按钮时，一切正常。在弹出窗口中对 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>
4

1 回答 1

5

我弄清楚为什么代码不适用于自定义按钮。我在 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 天时间试图弄清楚这一点。

于 2013-05-30T17:57:02.427 回答