Na tej stronie opisujemy interfejs użytkownika (UX) przycisku Zaloguj się przez Google.
Renderowanie przycisku
Spersonalizowany przycisk wyświetla informacje o profilu pierwszej sesji Google, która zatwierdzi Twoją witrynę. Zatwierdzona sesja Google ma powiązane konto w Twojej witrynie, na które użytkownik zalogował się wcześniej za pomocą funkcji Zaloguj się przez Google.
Jeśli wyświetla się spersonalizowany przycisk, użytkownik wie, że:
- jest co najmniej 1 aktywna sesja Google;
- w Twojej witrynie jest powiązane konto.
Spersonalizowany przycisk umożliwia użytkownikom szybkie sprawdzenie stanu sesji zarówno po stronie Google, jak i w Twojej witrynie, zanim klikną przycisk. Jest to szczególnie przydatne dla użytkowników, którzy odwiedzają Twoją witrynę tylko sporadycznie. Mogą oni zapomnieć, czy konto zostało utworzone i w jaki sposób. Spersonalizowany przycisk przypomina im, że wcześniej używali funkcji Zaloguj się przez Google. Pomaga to zapobiegać niepotrzebnemu tworzeniu duplikatów kont w Twojej witrynie.
Aby wskazać stan sesji, spersonalizowany przycisk jest wyświetlany w następujący sposób:
Jedna sesja: po stronie Google jest tylko jedna sesja. Ta sesja zatwierdza klienta i w Twojej witrynie jest powiązane konto.
Wiele sesji: po stronie Google jest wiele sesji. Te sesje zatwierdzają klienta. Zatwierdzenie jest oznaczone strzałką listy obok wyświetlanego konta. Co najmniej 1 sesja ma powiązane konto w Twojej witrynie.
Brak sesji: po stronie Google nie ma sesji lub żadna z sesji nie zatwierdziła jeszcze klienta.
Spersonalizowany przycisk jest wyświetlany automatycznie, gdy stan sesji jest odpowiedni, chyba że ustawienia przycisku nie pozwalają na jego wyświetlenie. Spersonalizowany przycisk nie jest wyświetlany, jeśli:
- atrybut
data-typema wartośćicon; - atrybut
data-sizema wartośćmediumlubsmall; - atrybut
data-widthma wartość mniejszą niż 200 pikseli; - pliki cookie innych firm są zablokowane, a wersja FedCM przycisku nie jest włączona.
Jeśli imię i nazwisko lub adres e-mail są zbyt długie, aby wyświetlić je w przycisku, zostaną skrócone.
Federated Credential Manager (FedCM)
Piaskownica prywatności dla sieci wprowadza istotne zmiany w usługach tożsamości Google i logowaniu użytkowników. Ma to wpływ na spersonalizowany przycisk Zaloguj się przez Google. Chociaż przepływ logowania nie jest zmieniany przez przycisk, gdy pliki cookie innych firm są zablokowane, powracający użytkownicy nie widzą spersonalizowanego przycisku.
Dzięki przepływowi przycisku Federated Credentials Management API (FedCM) użytkownicy będą mogli zobaczyć spersonalizowany przycisk Zaloguj się przez Google w Twojej witrynie. Domyślnie FedCM jest wyłączony, ale możesz go włączyć, zmieniając 1 atrybut (HTML/JavaScript). Zalety przycisku FedCM:
Lepsze wrażenia powracających użytkowników: proces logowania powracających użytkowników jest uproszczony, ponieważ mogą oni rozpoznać swoje dotychczasowe konta. Wykazano, że lepsze rozpoznawanie prowadzi do wyższego współczynnika klikalności (CTR). Ponadto w przeciwieństwie do przepływu przycisku bez włączonego FedCM przepływ przycisku FedCM obsługuje funkcję automatycznego wyboru – powracający użytkownicy z aktywną sesją Google zostaną automatycznie zalogowani po kliknięciu przycisku, bez konieczności wyświetlania prośby o wybranie konta.
Lepsza integracja funkcji: zintegrowaliśmy funkcje jednego dotknięcia i automatycznego logowania, dzięki czemu wszystkie funkcje Zaloguj się przez Google Federated Credential Management (FedCM) z jednej strony ufającej (RP) mogą działać razem. Gesty użytkownika w przepływie przycisku FedCM będą rejestrowane i honorowane przez Chrome, aby umożliwić jednorazowe ponowne potwierdzenie w przepływie automatycznego logowania za pomocą jednego dotknięcia. Zapewnia to spójne działanie wszystkich funkcji.
Najważniejsze ścieżki użytkownika
Ścieżki użytkownika różnią się w zależności od tych stanów.
Stan sesji w witrynach Google. Na początku ścieżki użytkownika używane są te terminy, aby wskazać różne stany sesji Google.
- Has-Google-session: w witrynach Google jest co najmniej 1 aktywna sesja.
- No-Google-session: w witrynach Google nie ma aktywnej sesji.
Czy wybrane konto Google zatwierdziło Twoją witrynę na początku ścieżki użytkownika. Aby wskazać różne stany zatwierdzenia, używane są te terminy.
- Nowy użytkownik: wybrane konto nie zatwierdziło Twojej witryny.
- Powracający użytkownik: wybrane konto zatwierdziło już Twoją witrynę.
Ścieżka nowego użytkownika z sesją Google
Przycisk bez FedCM
Przycisk Zaloguj się przez Google.
Strona wyboru konta.
Strona zgody nowego użytkownika.
Gdy użytkownik potwierdzi, token identyfikatora zostanie udostępniony Twojej witrynie.
Użytkownicy mogą dodać nową sesję Google, klikając przycisk Użyj innego konta . Więcej informacji znajdziesz w sekcji Ścieżki użytkownika bez sesji Google.
Przycisk korzystający z FedCM
Przedostatni ekran w przepływie to ekran wczytywania, który automatycznie przekierowuje użytkowników do Twojego punktu końcowego logowania bez konieczności podejmowania przez nich żadnych działań.
Ścieżka powracającego użytkownika z sesją Google
Przycisk bez FedCM
Przycisk Zaloguj się przez Google.
Strona wyboru konta.
Gdy użytkownik wybierze konto powracającego użytkownika, token identyfikatora zostanie udostępniony Twojej witrynie.
Użytkownicy mogą dodać nową sesję Google, klikając przycisk Użyj innego konta. Więcej informacji znajdziesz w sekcji Ścieżki użytkownika bez sesji Google.
Przycisk korzystający z FedCM
Przedostatni ekran w przepływie to ekran wczytywania, który automatycznie przekierowuje użytkowników do Twojego punktu końcowego logowania bez konieczności podejmowania przez nich żadnych działań.
Ścieżka powracającego użytkownika z sesją Google i automatycznym wyborem
Przycisk bez FedCM
Przycisk Zaloguj się przez Google bez FedCM nie ma funkcji automatycznego wyboru.
Przycisk korzystający z FedCM
Powracający użytkownicy z aktywną sesją Google zostaną automatycznie wybrani po kliknięciu przycisku, bez konieczności wyświetlania prośby o wybranie konta. Ustaw
atrybut auto select na true (HTML/JavaScript).
Ścieżka nowego użytkownika bez sesji Google
Przycisk bez FedCM
Przycisk Zaloguj się przez Google.
Pierwsza strona, na której można dodać nową sesję Google.
Druga strona, na której można dodać nową sesję Google.
Strona zgody nowego użytkownika.
Gdy użytkownik potwierdzi, token identyfikatora zostanie udostępniony Twojej witrynie.
Przycisk korzystający z FedCM
Przedostatni ekran w przepływie to ekran wczytywania, który automatycznie przekierowuje użytkowników do Twojego punktu końcowego logowania bez konieczności podejmowania przez nich żadnych działań.
Ścieżka powracającego użytkownika bez sesji Google
Przycisk bez FedCM
Przycisk Zaloguj się przez Google.
Pierwsza strona, na której można dodać nową sesję Google.
Druga strona, na której można dodać nową sesję Google.
Gdy użytkownik kliknie przycisk Dalej, token identyfikatora zostanie udostępniony Twojej witrynie.
Przycisk korzystający z FedCM
Najważniejsze ścieżki użytkownika konta Family Link
Ogólne najważniejsze ścieżki użytkownika z poprzedniej sekcji nadal obowiązują. Poniżej przedstawiamy dodatkowy przepływ, który będzie wyświetlany w przypadku logowania się na konto Google dziecka.
Przycisk bez FedCM
Brak sesji Google
Przycisk Zaloguj się przez Google.
Pierwsza strona, na której można dodać nową sesję Google dziecka (adres e-mail konta Google dziecka).
Druga strona, na której można dodać nową sesję Google dziecka (hasło do konta Google dziecka).
Pierwsza strona, na której można uzyskać zgodę rodzica na dodanie nowej sesji Google dziecka.
Druga strona, na której można uzyskać zgodę rodzica na dodanie nowej sesji Google dziecka.
Trzecia strona, na której można uzyskać zgodę rodzica na dodanie nowej sesji Google dziecka.
Pierwsza strona, na której można uzyskać zgodę rodzica na zalogowanie konta Google dziecka w aplikacji.
Druga strona, na której można uzyskać zgodę rodzica na zalogowanie konta Google dziecka w aplikacji.
Trzecia strona, na której można uzyskać zgodę rodzica na zalogowanie konta Google dziecka w aplikacji.
Ostatnia strona, na której można uzyskać zgodę rodzica na zalogowanie konta Google dziecka w aplikacji.
Gdy rodzic kliknie przycisk Dalej, token identyfikatora zostanie udostępniony Twojej witrynie.
Sesja Google
Przycisk Zaloguj się przez Google.
Strona wyboru konta.
Pierwsza strona, na której można uzyskać zgodę rodzica na zalogowanie konta Google dziecka w aplikacji.
Druga strona, na której można uzyskać zgodę rodzica na zalogowanie konta Google dziecka w aplikacji.
Trzecia strona, na której można uzyskać zgodę rodzica na zalogowanie konta Google dziecka w aplikacji.
Ostatnia strona, na której można uzyskać zgodę rodzica na zalogowanie konta Google dziecka w aplikacji.
Gdy rodzic kliknie przycisk Dalej, token identyfikatora zostanie udostępniony Twojej witrynie.
Przycisk korzystający z FedCM
Przycisk Zaloguj się przez Google z włączonym FedCM nie obsługuje obecnie kont Family Link.
Dodatkowe informacje o przepływie przycisku FedCM
Jeśli Twoja aplikacja internetowa wywołuje interfejs Button API z elementów iframe z innych domen, dodaj do ramki nadrzędnej atrybut
allow="identity-credentials-get". Więcej informacji znajdziesz w kroku 7.Prawidłowo skonfiguruj Content Security Policy (CSP) swojej witryny. Więcej informacji znajdziesz w kroku 8.
Stan okresu oczekiwania i ustawienia logowania się w usługach innych firm w Chrome nie mają wpływu na przepływ przycisku FedCM. Stan (jak pokazano na zrzutach ekranu poniżej) wpływa tylko na interfejs jednego dotknięcia.
