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

路人

以下代码用作使用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且用户未登录时。似乎auth库依赖于dom中存在的按钮进行初始化。

我打算将其合并到我的Angular应用中,该应用将在舞台上出现任何按钮之前初始化服务中的auth lib。如果用户已经登录,则不会出现登录按钮。根据这里的行为,如果没有DOM中的一个看起来很狭窄的按钮,我将无法使用此lib。

agektmr

为了使用.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命名空间,但这是我这里不讨论的另一种方法。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在没有代码重复的情况下初始化映射?

在没有SharedPreferences的情况下通过Google登录自动登录

没有初始化程序的情况下如何在Spring MVC应用程序中注册Servlet过滤器

jQuery UI对话框:如何在没有标题栏的情况下初始化?

如何在不使用gcloud auth登录创建的凭据文件的情况下初始化GoogleCredentials对象

如何在没有用户交互的情况下初始化全屏

如何在没有数据库的情况下登录Yii2?

在没有Google服务插件的情况下初始化Firebase云消息传递

使用Firebase身份验证服务时,如何在没有现有帐户的情况下通过Facebook / Google登录时引发错误

如何在没有空终止符的情况下初始化char数组?

如何确保在没有构造函数的情况下正确初始化对象?

在没有初始化的情况下进行结构初始化时的Swift初始化属性

XRDP:如何在没有本地用户登录的情况下获得远程终端服务?

如何在没有密码和没有authorized_keys的情况下登录?

没有构造函数的情况下,对象初始化如何发生?

Android Facebook登录:如何在没有XML的LoginButton的情况下使用LoginManager检查登录

如何在没有移动SDK的情况下使用提供商的令牌登录

如何在不使用现有Cookie的情况下初始化WKWebView

如何在Laravel上没有get()的情况下初始化模型

如何在没有密码和公钥的情况下进行 ssh 登录?

如何在没有任何用户/密码登录的情况下访问此 Samba 共享?

如何在没有会话/cookie/登录的情况下[半]验证用户?

如何在没有初始化的情况下声明变量

如何在没有 IV(初始化向量)的情况下使用 Cipher

如何在没有初始化程序的情况下在 formGroup 中设置子 formGroup?

'GADInvalidInitializationException',原因:'Google 移动广告 SDK 在没有 AppMeasurement 的情况下初始化

如何在没有初始化程序的情况下使用 TopLevel 对象?

如何在没有定义 ID 的情况下使用 selenium 登录网站?

如何在没有时间的情况下初始化随机