javascript - 我登录 Google 帐户后没有任何反应

标签 javascript java html google-oauth

<!doctype html>
<html>
<head>
<title>Google Sign-In</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="google-signin-client_id" content="MY_client_id_that_i_replaced_to_post_here.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js"></script>

<style>
.g-signin2{
    margin-left:500px;
    margin-top:200px;
}
.data{
    display:none
}
</style>

</head>

<body>
<div class="g-signin2" data-onsuccess="onSignIn()"></div>
<div class="data">
<p>Profile Details</p>
<img id="pic" class="img-circle" width="100" height="100"/>
<p>Email Addres</p>
<p id="email" class="alert alert-danger"></p>
<button onclick="SignOut()" class="btn btn-danger">SignOut</button>
</div>

</body>

</html>
function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    $(".g-signin2").css("display", "none");
    $(".data").css("display", "block");
    $("#pic").attr("src", profile.getImageUrl());
    $("#email").text(profile.getEmail());
}
function SignOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.SignOut().then(function () {
        alert("You have been successfully signed out");
        $(".g-signin2").css("display", "block");
        $(".data").css("display", "none");
    });
}

分别是html和javascript文件。谷歌登录按钮正在工作,但在我登录后它没有做任何事情。它应该显示谷歌登录按钮,并向我显示登录用户的数据属性。 我也有一些错误:

函数 onSignIn 和 SignOut 被定义为未使用的机器人

在 var profile 和 var auth2 之前缺少“严格使用”

$已使用但未定义

gapi已使用但未定义

已使用警报但未定义

最佳答案

致那些在尝试在您的网络应用程序中实现 Google 登录时偶然发现此问题的人。如果您在未调用 onSignIn 时遇到此问题:

清除浏览器缓存。由于某种原因,它起作用了。

另请确保将 client_id 上的来源列入白名单并添加端口(如果端口不是 80)

基本上这解决了这个问题,因为我设法将错误定位到 data-onsuccess。

关于javascript - 我登录 Google 帐户后没有任何反应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62159464/

相关文章:

html - 将内部 div 拉伸(stretch)到屏幕的整个高度和溢出的内容

javascript - javascript iffy结构之间的区别

javascript - 将元素的 runat 设置为 ="server"时,ASP.NET javascript 代码不起作用

javascript - 是否可以在 Google Apps 脚本中迭代 ENUM?

javascript - 如何按范围移动文本

javascript - Laravel 5 通过 laravel :5 query 检查表中是否存在两条记录

java - Java中有些线程在 `methodB`,如何保证 "blocked"为 `methodA`?

java - Ant 从子文件夹构建 : import build. xml,不覆盖其属性

java - 如何为 websphere 7 创建 ibm-web-bnd.xmi 文件

Javascript CSS DIV float