UX przycisku Zaloguj się przez Google

Ta strona opisuje wrażenia użytkownika związane z przyciskiem Zaloguj się przez Google.

Renderowanie przycisku

Spersonalizowany przycisk wyświetla informacje o profilu z pierwszej sesji Google, która zatwierdziła Twoją witrynę. Zatwierdzona sesja Google ma odpowiadające konto w Twojej witrynie, na którym użytkownik zalogował się wcześniej za pomocą funkcji Zaloguj się przez Google.

Jeśli wyświetla się spersonalizowany przycisk, użytkownik wie, że:

• Co najmniej 1 aktywną sesję Google.
• W Twojej witrynie jest konto odpowiadające temu adresowi.

Spersonalizowany przycisk pozwala użytkownikom szybko sprawdzić stan sesji zarówno po stronie Google, jak i w Twojej witrynie, zanim go klikną. Jest to szczególnie przydatne dla użytkowników, którzy odwiedzają Twoją witrynę tylko sporadycznie. Użytkownik może zapomnieć, czy konto zostało utworzone, a jeśli tak, to w jaki sposób. Spersonalizowany przycisk przypomina, że funkcja Zaloguj się przez Google była już używana. Pomaga to uniknąć niepotrzebnego tworzenia zduplikowanych 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 1 sesja. Ta sesja zatwierdza klienta, a w Twojej witrynie jest odpowiednie konto.

  

• Wiele sesji: na stronie Google jest wiele sesji. Te sesje zatwierdzają klienta. Zatwierdzenie jest oznaczone strzałką w kształcie listy obok wyświetlonego konta. co najmniej 1 sesja ma odpowiadające jej 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 zezwalają na wyświetlanie spersonalizowanego przycisku. Przycisk personalizacji nie wyświetla się, jeśli:

• Atrybut data-type ma wartość icon.
• Atrybut data-size ma wartość medium lub small.
• Atrybut data-width ma wartość mniejszą niż 200 pikseli.
• Plik cookie innej firmy jest zablokowany, a przycisk FedCM version nie jest włączony.

Jeśli nazwa lub adres e-mail są za długie, aby zmieścić się w przycisku, są wyświetlane w postaci elipsy.

Ważne: narzędzie dla deweloperów Generator kodu może Ci pomóc w interaktywnym projektowaniu przycisku Zaloguj się przez Google i generowaniu kodu.

Federated Credential Management (FedCM)

Piaskownica prywatności w internecie wprowadza istotne zmiany w usługach tożsamości Google i logowaniu użytkowników. Wpływa to na spersonalizowany przycisk Zaloguj się przez Google. Proces logowania się nie jest w żaden sposób zależny od przycisku, ale jeśli pliki cookie innych firm są zablokowane, powracający użytkownicy nie zobaczą przycisku spersonalizowanego.

Dzięki interfejsowi API FedCM (Federated Credentials Management) użytkownicy będą mogli zobaczyć spersonalizowany przycisk Zaloguj się przez Google na Twojej stronie. Domyślnie ta funkcja jest wyłączona, ale możesz ją włączyć, zmieniając 1 atrybut (HTML/JavaScript). Zalety przycisku FedCM:

• Ulepszony interfejs dla powracających użytkowników: proces logowania się powracających użytkowników został uproszczony, ponieważ użytkownicy mogą rozpoznać swoje dotychczasowe konta. Udowodniono, że zwiększona rozpoznawalność przekłada się na wyższy współczynnik klikalności (CTR). Co więcej, w odróżnieniu od procesu obsługi przycisku bez włączonego FedCM proces obsługi przycisku FedCM obsługuje funkcję automatycznego wyboru – po kliknięciu przycisku powracający użytkownicy z aktywną sesją Google zostaną automatycznie zalogowani, omijając prośbę o wybór konta.

