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

Question

我正在尝试使用 Google Sign For Websites. 创建一个网站主要是为了了解它的工作原理。

我已按照 Google 提供的教程中概述的步骤进行操作，效果很好。用户可以成功登录我的站点，它可以将用户 ID 传递给后端，然后使用 php 脚本验证 ID 服务器端。

然后 Php 在网站上为用户创建一个 session 。我想不通的是，当用户单击 Google 登录按钮并成功登录时，我将如何刷新页面。刷新页面将允许使用新的 php session 数据重新加载主页。

<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);
      };

我试过在代码的 onload = function() 部分内简单地使用 location.reload() 。这会导致页面在每次加载时无限刷新，但是因为 Google 每次都会验证用户是否通过此 xhr 变量登录。

我试过了 looking through their reference使用 GoogleAuth.isSignedIn.listen(listener) 来监视任何更改，但它似乎没有完全满足我的要求，或者我没有正确使用它，因为我不完全知道是什么听众应该是。

另一种选择可能是使用他们的 GoogleAuth.attachClickHandler(container, options, onsuccess, onfailure) 函数，但我不完全确定如何正确配置选项字段/变量。

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

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

Answer 1

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

xhr.addEventListener("load", loginComplete);

然后创建一个函数:

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

编辑:

好的。由于听众没有帮助。您将需要检查用户是否已经登录。要保存该信息，我想到的一件事是使用 cookie。

因此，您可以存储从 Google 收到的 Auth Token 并为其设置 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
}

当然你需要改进这段代码，比如检查保存在cookies中的token是否仍然有效，某些情况下你可以直接刷新它而不是让用户重新登录(oAuth API提供了这样的东西) .

采取一些安全措施以确保 token 未被注入(inject)等。