如何在不使用META标签的情况下显示默认的Google登录按钮？

问题描述：

下面的文章展示了如何显示按钮默认的谷歌标志... https://developers.google.com/identity/sign-in/web/sign-in 如何在不使用META标签的情况下显示默认的Google登录按钮？

使用下面的代码，在登入按钮显示就好了。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="google-signin-client_id" content="MYCLIENTID.apps.googleusercontent.com"> 
</head> 
<body> 
    <div class="g-signin2" data-onsuccess="onSignIn"></div> 

    <script src="https://apis.google.com/js/platform.js" async defer 
      onload="this.onload = handleClientLoad()" 
      onreadystatechange="if (this.readyState === 'complete') this.onload()"> 
    </script> 
</body> 
</html>

结果...

文章还提及CLIENT_ID可以在gapi.auth2.init（）方法来指定。 我认为这意味着如果CLIENT_ID以这种方式传递，则不需要元标记？

所以用下面的代码...

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <div class="g-signin2" data-onsuccess="onSignIn"></div> 

    <script type="text/javascript"> 
     function handleClientLoad() { 
      gapi.load('client:auth2', initClient); 
     } 

     function initClient() { 
      // Client ID and API key from the Developer Console 
      var CLIENT_ID = 'MY_CLIENT_ID.apps.googleusercontent.com'; 

      // Array of API discovery doc URLs for APIs used by the quickstart 
      var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]; 

      // Authorization scopes required by the API; multiple scopes can be 
      // included, separated by spaces. 
      var SCOPES = "https://www.googleapis.com/auth/calendar"; 

      gapi.client.init({ 
       apiKey: 'MY_API_KEY', 
       discoveryDocs: DISCOVERY_DOCS, 
       clientId: CLIENT_ID, 
       scope: SCOPES 
      }).then(function() { 
      }); 
     } 

    </script> 
    <script src="https://apis.google.com/js/platform.js" async defer 
      onload="this.onload = handleClientLoad()" 
      onreadystatechange="if (this.readyState === 'complete') this.onload()"> 
    </script> 
</body> 
</html>

的按钮不会显示。

如何在标题中显示默认的Google登录按钮而不使用元标记和CLIENT_ID？另外，在网页中公开CLIENT_ID和API_KEY会带来安全风险吗？我认为Oauth限制和API关键限制可以降低风险？

答

我建议使用OAuth方法。刚刚获得谷歌注册的图像按钮：

，然后实现的OAuth在本Calendar Quickstart看到。

只是为了确保不要在网络上暴露任何私人内容。也许该登录示例仅用于测试目的。

如前所述here：

我们建议您在设计应用程序的身份验证的端点，使您的应用程序不公开授权码到其他资源页面。

你好noogui，[这里]（https://www.w3schools.com/tags/tag_meta.asp）它说，元标记用于提供有关当前网页的信息。但为什么强制显示按钮？我想详细了解一下。你能解释一下吗？ – learner

如何在不使用META标签的情况下显示默认的Google登录按钮？

相关推荐