• Ulepszona integracja funkcji: zintegrowaliśmy funkcje jednego dotknięcia i logowania automatycznego, umożliwiając wszystkim funkcjom logowania z użyciem federowanego zarządzania danymi logowania (FedCM) z funkcjami Google od pojedynczego podmiotu stowarzyszonego (RP) współpracę w harmonijny sposób. Ruchy użytkownika w ramach procesu obsługi przycisku FedCM zostaną zarejestrowane i zaakceptowane przez Chrome, aby umożliwić jednorazowe potwierdzenie w ramach procesu automatycznego logowania przy użyciu jednego dotknięcia. Dzięki temu wszystkie funkcje będą działać bezproblemowo.

Najważniejsze ścieżki użytkownika

Ważna informacja: wyświetlenie przycisku z tekstem ogólnym czy z tekstem spersonalizowanym nie ma wpływu na przebieg procesu po kliknięciu przycisku. Konto wyświetlane na personalizowanym przycisku nie jest automatycznie wybierane.

Ważna informacja: proces logowania się za pomocą przycisku Zaloguj się przez Google nie obsługuje automatycznego logowania. Aby wybrać odpowiednią sesję, użytkownik musi podjąć działanie, nawet jeśli jest tylko 1 aktywna sesja Google.

Ścieżki użytkownika różnią się w zależności od tych stanów.

• Stan sesji w witrynach Google. Aby wskazać różne stany sesji Google na początku ścieżki użytkownika, używa się tych terminów:

  • Has-Google-session: w witrynach Google jest co najmniej 1 aktywna sesja.
  • No-Google-session: brak aktywnej sesji w witrynach Google.

• Czy wybrane konto Google zatwierdziło Twoją witrynę na początku podróży użytkownika. Aby wskazać różne stany zatwierdzenia, używamy tych terminów:

  • Nowy użytkownik: wybrane konto nie zatwierdziło Twojej witryny.
  • Powracający użytkownik: wybrane konto wcześniej zatwierdziło Twoją witrynę.

Has-Google-session nowy użytkownik

Przycisk bez FedCM

1. Przycisk Zaloguj się przez Google.

   

2. Strona wyboru konta

   

3. Nowa strona zgody użytkownika

   

4. Po potwierdzeniu przez użytkownika token identyfikacyjny jest udostępniany Twojej witrynie.

Użytkownicy mogą dodać nową sesję Google, klikając przycisk Użyj innego konta. Zapoznaj się z sekcją o ścieżkach użytkowników w przypadku sesji bez Google.

Przycisk korzystający z FedCM

Drugim ostatnim ekranem w sesji jest ekran wczytywania, który automatycznie przekierowuje użytkowników do punktu logowania bez konieczności podejmowania przez nich żadnych działań.

Ścieżka powracającego użytkownika z sesją w Google

Przycisk bez FedCM

1. Przycisk Zaloguj się przez Google.

   

2. Strona wyboru konta

   

3. Gdy użytkownik wybierze konto, na którym wcześniej był zarejestrowany, token identyfikatora zostanie udostępniony Twojej witrynie.

Użytkownicy mogą dodać nową sesję Google, klikając przycisk Użyj innego konta. Zapoznaj się z sekcją „Trasy użytkowników bez sesji Google”.

Przycisk korzystający z FedCM

Drugim ostatnim ekranem w sesji jest ekran wczytywania, który automatycznie przekierowuje użytkowników do punktu logowania bez konieczności podejmowania przez nich żadnych działań.

Has-Google-session z automatycznym wybraniem ścieżki powracającego użytkownika

Przycisk bez FedCM

Przycisk Zaloguj się przez Google bez FedCM nie ma funkcji automatycznego wyboru.

Przycisk korzystający z FedCM

Po kliknięciu przycisku użytkownicy powracający z aktywnym profilem Google zostaną automatycznie wybrani, omijając prośbę o wybranie konta. Ustaw atrybut auto select na „PRAWDA” (HTML/JavaScript).

Ścieżka nowego użytkownika bez sesji w Google

Przycisk bez FedCM

1. Przycisk Zaloguj się przez Google.

   

2. Pierwsza strona, na której możesz dodać nową sesję Google.

   

3. Druga strona służąca do dodawania nowej sesji Google.

   

4. Nowa strona zgody użytkownika

   

