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

How do I initialise Google Sign in with no login button?

本文关键字：登录 情况下 初始化 谷歌 按钮      更新时间：2023-09-26

以下代码用作使用Google登录的简单测试页面：

<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并且用户未登录时。身份验证库似乎依赖于 dom 中存在的按钮来初始化。

我计划将其合并到我的 Angular 应用程序中，该应用程序将在舞台上出现任何按钮之前初始化服务中的身份验证库。如果用户已登录，则不会出现登录按钮。根据这里的行为，如果没有 DOM 中的按钮，我将无法使用这个库，这似乎相当狭窄。

为了使用.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
  • 按钮资源不会自动加载，请带上您的
  • 如果你想利用小部件，你必须使用platform.js和.signin2命名空间，但这是我不会在这里讨论的另一种方法。

不要取出class="g-signin2"，而是向其添加style="display:none;"，并在函数onSignIn上隐藏按钮（如果可见），使用新功能onFailedSignIn添加一个'onfailure': onFailedSignIn gapi.signin2.render，如果按钮隐藏，则显示按钮。

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

相关文章：