尝试为网站实施 Google 登录，但未显示该按钮

Question

我正在尝试在网站上实施标准 Google 登录选项，正如他们在此处建议的那样：https://developers.google.com/identity/sign-in/web/。

一开始，我想我只要遵循基本说明 (https://developers.google.com/identity/sign-in/web/devconsole-project)，我只使用他们的示例代码：

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log("Name: " + profile.getName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      };
    </script>
  </body>
</html>

（显然，客户端 ID 已替换为从他们的开发人员控制台为我的网站生成的 ID）。如前所述，我在创建客户端 ID 时输入了站点 IP 地址作为有效 JavaScript 来源。但是，登录按钮甚至没有出现。

我觉得自己像个白痴，因为我确信我遗漏了一些明显的步骤，但我就是没弄明白。有什么建议吗？

Answer 1

您的示例代码对我有用。要使其正常工作：

创建一个临时文件夹并添加一个文件index.html
编辑 index.html 并将脚本的全部内容粘贴到其中
在本地主机上启动一个 Web 服务器，为了我的测试，我使用了 python 内置的 Web 服务器，python -m SimpleHTTPServer 8000
在 http://localhost:8000

当运行您的代码时，我看到按钮呈蓝色。如果这仍然不适合您，一些值得尝试的事情：

查看内容是否在其他浏览器中呈现，我更喜欢并在 Chrome
使用浏览器的开发人员控制台获取有关 JavaScript 错误的信息
确保您已正确配置在 Google Developer Console

Answer 2

我遇到了同样的问题，通过禁用 Adblock 解决了这个问题。它会阻止脚本正确加载。

Answer 3

可能来不及回复，但这是解决方案。

从加载 platorm.js 中删除 "async defer"。

Answer 4

The Google Sign in API works only on a running web server. You will not be able to see the Sign in button if you are directly opening the file.

引用自回答here

我遇到了同样的问题。运行它在 xampp 服务器上对我有用。

Answer 5

我也有这个问题。问题是我想使用 javascript 添加它，尽管 google API 似乎不允许这样做。

我的解决方案是将 div 添加到我的 index.html 文件并将其设置为 display: none;。然后我可以移动它并在需要时重新显示它。

尝试为网站实施 Google 登录，但未显示该按钮

Trying to implement Google Sign-In for a website, but the button is not appearing

javascript

google-signin