Z tego artykułu dowiesz się, jak wdrożyć funkcje związane z logowaniem i wylogowywaniem się użytkowników za pomocą Google One.
Automatyczne logowanie użytkowników
Google One Tap obsługuje automatyczne logowanie, co zapewnia użytkownikom bezproblemowe działanie, ponieważ umożliwia im samodzielne wykonywanie kroków, które muszą wykonać, gdy wracają do Twojej witryny. Użytkownicy nie muszą pamiętać, które konto Google wybierali podczas ostatniej wizyty, co zmniejsza ryzyko utworzenia niepotrzebnych zduplikowanych kont na Twojej platformie.
Automatyczne logowanie ma uzupełniać przycisk Logowanie przez Google i okna One Tap. Mają one zastosowanie w całej witrynie, a rejestracja ręczna i przełączanie kont mają miejsce dopiero po wylogowaniu się użytkownika.
Automatyczne logowanie ma miejsce wtedy, gdy spełnione są te warunki:
- użytkownik musi najpierw zalogować się na swoje konto Google, a
- wyrazili wcześniej zgodę na udostępnianie profilu jego aplikacji.
W przypadku stron, na których włączone jest automatyczne logowanie, a te warunki są spełnione, dane logowania tokena tożsamości użytkownika są automatycznie zwracane bez interakcji użytkownika. Jeśli te warunki nie zostaną spełnione, a nawet jeśli na stronie jest włączone automatyczne logowanie, użytkownik domyślnie użyje opcji One Tap do zalogowania się lub uzyskania zgody. Jeśli użytkownik korzysta z wielu kont Google i odwiedza Twoją witrynę, musi najpierw zalogować się na jedno konto Google i wyrazić zgodę na to konto.
Możesz zmierzyć wskaźnik sukcesu automatycznego logowania za pomocą wartości auto w polu select_by zwróconego obiektu danych logowania.
Aby włączyć automatyczne logowanie, dodaj do kodu kod data-auto_select="true", tak jak w tym fragmencie kodu:
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-auto_select="true"
data-login_uri="https://your.domain/your_login_endpoint">
</div>
Wyloguj się
Gdy użytkownik wyloguje się z Twojej witryny, może trafić na stronę, na której automatycznie wyświetla się potwierdzenie Google One. W tej konfiguracji wybór automatyczny musi być zabroniony. W przeciwnym razie użytkownik zostanie automatycznie zalogowany ponownie, co doprowadzi do UX niereprezentowanej pętli.
Aby uniemożliwić automatyczny wybór po wylogowaniu się użytkownika, dodaj nazwę klasy g_id_signout do wszystkich linków i przycisków wylogowania. Zobacz ten fragment kodu:
<div class="g_id_signout">Sign Out</div>
Do wylogowania możesz też użyć tego fragmentu kodu JavaScript:
const button = document.getElementById(‘signout_button’);
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
W związku z tym stan wylogowania jest rejestrowany przez plik cookie w Twojej domenie, co pozwala uniknąć uniknięcia niepotrzebnych wrażeń.
Stan wylogowania jest zapisywany w pliku cookie g_state w Twojej domenie. Jeśli masz usługę, która monitoruje wszystkie pliki cookie używane w Twojej domenie, musisz powiadomić ich o tym pliku.
Jeśli nie chcesz wczytywać biblioteki klienta na stronach logowania, możesz użyć prostych rozwiązań opisanych poniżej, aby zapobiec momentowi UX w czasie martwego procesu po wylogowaniu.
- Po wylogowaniu się przekieruj użytkowników na stronę (np.
https://example.com/logged_out), na której nie wyświetla się One Tap, lub automatyczne logowanie jest zawsze wyłączone. - Podczas wylogowania dodaj parametr do adresu URL. Na przykład:
logged_out=1. Podczas renderowania interfejsu API One Tap by JavaScript API sprawdź jego parametr i wyłącz automatyczne logowanie, jeśli jest dostępne.
Najważniejsze ścieżki użytkownika
Strona logowania automatycznego.
Jeśli użytkownik nie kliknie przycisku Anuluj w ciągu 5 sekund, zostanie udostępniony token tożsamości Twojej witrynie.
Gdy Logowanie zostanie anulowane na podstawie liczby aktywnych sesji Google, wyświetli się strona wyboru konta lub powracający użytkownik.
Wiele sesji Google
Pojedyncze sesje Google
