2016-06-28 27 views
6

Po raz pierwszy wdrażam logowanie Google zgodnie z opisem here i here.Sposób sprawdzania, czy użytkownik jest zalogowany, czy nie przez "Google Zaloguj się" (OAuth 2.0)

Używam HTML z Javascriptem.

Problem wymagający rozwiązania: Jak mogę, po pierwszym zalogowaniu, na innej stronie (np. Stronie docelowej lub portalu, który widzi użytkownik po zalogowaniu), sprawdź, czy użytkownik jest zalogowany ? Czy istnieje usługa, którą mogę sprawdzić, aby sprawdzić login użytkownika w stanie za pomocą mojego klucza aplikacji lub coś podobnego? Zakładam, że będę musiał dołączyć Google API na każdej stronie.

Logowanie Code Page:

Script W Head (Kod z samouczka Google wymienionych powyżej):

<head> 
.... 
<script src="https://apis.google.com/js/platform.js" async defer></script> 

<script> 
function onSignIn(googleUser) 
{ 
    var profile = googleUser.getBasicProfile(); 
    console.log('ID: ' + profile.getId()); 
    console.log('Name: ' + profile.getName()); 
    console.log('Image URL: ' + profile.getImageUrl()); 
    console.log('Email: ' + profile.getEmail()); 

    alert(profile.getName()); 
} 

function logout() 
{ 
    alert('logging out'); 
    var auth2 = gapi.auth2.getAuthInstance(); 
     auth2.signOut().then(function() { 
     console.log('User signed out.'); 
     }); 
} 
... 
</head> 

kod w korpusie (1 linii od samouczka Google wymienionych powyżej, 2. linia do wyzwalania testu wylogowania)

<body> 
... 
<div class="g-signin2" data-onsuccess="onSignIn"></div> 
<div onmousedown="logout()">Logout</div> 
... 
</body> 

Czy jest jakiś sposób, że mogę dołączyć google API na innej stronie, a następnie wywołać funkcję sprawdzania statusu logowania? Lub inny sposób, aby konkretnie powiedzieć, czy użytkownik jest zalogowany lub wylogowany?

Odpowiedz

3

Można uszeregować niestandardowy obiekt userEntity i zapisać go w sessionStorage, gdzie można go sprawdzić za każdym razem, gdy ładuje się nową stronę. Nie testowałem następujące ale to powinno działać (robi coś podobnego z tokenów WebAPI w taki sam sposób)

function onSignIn(googleUser) 
 
{ 
 
    var profile = googleUser.getBasicProfile(); 
 
    console.log('ID: ' + profile.getId()); 
 
    console.log('Name: ' + profile.getName()); 
 
    console.log('Image URL: ' + profile.getImageUrl()); 
 
    console.log('Email: ' + profile.getEmail()); 
 
    
 
    var myUserEntity = {}; 
 
    myUserEntity.Id = profile.getId(); 
 
    myUserEntity.Name = profile.getName(); 
 
    
 
    //Store the entity object in sessionStorage where it will be accessible from all pages of your site. 
 
    sessionStorage.setItem('myUserEntity',JSON.stringify(myUserEntity)); 
 

 
    alert(profile.getName()); 
 
} 
 

 
function checkIfLoggedIn() 
 
{ 
 
    if(sessionStorage.getItem('myUserEntity') == null){ 
 
    //Redirect to login page, no user entity available in sessionStorage 
 
    window.location.href='Login.html'; 
 
    } else { 
 
    //User already logged in 
 
    var userEntity = {}; 
 
    userEntity = JSON.parse(sessionStorage.getItem('myUserEntity')); 
 
    ... 
 
    DoWhatever(); 
 
    } 
 
} 
 

 
function logout() 
 
{ 
 
    //Don't forget to clear sessionStorage when user logs out 
 
    sessionStorage.clear(); 
 
}

oczywiście, można mieć pewne kontrole wewnętrzne, jeśli obiekt sessionStorage została naruszona z. Takie podejście powinno działać w nowoczesnych przeglądarkach takich jak Chrome i Firefox.

+0

Dzięki za odpowiedź - wypróbuję ją i zaktualizuję, gdy tylko dostanę trochę czasu. Czy możesz mi powiedzieć, że zmienna "sessionStorage" jest jakimś globalnym obiektem w javascript? czy jest to coś, co musiałbyś skonfigurować? czy każda nowa strona musi nadal wywoływać funkcję php sessionstart, aby ta zmienna była dostępna w javascript? –

+0

Oczywiście ... Jest on dostępny w javascript i nie trzeba odwoływać się do bibliotek stron trzecich. Możesz uzyskać więcej informacji z W3Schools od http://www.w3schools.com/html/html5_webstorage.asp –