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

我遇到了同样的问题，它通过禁用Adblock解决了。它可以防止脚本正确加载。

Answer 2

您的示例代码适合我。为了让它发挥作用：

创建一个临时文件夹并添加文件index.html
编辑index.html并将脚本的全部内容粘贴到其中
在localhost上启动Web服务器，为了我的测试，我使用了python内置的Web服务器<div ng-app ng-controller="Ctrl"> <div ng-init="t = (trains | filter:1)"> {{ t }} {{ trains | filter:1 }} </div> <div ng-if="true" ng-init="t = (trains | filter:2)"> {{ t }} {{ trains | filter:2 }} </div> </div>
导航到在http://localhost:8000

运行代码时，我看到按钮渲染为蓝色。如果这对你不起作用，还有一些值得尝试的事情：

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

Answer 3

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

删除＆＃34; async defer＆＃34;从加载platorm.js。

Answer 4

Google登录API仅在运行中的网络服务器上有效。如果您直接打开文件，将看不到let message = ""; switch (season) { case 'Summer': switch(Summer) { case 'April' : message = "season summer and month April" break; case 'May' : message = "season summer and month May" break; } case 'Monsoon': switch(Monsoon) { case 'July' : message = "season Monsoon and month July" break; case 'August' : message = "season Monsoon and month August" break; } case 'Spring': switch(Spirng) { case 'XX' : message = "season Spring and month XX" break; case 'YY' : message = "season Spring and month YY" break; } case 'Autumn': switch(Autumn) { case 'XYZ' : message = "season Spring and month XYZ" break; case 'PQM' : message = "season Spring and month PQM" break; } default: break; }按钮。

引用答案here

我面临着同样的问题。在xampp服务器上运行它对我有用。

Answer 5

我也遇到了这个问题。问题是我想使用javascript添加它，尽管看起来google API不允许这样做。

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

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

5 个答案: