2015-08-15 2 views
3

Я внедряю «Вход в Google» на свой веб-сайт, чтобы обрабатывать всю аутентификацию пользователя и т. Д. У меня будет база данных, которую я использую для хранения информации против пользователей, чтобы отслеживать их профиль и их действия и т. д.Google Sign In не подписывается при обновлении страницы (Polymer)

Я следил за документацией разработчика Google и получил кнопку «Вход в Google» на веб-странице, и когда эта кнопка нажата, я выбираю свою учетную запись и я вошел в систему, и id_token отключился и успешно завершен с моим внутренним сервером. Единственная проблема, с которой я сталкиваюсь сейчас, заключается в том, что когда я обновляю страницу, кнопка возвращается к «Вход», а не к тому, чтобы войти в нее, это нормальное поведение или что-то мне не хватает? Я не хочу, чтобы пользователям приходилось регистрироваться снова, когда страница меняется.

На стороне записку мне удалось сохранить id_token от успешного входа в Google в localStorage, а затем с помощью этого id_token для повторной аутентификации с фоновым сервером автоматически (как вы можете видеть в закомментированной коде), но это, очевидно, автоматически не изменяет статус кнопки «Вход в Google», которая путала бы пользователей на стороне клиента.

Может ли кто-нибудь пролить свет на эту проблему, пожалуйста?

Не подписан в:

enter image description here

После подписания в (в настоящее время не остаться, как это после обновления страницы):

enter image description here

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

Спасибо!

ответ

5

У меня была такая же проблема, и после того, как были разрешены сторонние куки-файлы, в этом случае это произошло до имени хоста localhost.

В конце концов, я должен был подделать домен, используя /etc/hosts, чтобы обеспечить, чтобы панель управления разработчиками Google обладала этим доменом в белом списке и начала использовать этот домен вместо localhost.

Я могу только предположить, что gapis не нравится localhost, хотя он включен в мою панель управления Google для учетной записи, которую я использую. Если вам удастся получить localhost на работу, дай мне крик!

+0

Спасибо! Я попробую это сейчас :) –

+1

Это сработало спасибо: D –

+1

Большое вам спасибо. Нет, спасибо, спасибо! Я сошел с ума, пытаясь понять это! Я бы проголосовал +1 десять раз, если бы мог! –

0

Другой способ сделать это - открыть локальный хост из нестандартного порта (не 80). Мне удалось обойти эту головную боль, используя прокси-сервер nginx с порта 80 до 81:

server { 
    listen 81; 

    location/{ 
    proxy_pass http://localhost:80; 
    } 
} 
Смежные вопросы