使用Google oAuth 2.0时刷新新用户登录页面
我试图制作一个网站使用Google Sign For Websites.主要是为了了解它是如何工作的。使用Google oAuth 2.0时刷新新用户登录页面
我已经按照该教程Google提供的步骤进行了操作。用户可以成功登录到我的网站,它可以将用户ID传递到后端,然后使用php脚本验证ID服务器端。
然后PHP会在网站上为用户创建一个会话。我无法弄清楚的是,当用户点击Google登录按钮并且登录成功时,我将如何刷新页面。刷新页面将允许主页重新加载新的php会话数据。
<div class="g-signin2 signin-button" data-onsuccess="onSignIn" data-theme="dark"></div>
function onSignIn(googleUser){
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://mywebsite.com/tokensignin.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
console.log('Signed in as: ' + xhr.responseText);
};
xhr.send('idtoken=' + id_token);
};
我使用简单location.reload()
代码的onload =函数()部的内侧试过。这会导致页面在每次加载时都会无限次地刷新,但是由于Google每次都验证用户是否通过此变量登录了该变量。
我试过looking through their reference使用GoogleAuth.isSignedIn.listen(listener)
来监视任何更改,但它似乎并未完全满足我的要求,或者我没有正确使用它,因为我不完全知道监听器应该是什么。
另一种选择可能是使用它们的GoogleAuth.attachClickHandler(container, options, onsuccess, onfailure)
函数,但我不完全确定如何正确配置选项字段/变量。
如果有人能提供一些关于这个世界如何工作的见解,我将不胜感激。
总结如果用户已经使用Google登录我的网站,我希望网页不做任何事情,如果他们点击登录按钮,登录成功后我想刷新他们所在的页面。
您可以使用回调函数向xhr添加一个侦听器。
xhr.addEventListener("load", loginComplete);
,然后创建一个函数:
function loginComplete(evt) {
console.log("Login Complete");
window.location.reload();
}
编辑:
确定。由于听众不帮忙。您需要检查用户是否已经登录。为了保存这些信息,我能想到的一件事就是使用cookie。
因此,您可以存储您从Google收到的Auth令牌,并为其设置一个cookie并在每次进行POST之前检查。
这里是一个不错的js的cookie库:https://github.com/js-cookie/js-cookie
然后为onload您保存ID:
xhr.onload = function() {
Cookie.set('google_token', id_token);
window.location.reload();
};
而且onSignIn功能将是这样的:
function onSignIn(googleUser){
var cookie = Cookie.get('google_token');
if(cookie != undefined){
//cookie is set
return;
}
...
//rest of the function
}
当然,你需要例如,检查存储在cookie中的令牌是否仍然有效,有些情况下可以刷新它,而不是让用户再次登录(oAut h API提供这样的东西)。
使一些安全措施,以确保令牌不被注入等。
为什么没有你的后端重定向(或发送信息,因此页面,以便它可以在成功重定向)?
需要重新加载登录屏幕?
你也可以看看听者的文档,它似乎可以解决你想要的。即。监听用户更改并触发功能或重定向。
https://developers.google.com/identity/sign-in/web/listeners
我的做法是一样的你和我确实遇到了与不断清爽同样的问题。
我尝试了几个解决方案,最好的工作之一是如下:
- 使用GAPI2触发回调用户迹象
onGoogleSignIn
- 后端通过会话检查ID令牌有效性,体征用户在我Web应用程序
- 如果成功的话,我注销用户使用GAPI2,防止无限的重装,因为
onGoogleSignIn
永远不再叫 - 然后我刷新页面,replac e为退出按钮的登录按钮,我的webapp
此解决方法当然是非常无用的,如果你想操作用户的谷歌帐户的一些数据,但我发现没有使用此功能。
将某人从他们的Google帐户中签名的代码。
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function() {
console.log('User signed out.');
});
}
这仍然不能解决问题,因为它仍然会创建无限循环的页面刷新。当按钮被点击并且登录完成时它将触发刷新。但是,一旦刷新完成页面加载,它就会再次发送请求。由于每次加载页面时,Google都会处理登录信息,以查看用户是否仍然登录到网站。如果他们登录到该站点,则登录成功完成。然后导致登录被再次“完成”。 – Jem
@New_Wav你可以检查我的编辑吗? –
当我在第二天或第二天有空时,我会试试这个。我认为这可能会成为最可靠的方法。我在最后一天左右对API做了一些额外的尝试。有些功能会查找用户状态的变化,例如GoogleAuth.isSignedIn.listen,但这些功能会引起一些已经存在的问题。每次页面加载时都会检查状态更改的侦听,并再次创建无限循环刷新。检查新已登录vs的cookie,与会话配对以验证数据将成为一种简单而安全的方式来执行此操作 – Jem