Google页面刷新时没有登录(聚合物)

Question

Google页面刷新时没有登录(聚合物)

EM-*_*ons 3 html javascript jquery polymer google-signin

我正在我的网站上实施"Google登录"来处理所有用户身份验证等.我将有一个后端数据库,用于存储针对用户的信息,以跟踪他们的个人资料及其行为等.

我已经关注了Google开发人员文档并在网页上有一个"Google登录"按钮,当点击此按钮时,我选择了我的帐户并登录并id_token关闭并通过我的后端服务器成功进行身份验证.我现在唯一的问题是,当我刷新页面按钮返回"登录"而不是保持登录时,这是正常的行为还是我缺少的东西？我不希望用户必须在页面更改时再次登录.

从侧面说明我已成功存储id_token成功登录Google 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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

谢谢!

Answer 1

new*_*our 6

我遇到了同样的问题,在确保第三方cookie启用后,它归结为主机名,localhost在这种情况下.

最后,我不得不伪造一个域名/etc/hosts,确保谷歌开发者仪表板已将该域列入白名单,并开始使用该域而不是localhost.

我只能假设gapis不喜欢localhost,即使它在我正在使用的帐户的谷歌开发者仪表板中列入白名单.如果你确实设法localhost上班,请给我一个大喊!

归档时间：	10 年，4 月前
查看次数：	1175 次
最近记录：	8 年，6 月前