Na tej stronie opisaliśmy, jak wdrażać funkcje związane z logowaniem się i wylogowywanie się za pomocą Google One Tap.
Logowanie użytkowników automatycznie
Google One Tap obsługuje logowanie automatyczne, które zapewnia płynne wrażenia użytkownika, ponieważ eliminuje czynności wykonywane ręcznie przez użytkowników po powrocie do Twojej witryny. Użytkownicy nie muszą pamiętać, które konto Google zostało wybrane podczas ostatniej wizyty, dzięki czemu zmniejsza się ryzyko tworzenia na Twojej platformie niepotrzebnych duplikatów kont.
Logowanie automatyczne ma uzupełniać przycisk Zaloguj się przez Google i okno dialogowe „Jedno dotknięcie”. Jest on przeznaczony do stosowania w całej witrynie, a rejestracja ręczna lub przełączanie kont odbywają się dopiero po wylogowaniu użytkownika z witryny.
Aby automatyczne logowanie było możliwe, muszą być spełnione te warunki:
- użytkownicy muszą najpierw zalogować się na swoje konto Google,
- wcześniej wyraził(a) zgodę na udostępnienie profilu konta Twojej aplikacji;
- gdy korzystasz z FedCM, spróbuj zalogować się tylko raz w ciągu ostatnich 10 minut. Pojedyncze kliknięcie jest wyświetlane, gdy w tym czasie nastąpią powtarzane próby logowania.
- Gdy korzystasz z FedCM, Chrome wymaga od użytkowników ponownego potwierdzenia, że chcą zalogować się w witrynie za pomocą konta Google w każdym wystąpieniu Chrome, nawet jeśli użytkownik zatwierdził witrynę przed wdrożeniem FedCM. Ta zmiana może mieć wpływ na współczynnik konwersji w Twojej dotychczasowej witrynie, która korzysta z usługi One Tap. W aktualizacji Chrome M121 ulepszono automatyczne logowanie, aby rozwiązać problem spadku współczynnika konwersji.
Na stronach, na których włączone jest logowanie automatyczne, i jeśli spełnione są te warunki, dane uwierzytelniające użytkownika w postaci tokena tożsamości są zwracane automatycznie bez interakcji z użytkownikiem. Jeśli te warunki nie są spełnione, nawet jeśli na stronie jest włączone automatyczne logowanie, użytkownik będzie logować się lub wyrażać zgodę za pomocą procesu jednokrotnego kliknięcia. Jeśli użytkownik ma kilka kont Google i odwiedzi Twoją witrynę, musi najpierw zalogować się na jedno konto Google i wyrazić zgodę na jego wykorzystanie.
Skuteczność automatycznego logowania możesz mierzyć za pomocą wartości auto w polu select_by zwracanego obiektu danych logowania.
Aby włączyć automatyczne logowanie, dodaj do kodu element data-auto_select="true", jak pokazano w tym fragmencie kodu:
<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 użycie Google One Tap. W przypadku tej konfiguracji automatyczny wybór musi być zabroniony. W przeciwnym razie użytkownik zostanie automatycznie zalogowany ponownie, co spowoduje pętlę w interfejsie użytkownika.
Korzystanie z FedCM
Ze względu na wygodę użytkowników między każdą próbą automatycznego logowania jest 10-minutowa przerwa. W tym czasie wyświetla się prompt One Tap. Aby się zalogować, użytkownicy muszą wyraźnie kliknąć opcję One Tap.
Bez FedCM
Aby zablokować automatyczny wybór po wylogowaniu 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();
}
Aby zapobiec nieskończonemu pętli, stan zalogowania użytkownika jest przechowywany w pliku cookie o nazwie g_state, który jest ustawiany przez bibliotekę Google Identity Services. Domyślnie domena pliku cookie jest ustawiona na domenę bieżącej strony. Jeśli funkcja One Tap jest wyświetlana 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 element 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, skorzystaj z tych rozwiązań, aby zapobiec błędowi w interfejsie po wylogowaniu:
- Po wylogowaniu przekierowuj użytkowników na stronę (np.
https://example.com/logged_out), na której nie wyświetla się funkcja One Tap, lub na stronę, na której automatyczne logowanie jest zawsze wyłączone. - Podczas wylogowywania się dodaj parametr do adresu URL. Na przykład:
logged_out=1. Podczas renderowania interfejsu API JavaScript One Tap sprawdź parametr adresu URL i wyłącz automatyczne logowanie, jeśli jest obecne.
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 potrzeby związane z dostępnością token identyfikacyjny jest udostępniany Twojej witrynie, nawet jeśli użytkownicy klikną przycisk X.
Ze względu na wygodę użytkowników między każdą próbą automatycznego logowania jest 10-minutowa przerwa. W tym czasie wyświetla się prompt One Tap. Aby się zalogować, użytkownicy muszą wyraźnie kliknąć opcję One Tap.
Bez FedCM
Jeśli użytkownicy nie klikną przycisku Anuluj w ciągu 5 sekund, token identyfikatora zostanie udostępniony Twojej witrynie.
Gdy logowanie zostanie anulowane, na podstawie liczby aktywnych sesji Google wyświetli się strona wyboru konta lub strona powracającego użytkownika.
- Wiele sesji Google
- Pojedyncze sesje Google
