Na tej stronie opisujemy, jak wdrożyć funkcje związane z logowaniem i wylogowywaniem użytkowników za pomocą funkcji logowania jednym kliknięciem od Google.
Automatyczne logowanie użytkowników
Google One Tap obsługuje logowanie automatyczne, które zapewnia płynne działanie (UX), eliminując czynności wykonywane ręcznie przez użytkowników, gdy wracają do Twojej witryny. Użytkownicy nie muszą pamiętać, które konto Google wybrali podczas ostatniej wizyty, co zmniejsza prawdopodobieństwo utworzenia na Twojej platformie niepotrzebnych duplikatów kont.
Logowanie automatyczne ma uzupełniać przycisk Zaloguj się przez Google i okna logowania jednym dotknięciem. Został on zaprojektowany do używania w całej witrynie. Ręczna rejestracja lub przełączanie kont następuje dopiero po wylogowaniu się użytkownika z witryny.
Aby logowanie automatyczne było możliwe, muszą być spełnione te warunki:
- użytkownicy muszą najpierw zalogować się na swoje konto Google,
- wcześniej wyrazili zgodę na udostępnianie profilu konta Twojej aplikacji,
- w ciągu ostatnich 10 minut podjęto tylko 1 próbę logowania przy użyciu FedCM; One Tap wyświetla się, gdy w tym czasie nastąpią powtarzające się próby logowania.
- Gdy użytkownik korzysta z FedCM, Chrome wymaga od niego ponownego potwierdzenia, że chce zalogować się w witrynie za pomocą konta Google w każdej instancji Chrome, nawet jeśli wcześniej zatwierdził witrynę przed wdrożeniem FedCM. Ta zmiana może wpłynąć na współczynnik konwersji w Twojej obecnej witrynie korzystającej z One Tap. W aktualizacji Chrome M121 ulepszenie automatycznego logowania rozwiązuje problem ze spadkiem współczynnika konwersji.
W przypadku stron, na których włączone jest automatyczne logowanie, i jeśli te warunki są spełnione, token identyfikatora użytkownika jest automatycznie zwracany bez interakcji użytkownika. Jeśli te warunki nie są spełnione, a na stronie jest włączone automatyczne logowanie, użytkownik domyślnie korzysta z procesu logowania lub uzyskiwania zgody za pomocą 1 kliknięcia. Jeśli użytkownik ma kilka kont Google i odwiedza Twoją witrynę, musi najpierw zalogować się na jedno z nich i wyrazić zgodę na jego używanie.
Skuteczność automatycznego logowania możesz mierzyć za pomocą wartości auto w polu select_by zwróconego obiektu danych logowania.
Aby włączyć automatyczne logowanie, dodaj do kodu znak data-auto_select="true", jak pokazano w tym fragmencie:
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_select="true">
</div>
Wyloguj się
Gdy użytkownik wyloguje się z Twojej witryny, może zostać przekierowany na stronę, na której automatycznie wyświetli się prośba o logowanie jednym kliknięciem w Google. W przypadku tej konfiguracji automatyczny wybór musi być zabroniony. W przeciwnym razie użytkownik zostanie automatycznie zalogowany ponownie, co spowoduje zapętlenie interfejsu.
Korzystanie z FedCM
Aby zwiększyć wygodę użytkowników, między każdą automatyczną próbą logowania jest 10-minutowy okres ciszy. W tym czasie wyświetla się prośba o logowanie jednym kliknięciem. Aby się zalogować, użytkownicy muszą wyraźnie kliknąć opcję Logowanie jednym kliknięciem.
Bez FedCM
Aby uniemożliwić automatyczne wybieranie po wylogowaniu się użytkownika, dodaj nazwę klasy g_id_signout do wszystkich linków i przycisków wylogowania. Obejrzyj poniższy fragment kodu:
<div class="g_id_signout">Sign Out</div>
Do wylogowania się możesz też użyć tego fragmentu kodu JavaScript:
const button = document.getElementById('signout_button');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
Aby zapobiec pętli nieskończonej, stan wylogowania użytkownika jest przechowywany w pliku cookie o nazwie g_state, który jest ustawiany przez bibliotekę usług tożsamości Google. Domyślnie domena pliku cookie jest ustawiona na domenę bieżącej strony. Jeśli One Tap jest wyświetlany w domenie nadrzędnej i subdomenach, plik cookie stanu musi być widoczny we wszystkich Twoich domenach. Użyj atrybutu data-state_cookie_domain, aby ustawić domenę pliku cookie g_state na domenę nadrzędną. Na przykład dodaj
data-state_cookie_domain="example.com" do elementu g_id_onload w przypadku domeny nadrzędnej example.com i subdomeny o nazwie webapp.example.com.
Jeśli masz usługę, która monitoruje wszystkie pliki cookie używane w Twojej domenie, musisz powiadomić ją o pliku cookie g_state.
Jeśli nie chcesz wczytywać biblioteki klienta na stronach po zalogowaniu, użyj tych rozwiązań, aby zapobiec pętli nieskończonej po wylogowaniu:
- Po wylogowaniu przekierowuj użytkowników na stronę (np.
https://example.com/logged_out), na której nie wyświetla się logowanie jednym kliknięciem lub na której automatyczne logowanie jest zawsze wyłączone. - Po wylogowaniu dodaj parametr do adresu URL. Na przykład:
logged_out=1. Podczas renderowania funkcji Logowanie jednym dotknięciem za pomocą interfejsu JavaScript API sprawdź parametr adresu URL i w razie potrzeby wyłącz automatyczne logowanie.
Najważniejsze ścieżki użytkownika
strona logowania automatycznego.
Korzystanie z FedCM
Użytkownicy mogą zamknąć prompt One Tap, klikając przycisk X. Ze względu na ułatwienia dostępu token identyfikatora jest udostępniany Twojej witrynie nawet wtedy, gdy użytkownicy klikną przycisk X.
Aby zwiększyć wygodę użytkowników, między każdą automatyczną próbą logowania jest 10-minutowy okres ciszy. W tym czasie wyświetla się prośba o logowanie jednym kliknięciem. Aby się zalogować, użytkownicy muszą wyraźnie kliknąć opcję Logowanie jednym kliknięciem.
Bez FedCM
Jeśli użytkownicy nie klikną przycisku Anuluj w ciągu 5 sekund, do Twojej witryny zostanie udostępniony token identyfikatora.
Gdy logowanie zostanie anulowane, w zależności od liczby aktywnych sesji Google wyświetli się strona wyboru konta lub strona powracającego użytkownika.
- Wiele sesji Google
- Pojedyncze sesje Google
