<!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文件。 Google登录按钮可以正常工作,但是登录后却什么也没做。应该将google登录按钮显示为无,并向我显示已登录用户的数据属性。我也有一些错误:
功能onSignIn和SignOut被定义为未使用的机器人
var概要文件之前和var auth2之前缺少'严格使用'
已使用但未定义的$
已使用但未定义的gapi
已使用但未定义的警报
向尝试实施google时偶然发现此问题的任何人登录您的网络应用程序。如果在未调用onSignIn时遇到此问题:
清除浏览器中的缓存。由于某些原因起作用。