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

时间:2016-07-06 18:59:43

标签: javascript authentication browser 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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

根据我的经验,我不是Google登录专家,但是以下代码无效。

    dim i as Integer
    for i = 1 to 20 'adjust as you need it
        Range("D" & i & ":F" & i).FormulaArray = "=TRANSPOSE(R[" & ?? & "]C[5]:R[" & ?? & "]C[5])"
    next i

相反,您应该这样做:

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

您应该等待authInstance = gapi.auth2.getAuthInstance(); authInstance.then(function() { // onInit console.log(authInstance.isSignedIn.get()); }, function() { // onError }); 对象完全初始化。

答案 1 :(得分:0)

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

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

 })               
}