oauth - Google+ 自定义登录按钮

Question

当我使用内置的 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>

Answer 1

我弄清楚了为什么代码不适用于自定义按钮。我在 Struts 2 表单中定义了按钮。显然，Struts 表单和 Google API 都在处理点击，而不是传统的责任链模式(点击事件由一个处理器处理)。因此，我认为是 Google 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 天时间试图解决这个问题。