Question

以下代码用作使用Google sign in的简单测试页：

<html lang="en">
  <head>

    <script type="text/javascript">

        function onGapiLoaded() {
            auth = gapi.auth2.init({
                client_id: "REPLACE_WITH_YOUR_ID",
                scope: "profile email"

            });

            console.log( "signed in: " + auth.isSignedIn.get() );

            auth.isSignedIn.listen( function(signedIn){ console.log( "signedin: " + signedIn ) } );

            gapi.signin2.render( "signInButton", {
                'width': 230,
                'height': 50,
                'longtitle': true,
                'theme': 'dark',
                'onsuccess': onSignIn
            } );
        }

          function onSignIn(googleUser) {
            // Useful data for your client-side scripts:
            var profile = googleUser.getBasicProfile();
            console.log("Name: " + profile.getName());
          };


    </script>

    <script src="https://apis.google.com/js/platform.js?onload=onGapiLoaded" async defer></script>

  </head>
  <body>
    <div id="signInButton" class="g-signin2"></div>
  </body>
</html>

但是，如果我从登录按钮中移除class="g-signin2"，或者完全删除按钮，按钮不会消失，但整个登录库停止工作 - 我得到一个未被捕获的例外：

无法读取未定义
的属性'init'

当我尝试调用gapi.auth2.init并且用户未登录时。似乎auth库依赖于dom中存在的按钮来初始化。

我计划在我的Angular应用程序中加入它，这将在舞台上出现任何按钮之前初始化服务中的auth lib。如果用户已登录，则不会显示登录按钮。基于此处的行为，如果没有DOM中的按钮，我将无法使用此lib，这似乎相当紧缩。

Answer 1

要使用.auth2命名空间，您需要先加载它。合并它并稍微调整一下，这是我推荐的代码。

<html lang="en">
  <head>
    <script src="https://apis.google.com/js/api.js"></script>    
    <script type="text/javascript">
        function onSignIn(googleUser) {
            console.log( "signedin");
            // Useful data for your client-side scripts:
            var profile = googleUser.getBasicProfile();
            console.log("Name: " + profile.getName());
        };

        gapi.load('auth2', function() {
            gapi.auth2.init({
                client_id: "REPLACE_WITH_YOUR_ID",
                scope: "profile email" // this isn't required
            }).then(function(auth2) {
                console.log( "signed in: " + auth2.isSignedIn.get() );  
                auth2.isSignedIn.listen(onSignIn);
                var button = document.querySelector('#signInButton');
                button.addEventListener('click', function() {
                  auth2.signIn();
                });
            });
        });
    </script>
  </head>
  <body>
    <div id="signInButton"><img src="IMAGE_FILE" /></div>
  </body>
</html>

有几点需要注意：

加载api.js而不是platform.js
按钮资源未自动加载，bring yours
如果你想利用小部件，你必须使用platform.js和.signin2命名空间，但这是我不会在这里讨论的另一种方法。

Answer 2

请不要取出a，而是将class="g-signin2"添加到其中，并在功能onSignIn上隐藏按钮（如果可见），将style="display:none;"添加到{{1}使用新函数onFailedSignIn，如果它被隐藏，则显示该按钮。

这样，您不会破坏Google隐藏的任何默认功能，但仍然可以在用户通过身份验证时获得隐藏按钮的功能，并在不通过时显示该功能。

如何在没有登录按钮的情况下初始化Google登录？

2 个答案: