我正在向网站添加 Google 登录按钮。在文档中，Google 提供了两个选项，一个“基本”按钮:
https://developers.google.com/identity/sign-in/web/sign-in
和使用 signin2.render() 的“自定义”按钮:
https://developers.google.com/identity/sign-in/web/build-button
我遇到的问题是这两个按钮表现出不同的行为。如果我使用任一按钮登录，该按钮的“标题”将从“登录”更改为“已登录”以反射(reflect)登录状态。但是，如果我现在刷新页面，则基本按钮保留标题“登录”，而自定义按钮将其标题更改回“登录”，提示(错误地)登录状态已通过页面更改刷新。
如果我通过运行以下命令在浏览器控制台中手动检查登录状态刷新后:
auth = gapi.auth2.getAuthInstance()
auth.isSignedIn.get()
我收到
true作为返回，表明刷新确实没有改变登录状态，这与按钮标题的变化相反。所以我的问题是:我怎样才能让自定义按钮表现得像基本按钮一样，这样它的标题就不会在刷新时改变？我喜欢的基本按钮的另一个(相关的，我假设)行为是在每个页面加载(如果用户已登录)时调用按钮的“成功”回调，而自定义按钮不这样做。所以我还想更改自定义按钮上的这种行为以匹配基本按钮的行为。任何建议将不胜感激!
我传递给渲染的参数如下所示:
function renderButton() {
gapi.signin2.render('mybutton', {
'scope': 'profile email',
'width': 125,
'height': 40,
'longtitle': false,
'theme': 'light',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
最佳答案
你能提供你传递给按钮的参数吗？您能否确认 JS 控制台中没有任何错误并且没有任何 400/403/404/4xx 请求？
我已经使用以下代码测试了这个功能，它似乎工作得很好(你必须用你的实际 client_id 替换 YOUR_CLIENT_ID)。
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
</head>
<body>
<script>
function onSuccess(googleUser) {
console.log('onSuccess!');
}
function onCustomSuccess(googleUser) {
console.log('onCustomSignIn!');
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
function onLoad() {
gapi.signin2.render('custom_signin_button', {
'onsuccess': onCustomSuccess
});
}
</script>
<div class="g-signin2" data-onsuccess="onSuccess"></div>
<div id="custom_signin_button"></div>
<a href="#" onclick="signOut();">Sign out</a>
<script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>
</body>
</html>
编辑:
将基本作用域声明为 head 的元标记是最好的解决方案。
<meta name="google-signin-scope" content="profile email">
关于oauth-2.0 - Google API 登录按钮 : Basic v. 自定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29828250/