Z tego artykułu dowiesz się, jak wdrożyć funkcje związane z logowaniem się i wylogowywaniem użytkowników za pomocą Google One Tap.
Automatyczne logowanie użytkowników
Google One Tap obsługuje logowanie automatyczne, dzięki czemu użytkownicy mogą wygodniej korzystać z tej aplikacji, eliminując konieczność wykonywania ręcznych działań, które muszą wykonać po powrocie do Twojej witryny. Użytkownicy nie muszą pamiętać, które konto Google wybrano podczas ostatniej wizyty, co zmniejsza ryzyko utworzenia na Twojej platformie niepotrzebnych zduplikowanych kont.
Logowanie automatyczne ma stanowić uzupełnienie przycisku Zaloguj się przez Google i okna jednym dotknięciem. Jest przeznaczona do użytku w całej witrynie, a rejestracja ręczna lub zmiana konta następuje dopiero po wylogowaniu się użytkownika z witryny.
Aby logowanie automatyczne było możliwe, wymagane są te warunki:
- użytkownicy muszą najpierw zalogować się na swoje konta Google.
- użytkowników, którzy wyrazili zgodę na udostępnienie profilu konta Twojej aplikacji;
- jeśli użytkownik korzysta z FedCM, w ciągu ostatnich 10 minut próbował zalogować się tylko raz. Jeśli w tym oknie wystąpią powtórzone próby logowania, na ekranie pojawia się jedno dotknięcie.
- gdy użytkownik korzysta 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 wpłynąć na współczynnik konwersji w obecnej witrynie z wykorzystaniem jednego kliknięcia. W aktualizacji Chrome M121 ulepszenie automatycznego logowania łagodzi problem ze spadkiem współczynnika konwersji.
W przypadku stron, na których jest włączone logowanie automatyczne i spełnione są te warunki, dane uwierzytelniające tokena identyfikatora użytkownika są automatycznie zwracane bez żadnej interakcji z użytkownikiem. Jeśli te warunki nie zostaną spełnione, a na stronie jest włączone logowanie automatyczne, użytkownik domyślnie użyje na stronie procesu logowania jednym dotknięciem lub wyrażenia zgody. Jeśli użytkownik ma kilka 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 udanych logowania automatycznego, korzystając z wartości auto w polu select_by zwróconego obiektu danych logowania.
Aby włączyć logowanie automatyczne, dodaj do kodu data-auto_select="true", tak jak 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
Gdy użytkownik wyloguje się z Twojej witryny, może zostać przekierowany na stronę, na której automatycznie wyświetla się potwierdzenie od Google One Tap. W przypadku tej konfiguracji wybór automatyczny musi być zabroniony. Jeśli tego nie zrobisz, użytkownik zostanie automatycznie zalogowany ponownie, co prowadzi do UX.
Korzystanie z FedCM
Aby zwiększyć wygodę użytkowników, między każdą próbą automatycznego logowania następuje 10-minutowy okres bez powiadomień. W tym czasie wyświetla się komunikat jednym dotknięciem. Użytkownicy muszą kliknąć jedno dotknięcie, aby się zalogować.
Bez FedCM
Aby uniemożliwić wybieranie automatyczne 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>
Aby się wylogować, możesz też użyć tego fragmentu kodu JavaScript:
const button = document.getElementById('signout_button');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
Oznacza to, że stan wylogowania jest rejestrowany w pliku cookie w Twojej domenie, co pozwala uniknąć UX.
Informacje o stanie wylogowania są przechowywane 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 cookie.
Jeśli nie chcesz wczytywać biblioteki klienta na stronach używanych po zalogowaniu się, skorzystaj z tych rozwiązań, aby zapobiec zapętleniu UX po wylogowaniu:
- Przy 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 której automatyczne logowanie jest zawsze wyłączone. - Przy wylogowaniu dodaj parametr do adresu URL. Na przykład:
logged_out=1. Jeśli renderujesz interfejs One Tap by JavaScript API, sprawdź ten parametr adresu URL i wyłącz automatyczne logowanie, jeśli jest dostępne.
Kluczowe ścieżki użytkowników
Strona automatycznego logowania.
Korzystanie z FedCM
Użytkownik może zamknąć prośbę jednym dotknięciem, klikając przycisk X. Aby zwiększyć dostępność, token identyfikatora jest udostępniany witrynie nawet wtedy, gdy użytkownicy klikną przycisk X.
Aby zwiększyć wygodę użytkowników, między każdą próbą automatycznego logowania następuje 10-minutowy okres bez powiadomień. W tym czasie wyświetla się komunikat jednym dotknięciem. Użytkownicy muszą kliknąć jedno dotknięcie, aby się zalogować.
Bez FedCM
Jeśli użytkownik nie kliknie 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
