Javascript 使用Google oAuth 2.0时刷新新用户登录页面

我正在尝试制作一个网站，主要是为了了解它是如何工作的

我已经按照谷歌提供的教程中概述的步骤进行了操作，效果很好。用户可以成功登录到我的网站，它可以将用户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);
      };

函数onSignIn（谷歌用户）{
//需要传递到后端的ID令牌：
var id_token=googleUser.getAuthResponse（）.id_token；
var xhr=new XMLHttpRequest（）；
xhr.open（'POST'，'https://mywebsite.com/tokensignin.php');
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
xhr.onload=函数（）{
log（'Signed-in-as:'+xhr.responseText）；
};
send（'idtoken='+id_token）；
};

我尝试在代码的onload=function（）部分中简单地使用

location.reload（）

。这会导致页面在每次加载时都会自动刷新，因为谷歌每次都会验证用户是通过这个

xhr

变量登录的

我曾尝试使用

GoogleAuth.isSignedIn.listen（listener）

来监视任何更改，但它似乎没有满足我的要求，或者我没有正确使用它，因为我不知道侦听器应该是什么

另一个选项可能是使用他们的

GoogleAuth.attachClickHandler（容器、选项、onsuccess、onfailure）

函数，但我不完全确定如何正确配置选项字段/变量

如果有人能提供一些关于这个世界如何运作的见解，我将不胜感激

---

总结一下，如果用户已经使用Google登录到我的网站，我希望页面不做任何事情，如果他们单击“登录”按钮，在登录成功后，我希望刷新他们所在的页面。

您可以使用回调函数向xhr添加一个侦听器

xhr.addEventListener("load", loginComplete);

然后创建一个函数：

function loginComplete(evt) {
    console.log("Login Complete");
    window.location.reload(); 
}

编辑：

嗯。因为听众没有帮助。您需要检查用户是否已登录。为了保存这些信息，我能想到的一件事就是使用cookies

因此，您可以存储从Google收到的身份验证令牌，并为其设置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中的令牌是否仍然有效，在某些情况下，您可以刷新它，而不是让用户再次登录（oAuth API提供了这样的功能）

---

采取一些安全措施以确保令牌未被注入等

为什么不让后端重定向（或者发送信息以便页面成功重定向）

重新加载登录屏幕需要什么

您还可以查看侦听器文档，这似乎可以解决您的问题。即，监听用户更改并触发函数或重定向

---

我的方法和你的方法一样，我确实遇到了同样的问题，经常刷新

我尝试了两种解决方案，最好的解决方案如下：

• 用户使用触发回调的GAPI2登录
• 后端检查ID令牌的有效性，并通过my webapp上的会话登录用户
• 如果成功，我将使用GAPI2注销用户，以防止无限重载，因为不再调用

  onGoogleSignIn

• 然后我刷新页面，并用我的webapp的注销按钮替换登录按钮

如果你想操纵用户谷歌账户上的一些数据，这个解决方案当然是毫无用处的，但我发现这个功能没有用

---

用于将某人从其google帐户注销的代码

function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
        console.log('User signed out.');
    });
}

---

这仍然不能解决问题，因为它仍然会创建页面刷新的无限循环。单击按钮并完成登录时，它将触发刷新。但是，一旦刷新完成页面加载，它会再次发送请求。由于每次加载页面时，谷歌都会处理登录，以查看用户是否仍然登录到该站点。如果他们登录到站点，则登录将成功完成。这会导致再次“完成”登录。我会在接下来一两天有时间的时候尝试一下。我认为这将可能成为最可靠的方法。在最后一天左右，我对API做了一些额外的实验。有些函数会查找用户状态的更改，例如GoogleAuth.isSignedIn.listen，但这些函数会带来一些已经存在的问题。每次加载页面时，都会检查侦听状态更改，再次创建无限刷新循环。使用cookie检查已登录的新vs，并与验证数据的会话配对，将是一种简单而安全的方法。您可以研究的另一个想法是使用框架来构建您的网站，如React或Vue。他们都有处理这类事情的软件包，还有更多。你做的工作太多了，你可能会专注于其他一些重要的事情。我个人使用Laravel来处理我的所有后端，包括基于令牌的身份验证，这非常容易实现……从长远来看，使用这些框架中的一个或组合是处理类似问题的最佳方法，我同意。原则上，通过cookies来确定新登录是最好的选择