5. Po potwierdzeniu przez użytkownika token identyfikacyjny jest udostępniany Twojej witrynie.

Przycisk korzystający z FedCM

Drugim ostatnim ekranem w sesji jest ekran wczytywania, który automatycznie przekierowuje użytkowników do punktu logowania bez konieczności podejmowania przez nich żadnych działań.

Ścieżka powracającego użytkownika, który nie korzystał z usług Google

Przycisk bez FedCM

1. Przycisk Zaloguj się przez Google.

   

2. Pierwsza strona, na której możesz dodać nową sesję Google.

   

3. Druga strona służąca do dodawania nowej sesji Google.

   

4. Gdy użytkownik kliknie przycisk Dalej, token identyfikacyjny zostanie udostępniony Twojej witrynie.

Przycisk korzystający z FedCM

Ścieżki użytkowników dotyczące klucza konta Family Link

Nadal obowiązują ogólne ścieżki kluczowych użytkowników opisane w poprzedniej sekcji. Poniżej przedstawiamy dodatkowy proces logowania na konto Google dziecka.

Przycisk bez FedCM

No-Google-session

1. Przycisk Zaloguj się przez Google.

   

2. Pierwsza strona dodawania nowej sesji Google dziecka (adres e-mail konta Google dziecka).

   

3. Druga strona służąca do dodawania nowej sesji Google dziecka (hasło do konta Google dziecka).

   

4. Pierwsza strona, na której rodzic musi zatwierdzić dodanie nowej sesji Google podrzędnej.

   

5. Druga strona, na której rodzic musi zatwierdzić dodanie nowej sesji Google podrzędnej.

   

6. Trzecia strona, na której rodzic musi zatwierdzić dodanie nowej sesji Google podrzędnej.

   

7. Pierwsza strona, na której rodzic musi wyrazić zgodę na zalogowanie dziecka na konto Google w aplikacji.

   

8. Druga strona, na której rodzic musi wyrazić zgodę na zalogowanie dziecka na koncie Google w aplikacji.

   

9. Trzecia strona, na której rodzic musi wyrazić zgodę na zalogowanie dziecka na konto Google w aplikacji.

   

10. Ostatnia strona, na której rodzic musi zatwierdzić logowanie dziecka na konto Google w aplikacji.

    

11. Gdy rodzic kliknie przycisk Dalej, token identyfikatora zostanie udostępniony Twojej witrynie.

Has-Google-session

1. Przycisk Zaloguj się przez Google.

   

2. Strona wyboru konta

   

3. Pierwsza strona, na której rodzic musi wyrazić zgodę na zalogowanie dziecka na konto Google w aplikacji.

   

4. Druga strona, na której rodzic musi wyrazić zgodę na zalogowanie dziecka na koncie Google w aplikacji.

   

5. Trzecia strona, na której rodzic musi wyrazić zgodę na zalogowanie dziecka na konto Google w aplikacji.

   

6. Ostatnia strona, na której rodzic musi zatwierdzić logowanie dziecka na konto Google w aplikacji.

   

7. Gdy rodzic kliknie przycisk Dalej, token identyfikatora zostanie udostępniony Twojej witrynie.

Przycisk korzystający z FedCM

Przycisk Zaloguj się przez Google z włączoną usługą FedCM nie obsługuje obecnie kont Family Link.

Dodatkowe informacje o przepływie przycisku FedCM

• Dodaj atrybut allow="identity-credentials-get" do ramki nadrzędnej, jeśli Twoja aplikacja internetowa wywołuje interfejs Button API z ramek osadzonych z wielu źródeł. Aby dowiedzieć się więcej, zapoznaj się z krokem 7.

• prawidłowo skonfiguruj w swojej witrynie standard Content Security Policy (CSP); Więcej informacji znajdziesz w kroku 8.

• Stan okresu oczekiwania i ustawienia logowania przez usługę zewnętrzną w Chrome nie mają wpływu na proces logowania za pomocą przycisku FedCM. Ten stan (jak widać na poniższych zrzutach ekranu) ma wpływ tylko na interfejs One Tap.