Oauth 谷歌+；自定义“登录”按钮

当我使用内置的Google+登录按钮时，一切正常。在弹出窗口中对Google进行OAuth调用，用户接受或取消，然后调用回调

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

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

有效的代码（内置的、不可自定义的Google+登录按钮）：

/**
*异步加载Google Javascript文件。
*/
(
函数（）{
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）；
}
)();
函数googleLoginCallback（authResult）{
警报（“googleLoginCallback（authResult）：Inside.”）；
}

不起作用的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>

/**
*异步加载Google Javascript文件。
*/
(
函数（）{
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）；
}
)();
函数myGoogleButtonRender（authResult）{
gapi.sign.render（'myGoogleButton'{
“访问类型”：“联机”，
“approvalprompt”：“自动”，
“回调”：“googleLoginCallback”，
'clientid'：'[Google客户端Id].apps.googleusercontent.com'，
'cookiepolicy'：'single_host_origin'，
“高度”：“高”，
“请求访问操作”：http://schemas.google.com/AddActivity',
'范围'：'https://www.googleapis.com/auth/userinfo.email',
“主题”：“黑暗”，
“宽度”：“标准”
});
}
函数googleLoginCallback（authResult）{
警报（“googleLoginCallback（authResult）：Inside.”）；
}
在谷歌注册+

我弄明白了为什么自定义按钮的代码不起作用。我在Struts 2表单中定义了按钮。显然，与传统的责任链模式（点击事件由一个处理器处理）不同，Struts表单和GoogleAPI都在处理点击。所以，我认为Google gapi.signin.render调用对回调进行异步调用失败了，是Struts表单试图提交

要解决此问题，您可以：

将按钮移到Struts表单之外（不是很优雅）

添加“onclick=”return false；“点击按钮

向Google+注册

将“按钮”包装在一个DIV中，如下所示：

在谷歌注册+

---

我希望这能解决其他人的问题。我花了9天的时间试图解决这个问题。

有人试过运行我文章中的示例吗？我至少想知道是否有人看到了呈现自定义按钮的异步特性。如果没有人有此问题，那么我知道这是另一个问题；但我现在遵循前面的示例我是Google。提前谢谢。我刚刚发现（经过了几个小时的反复试验），如果你在元素中放入了render（）操作的任何东西，render（）就会方法不会呈现任何内容。它只是不会用普通的红色按钮替换您的内容。去掉它，红色按钮就会出现。非常感谢！这让我很头疼。+1

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