页面刷新后,gapi 登录状态未保留在用户浏览器中

Bra*_*lva 5 javascript browser authentication oauth-2.0 google-api-js-client

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

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

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

举一个成功场景的例子,当第一次加载页面时,如果用户已经登录,则调用分配给的回调authInstance.isSignedIn.listen函数true

在我同事的机器上,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>
Run Code Online (Sandbox Code Playgroud)

Gyu*_*hoi 2

我不是 Google Sign-In 方面的专家,但是根据我的经验,以下代码不起作用。

authInstance = gapi.auth2.getAuthInstance();
console.log(authInstance.isSignedIn.get());
Run Code Online (Sandbox Code Playgroud)

相反,你应该这样做:

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

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