这是一个建立在 example 上的页面
<html>
<head>
<title>Demo: Getting an email address using the Google+ Sign-in button</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
.hide { display: none;}
.show { display: block;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<!--<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>-->
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* Triggered when the user accepts the sign in, cancels, or closes the
* authorization dialog.
*/
function loginFinishedCallback(authResult) {
if (authResult) {
console.log('authResult : ',authResult);
if (authResult['error'] == undefined){
gapi.auth.setToken(authResult); // Store the returned token.
toggleElement('signin-button'); // Hide the sign-in button after successfully signing in the user.
getEmail(); // Trigger request to get the email address.
} else {
console.log('An error occurred');
}
} else {
console.log('Empty authResult'); // Something went wrong
}
}
/*
* Initiates the request to the userinfo endpoint to get the user's email
* address. This function relies on the gapi.auth.setToken containing a valid
* OAuth access token.
*
* When the request completes, the getEmailCallback is triggered and passed
* the result of the request.
*/
function getEmail(){
// Load the oauth2 libraries to enable the userinfo methods.
gapi.client.load('oauth2', 'v2', function() {
var request = gapi.client.oauth2.userinfo.get();
request.execute(getEmailCallback);
});
}
function getEmailCallback(obj){
var el = document.getElementById('email');
var email = '';
console.log("OBJ = ",obj)
if (obj['email']) {
email = 'Email: ' + obj['email'];
}
//console.log(obj); // Uncomment to inspect the full object.
el.innerHTML = email;
toggleElement('email');
}
function toggleElement(id) {
var el = document.getElementById(id);
if (el.getAttribute('class') == 'hide') {
el.setAttribute('class', 'show');
} else {
el.setAttribute('class', 'hide');
}
}
</script>
</head>
<body>
<div id="signin-button" class="show">
<div class="g-signin" data-callback="loginFinishedCallback"
data-approvalprompt="auto"
data-clientId="751931329576.apps.googleusercontent.com"
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
data-height="short"
data-cookiepolicy="http://semicon-equip.com"
>
</div>
<!-- In most cases, you don't want to use approvalprompt=force. Specified
here to facilitate the demo.-->
</div>
<div id="email" class="hide"></div>
</body>
</html>
问题 1:它总是以“
Uncaught TypeError: Cannot read property 'load' of undefined”失败，直到我使用
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>而不是示例代码:
<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>plusone.js有什么区别和 client:plusone.js ?
问题 2:为什么每页加载代码运行两次？
问题三:用户刚登录就退出了，怎么解决？
error demo page对于上述(所有错误都在后台控制台中)。
最佳答案
这并不是问题的真正答案，而是重现问题的分步过程。
在我用来测试的简单 html 页面下方(类似于 Ray C Lin 的示例)。
我已经尽可能简单地避免与代码的其他部分交互:
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<input type="button" id="signOut" value="Sign out"></button>
<span id="signinButton">
<span class="g-signin"
data-accesstype="offline"
data-callback="signinCallback"
data-clientid="YOUR_CLIENT_ID_HERE"
data-cookiepolicy="single_host_origin"
data-scope="email"
</span>
</span>
<script type="text/javascript">
$('#signOut').on('click', function() {
gapi.auth.signOut();
});
function signinCallback(authResult) {
console.log("signinCallback: ", authResult);
}
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
您必须使用您自己的 google 客户端 ID 更新 data-clientid，并从授权的 javascript 来源显示此页面。
请注意，这可能不适用于本地主机，正如 Ian 在对这篇文章的评论中所建议的 https://plus.google.com/102746521318753162868/posts/Z5Gkro9YXVs
首先，使用您的 Google 帐户登录:您将在控制台中看到成功的回调。
如果单击注销，您将在控制台中看到带有“user_signed_out”的回调。
到现在为止还挺好。
再次登录，等待 1 小时，直到 token 过期(这很难测试，因为我不知道如何缩短 token 生命周期)。
一小时后，点击退出按钮:没有回调被调用。
再次点击登录按钮:
一旦 session 过期，就无法恢复到“正常”状态，您总是会收到带有“user_signed_out”的第二个回调。
实际上，有一种方法可以恢复到“正常”状态:从 google 仪表板撤消对应用程序的访问权限。
这对我来说并不是真正的问题，因为我使用 Google+ 仅使用一次性授权代码将用户登录到我的应用程序，并且我没有使用来自客户端的访问 token 。
但这会阻止自动登录工作，因为从谷歌的角度来看，用户会立即被视为“已退出”。
关于Google-plus 登录 : the code runs twice, 用户登录后立即退出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24608395/