尝试为网站实施 Google 登录，但该按钮未出现
[英]Trying to implement Google Sign-In for a website, but the button is not appearing
问题描述
I'm trying to implement the standard Google Sign-In option on a website, as they suggest here: https://developers.google.com/identity/sign-in/web/ .
我正在尝试在网站上实施标准的 Google 登录选项，正如他们在此处建议的那样： https : //developers.google.com/identity/sign-in/web/ 。
As a beginning, I thought I'd just follow the basic instructions ( https://developers.google.com/identity/sign-in/web/devconsole-project ) and I'm using nothing more than their sample code:一开始，我想我只需要遵循基本说明（ 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>
(obviously with the client id replaced by the one generated from their developer console for my site). （显然，客户端 ID 被从他们的开发人员控制台为我的站点生成的 ID 替换了）。 I entered the site IP address as a valid JavaScript origin when creating the Client ID, as described.如上所述，我在创建客户端 ID 时输入了站点 IP 地址作为有效的 JavaScript 来源。 However, the login button doesn't even appear.但是，登录按钮甚至没有出现。
I feel like an idiot, because I'm sure there's some obvious step that I'm missing, but I just haven't been able to figure it out.我觉得自己像个白痴，因为我确信我遗漏了一些明显的步骤，但我一直无法弄清楚。 Any recommendations?有什么建议吗？
5 个解决方案
解决方案1
7 已采纳 2017-06-13 15:08:29
Might be too late to respond, but here is the solution.回复可能为时已晚，但这是解决方案。
Remove "async defer" from loading platorm.js.从加载 platorm.js 中删除“异步延迟”。
解决方案2
2 2017-05-31 14:03:57
I had the same problem and it was solved by disabling Adblock.我遇到了同样的问题，通过禁用 Adblock 解决了。 It prevents the script from loading properly.它会阻止脚本正确加载。
解决方案3
1 2018-06-20 10:58:13
The Google Sign in API works only on a running web server.
Sign inbutton if you are directly opening the file.Sign in按钮。
Quoted from the answer here引自这里的答案
I was facing the same problem.我面临同样的问题。 Running it on a xampp server worked for me.在 xampp 服务器上运行它对我有用。
解决方案4
0 2015-07-06 21:16:48
Your sample code worked for me.您的示例代码对我有用。 To get it to work:要让它工作：
- Create a temporary folder and add a file index.html创建一个临时文件夹并添加一个文件 index.html
- Edit index.html and paste the full contents of your script into it编辑 index.html 并将脚本的全部内容粘贴到其中
- Start a Web server on localhost, for my test, I used the python built-in web server,
python -m SimpleHTTPServer 8000在 localhost 上启动一个 Web 服务器，为了我的测试，我使用了 python 内置的 Web 服务器， python -m SimpleHTTPServer 8000 - Navigate to the web server running on http://localhost:8000导航到在http://localhost:8000上运行的 Web 服务器
When running your code, I see the button render in blue.运行您的代码时，我看到按钮呈蓝色。 A few things worth trying if this still doesn't work for you:如果这仍然对您不起作用，那么一些值得尝试的事情：
- See if the content renders in another browser, I prefer and tested in Chrome查看内容是否在其他浏览器中呈现，我更喜欢并在 Chrome 中进行了测试
- Use the browser's developer console to get information about JavaScript errors使用浏览器的开发者控制台获取有关 JavaScript 错误的信息
- Ensure that you have properly configured the client that you set up in the Google Developer Console确保您已正确配置您在Google Developer Console 中设置的客户端
解决方案5
0 2020-08-30 19:53:57
I had this issue too.我也有这个问题。 The problem is that I wanted to add it using javascript, though it seems the google API disallows that.问题是我想使用 javascript 添加它，尽管 google API 似乎不允许这样做。
The solution for me was to add the div to my index.html file and set it to display: none;我的解决方案是将div添加到我的 index.html 文件并将其设置为display: none; . . Then I can move it around and reshow it when I need it.然后我可以移动它并在需要时重新显示它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.