页面刷新后，Gapi 登录状态不会保留在用户浏览器中

gapi login state not retained in users browser after page refresh

本文关键字：保留 用户 浏览器 状态 刷新 登录 Gapi      更新时间：2023-09-26

我已经潜入了一个旨在利用YouTube API的小项目。我有一些基本的代码，我最初认为是正常工作。

使用 Chrome，我可以通过自己网络上的多台计算机登录，使用以下源代码没有任何问题。我还将我的机器连接到我的蜂窝网络，以确保该过程在我自己的网络之外也能正常工作。

不幸的是，我在通过 Chrome 成功登录后无法找出为什么同事（来自远程位置）无法在页面刷新之间保持其登录状态时遇到问题，尽管使用 Firefox 时没有明显的问题。

对于成功方案的示例，首次加载页面时，如果用户已登录，则以值 true 调用分配给authInstance.isSignedIn.listen的回调。

在我的同事机器上，成功登录后刷新页面后不调用authInstance.isSignedIn.listen侦听器，表示没有登录。

我目前没有使用 SSL 证书，如果该信息有帮助的话。

其他信息包括我的同事能够进行身份验证和保留登录状态，而不会在支持 YouTube 身份验证的其他网站上出现任何问题。我一直无法查看这些网站的来源，因为来源被混淆了。

这是我自己的消息来源：

<html lang="en">
<head>
    <script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>
</head>
<body>
    <button id="sign-in">Sign In</button>
    <button id="sign-out">Sign Out</button>
    <script>
        var authInstance;
        var signInBtn = document.getElementById('sign-in');
        var signOutBtn = document.getElementById('sign-out');
        function onLoad() {
            gapi.load('auth2', function() {
                console.log('loadAuth2()');
                auth2 = gapi.auth2.init({
                    client_id: '[CLIENT_ID]',
                });
                authInstance = gapi.auth2.getAuthInstance();
                authInstance.isSignedIn.listen(function () {
                    console.log('authUpdate()');
                    console.log(arguments);
                });
            });
        }
        signInBtn.onclick = function () {
            console.log('signInBtn onclick()');
            /*
            Signing in this way produces the same results.
            auth2.grantOfflineAccess({
              scope: "https://www.googleapis.com/auth/youtube.readonly",
              redirect_uri: "postmessage"
            }).then(function () {
                console.log("accessGranted() (?)");
                console.log(arguments);
            });
            */
            auth2.signIn({
                scope: "https://www.googleapis.com/auth/youtube",
            }).then(function () {
                console.log('signedIn()');
                console.log(arguments);
            });
        };
        signOutBtn.onclick = function () {
            console.log('signOutBtn onclick()');
            authInstance.signOut();
        };
    </script>
</body>
</html>

我不是谷歌登录专家，但是，根据我的经验，以下代码不起作用。

authInstance = gapi.auth2.getAuthInstance();
console.log(authInstance.isSignedIn.get());

相反，您应该这样做：

authInstance = gapi.auth2.getAuthInstance();
authInstance.then(function() {  // onInit
  console.log(authInstance.isSignedIn.get());
}, function() {  // onError
});

应等到GoogleAuth对象完全初始化。

这就是我让它与您将事件附加到的自定义按钮一起工作的方式。是的，等待其他答案提到的其中一些功能非常重要，因为也许并非所有内容都已加载，直到等待它们为止

async function initializeGoogleStuff() {
  window.gapi.load('auth2', async () => {
    window.auth2 = await window.gapi.auth2.init({
      prompt: "select_account",
    })
    var authInstance = await window.gapi.auth2.getAuthInstance();
    var signedIn = authInstance.isSignedIn.get()
    if (signedIn) {
      // handleLogin is my own function for calling our backend server
      //  and doing other login related stuff
      await handleLogin(authInstance.currentUser.get())
    }
    // I am using a custom button with attachClickHandler()
    // https://developers.google.com/identity/sign-in/web/reference#googleauthattachclickhandlercontainer_options_onsuccess_onfailure
    let signInElement = window.document.getElementById("signInButton")
    if (signInElement) {
      attachElementToCallback(signInElement, handleLogin)
    }
 })               
}
相关文章：