Google 页面刷新时登录未登录（Polymer）

Question

我正在我的网站中实施 "Google Sign In" 以处理所有用户身份验证等。我将拥有一个后端数据库，用于存储针对用户的信息以跟踪他们的个人资料和他们的行为等..

我已按照 Google 开发人员文档进行操作，并在网页上获得了一个 "Google Sign In" 按钮，单击此按钮后，我选择了我的帐户并已登录，然后 id_token 关闭并成功通过我的后端服务器进行身份验证。我现在遇到的唯一问题是，当我刷新页面时，按钮返回 "Sign In" 而不是保持登录状态，这是正常行为还是我遗漏了什么？我不希望用户在页面更改时必须重新登录。

附带说明一下，我已经成功地在 localStorage 中存储了 id_token 从成功登录到 Google 然后使用这个 id_token 重新验证后端服务器自动（正如您在注释掉的代码中看到的那样）但这显然不会自动更改 "Google Sign In" 按钮的状态，这会使客户端的用户感到困惑。

任何人都可以阐明这个问题吗？

未登录：

登录后（刷新页面后目前不会保持这个状态）:

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

谢谢！

Answer 1

我遇到了同样的问题，在确保第三方 cookie 已启用后，问题归结为主机名，在本例中为 localhost。

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

我只能假设 gapis 不喜欢本地主机，即使它在我的 google 开发人员仪表板中针对我正在使用的帐户列入了白名单。如果你确实设法让 localhost 工作，请给我留言！

Answer 2

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

server {
  listen 81;

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

Google 页面刷新时登录未登录（Polymer）

Google Sign In not being signed in when page refreshes (Polymer)

javascript

jquery

html

polymer

google-signin