谷歌登录页面刷新时未登录（聚合物）

问题描述：

我正在实施“Google登录”进入我的网站以处理所有用户身份验证等。我将有一个后端数据库，用于存储信息以防止用户跟踪他们的个人资料和他们的行为等。谷歌登录页面刷新时未登录（聚合物）

我已经关注了Google开发者文档，并且在网页上有一个“Google登录”按钮，当点击此按钮时，我选择我的帐户并且已登录并且id_token已关闭，并且已成功与我的后端服务器进行了身份验证。我现在遇到的唯一问题是，当我刷新页面时，该按钮返回到“登录”而不是保持登录状态，这是正常行为还是有我缺少的东西？我不希望用户每次页面更改时都必须重新登录。

在一个侧面说明我已成功地将id_token成功登录到谷歌在localStorage，然后使用这个id_token与后端服务器自动重新认证（你可以在注释掉的代码中看到的）存储，但这显然不会自动改变“Google登录”按钮的状态，这会让客户端的用户感到困惑。

任何人都可以解释这个问题吗？

没有登录：

在签名（目前不留这样的页面刷新后）后：

login.html：个

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Login</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="./css/base.css"/> <!-- Base CSS --> 
     <script src="./js/all.js"></script> <!-- All JavaScript file --> 
     <script src="./js/Logger.class.js"></script> <!-- Logger class --> 
     <script src="./bower_components/jquery/dist/jquery.min.js"></script> <!-- jQuery --> 
     <script src="./js/gSignIn.js"></script> 
     <!-- Polymer --> 
     <script src="./bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <!-- Web Components Import --> 
     <!-- Element Imports --> 
     <link rel="import" href="./bower_components/paper-button/paper-button.html"/> 
     <link rel="import" href="./bower_components/google-signin/google-signin.html"/> 
    </head> 
    <body> 
     <google-signin id="gSignIn" client-id="--- REMOVED FOR PRIVACY ---" scopes="profile email openid"></google-signin> 
     <a href="#" id="signOut">Sign Out</a> 
    </body> 
</html>

gSignIn.js：

/** 
* Google Sign In JavaScript 
*/ 

$(document).ready(function() { 
    var logger = new Logger("gSignIn.js", false); // logger object 
    var id_token = null; 
    logger.log("Load", "Successful"); 

    // Try to automatically login 
// if (localStorage !== null) { // If local storage is available 
//  if (localStorage.getItem("gIDToken") !== null) { // If the Google ID token is available 
//   id_token = localStorage.getItem("gIDToken"); 
//   // Send off AJAX request to verify on the server 
//   $.ajax({ 
//    type: "POST", 
//    url: window.api.url + "googleauth/verify/", 
//    data: { "id_token": id_token }, 
//    success: function (data) { 
//     if (!data.error) { // If there was no error 
//      logger.log("Google SignIn", "Successfully signed in!"); 
//     } 
//    } 
//   }); 
//  } 
// } 

    /** 
    * EVENT: Google SignIn success 
    */ 
    $("#gSignIn").on("google-signin-success", function() { 
     id_token = getGoogleAuthResponse().id_token; 
     var profile = getGoogleProfile(); 

     console.log("ID: " + profile.getId()); // Don't send this directly to your server! 
     console.log("Name: " + profile.getName()); 
     console.log("Image URL: " + profile.getImageUrl()); 
     console.log("Email: " + profile.getEmail()); 

     // Send off AJAX request to verify on the server 
     $.ajax({ 
      type: "POST", 
      url: window.api.url + "googleauth/verify/", 
      data: { "id_token": id_token }, 
      success: function (data) { 
       if (!data.error) { // If there was no error 
        logger.log("Google SignIn", "Successfully signed in!"); 

        // Store the id_token 
        if (localStorage !== null) { // If localStorage is available 
         localStorage.setItem("gIDToken", id_token); // Store the id_token 
        } 
       } 
      } 
     }); 
    }); 

    $("#signOut").click(function() { 
     var auth2 = gapi.auth2.getAuthInstance(); 
     auth2.signOut().then(function() { 
      console.log("User signed out."); 
     }); 
    }); 

    /** 
    * Get Google Profile 
    * 
    * @returns object 
    */ 
    var getGoogleProfile = function() { 
     var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile(); 
     return profile; 
    }; 

    /** 
    * Get Google Auth Response 
    * 
    * @returns object 
    */ 
    var getGoogleAuthResponse = function() { 
     var response = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse(); 
     return response; 
    }; 
});

谢谢！

答

我遇到了同样的问题，在确保启用了第三方cookie之后，在这种情况下，它返回到主机名localhost。

最后，我不得不伪造使用/etc/hosts的域，确保Google开发人员仪表板将该域列入白名单，并开始使用该域而不是本地主机。

我只能假设gapis不喜欢localhost，即使它在我的Google开发人员仪表板中列入了我所使用帐户的白名单。如果你确实设法让localhost工作，请给我一个呼喊！

谢谢！我会现在尝试:) –

它的工作感谢：D –

非常感谢。没有，真的，谢谢！我疯了试图找出这一个！如果可以的话，我会投十倍！ –

答

另一种方法是从非标准端口（不是80）访问本地主机。我设法通过使用从端口80到81的nginx代理来解决这个头痛问题：

server { 
    listen 81; 

    location/{ 
    proxy_pass http://localhost:80; 
    } 
}

谷歌登录页面刷新时未登录（聚合物）

相关推荐