Migracja do FedCM

Z tego przewodnika dowiesz się, jakie zmiany w Twojej aplikacji internetowej wprowadził interfejs Federated Credentials Management API (FedCM).

Gdy włączona jest funkcja FedCM, przeglądarka wyświetla użytkownikom odpowiednie prompty i nie używa plików cookie innych firm.

Omówienie

FedCM umożliwia tworzenie bardziej prywatnych procesów logowania bez konieczności korzystania z plików cookie innych firm. Przeglądarka kontroluje ustawienia użytkownika, wyświetla prompty i kontaktuje się z dostawcą tożsamości, takim jak Google, dopiero po uzyskaniu wyraźnej zgody użytkownika.

W przypadku większości witryn migracja przebiega płynnie dzięki aktualizacjom biblioteki JavaScript Google Identity Services, które zapewniają zgodność wsteczną.

Aktualizacje dotyczące funkcji automatycznego logowania

W sierpniu 2023 r. udostępniliśmy wersję beta usługi Federated Credential Management (FedCM) w Google Identity Services. Wielu deweloperów przetestowało interfejs API i przesłało cenne opinie.

Jeden z głosów, które słyszeliśmy od deweloperów, dotyczy wymagań dotyczących gestów użytkownika w ramach procesu automatycznego logowania FedCM. Aby zwiększyć prywatność, Chrome wymaga od użytkowników ponownego potwierdzenia, że chcą zalogować się w witrynie za pomocą konta Google w każdej instancji Chrome, nawet jeśli użytkownik zatwierdził witrynę przed wdrożeniem FedCM. Jednorazowe ponowne potwierdzenie odbywa się przez jednokrotne kliknięcie promptu „One Tap”, aby potwierdzić zamiar zalogowania użytkownika. Ta zmiana może spowodować początkowe zakłócenie współczynników konwersji w przypadku automatycznego logowania w niektórych witrynach.

Niedawno w wersji M121 wprowadziliśmy zmianę w interfejsie logowania automatycznego FedCM. Ponowne potwierdzenie jest wymagane tylko wtedy, gdy pliki cookie innych firm są ograniczone. Oznacza to, że:

  1. Automatyczne logowanie w FedCM nie wymaga ponownego potwierdzenia w przypadku powracających użytkowników. Jeśli użytkownicy potwierdzą ponownie za pomocą interfejsu FedCM, to ponowne potwierdzenie będzie liczone jako spełnienie wymogu dotyczącego działania użytkownika w erze po 3 poziomach weryfikacji.

  2. Automatyczne logowanie w ramach FedCM będzie sprawdzać stan ponownego potwierdzenia, gdy pliki cookie innych firm są obecnie ręcznie ograniczane przez użytkowników lub domyślnie w przyszłej wersji Chrome.

W związku z tą zmianą zalecamy wszystkim deweloperom korzystającym z automatycznego logowania jak najszybciej przejście na FedCM, aby zmniejszyć zakłócenia w procentowym wskaźniku konwersji w przypadku automatycznego logowania.

W przypadku automatycznego procesu logowania kod JavaScript GIS nie uruchamia FedCM w starszej wersji Chrome (wcześniejszej niż M121), nawet jeśli Twoja witryna zdecyduje się na korzystanie z FedCM.

Różnice w ścieżce użytkownika

Funkcje obsługiwane przez One Tap są podobne w przypadku korzystania z FedCM i bez FedCM, z niewielkimi różnicami.

Nowy użytkownik z jedną sesją

W przypadku FedCM usługa One Tap wyświetla nazwę domeny najwyższego poziomu zamiast nazwy aplikacji.

Korzystanie z FedCM Bez FedCM
Nowy użytkownik w ramach jednej sesji korzystający z FedCM Nowy użytkownik w jednej sesji bez FedCM

Powracający użytkownik, który korzysta z jednej sesji (z wyłączonym automatycznym logowaniem)

W przypadku FedCM usługa One Tap wyświetla nazwę domeny najwyższego poziomu zamiast nazwy aplikacji.

Korzystanie z FedCM Bez FedCM
Ścieżka powracającego użytkownika w ramach jednej sesji z użyciem FedCM (z wyłączonym automatycznym logowaniem) Ścieżka powracającego użytkownika w ramach jednej sesji bez FedCM (z wyłączonym automatycznym logowaniem)

Powracający użytkownik, który korzysta z jednej sesji (z włączonym automatycznym logowaniem)

Dzięki FedCM użytkownicy mogą w ciągu 5 sekund anulować automatyczne logowanie, klikając X, zamiast klikać przycisk Anuluj.

Korzystanie z FedCM Bez FedCM
Ścieżka powracającego użytkownika w ramach pojedynczej sesji z wykorzystaniem FedCM (z włączonym automatycznym logowaniem) Ścieżka powracającego użytkownika w ramach jednej sesji bez FedCM (z włączonym automatycznym logowaniem)

Wiele sesji

W przypadku FedCM usługa One Tap wyświetla nazwę domeny najwyższego poziomu zamiast nazwy aplikacji.

Korzystanie z FedCM Bez FedCM
Użytkownik z wieloma sesjami korzystający z FedCM Użytkownik z wieloma sesjami bez FedCM

Zanim zaczniesz

Sprawdź, czy ustawienia i wersja przeglądarki obsługują interfejs FedCM API. Zalecamy zaktualizowanie przeglądarki do najnowszej wersji.

  • Interfejs API FedCM jest dostępny w Chrome w wersji 117 lub nowszej.

  • W Chrome jest włączone ustawienie Logowanie się za pomocą usług innych firm.

  • Jeśli masz przeglądarkę Chrome w wersji 119 lub starszej, otwórz chrome://flags i włącz eksperymentalną funkcję FedCmWithoutThirdPartyCookies. W przypadku przeglądarki Chrome w wersji 120 lub nowszej nie trzeba wykonywać tego kroku.

Przenoszenie aplikacji internetowej

Aby włączyć FedCM, ocenić potencjalny wpływ migracji i w razie potrzeby wprowadzić zmiany w dotychczasowej aplikacji internetowej:

1. Dodaj flagę logiczną, aby włączyć FedCM podczas inicjowania za pomocą:

2. Usuń z kodu metody isDisplayMoment(), isDisplayed(), isNotDisplayed() i getNotDisplayedReason().

Aby zwiększyć prywatność użytkowników, wywołanie zwrotne google.accounts.id.prompt nie zwraca już żadnego powiadomienia o momencie wyświetlenia w obiekcie PromptMomentNotication. Usuń kod, który zależy od metod związanych z momentem wyświetlenia. Są to metody isDisplayMoment(), isDisplayed(), isNotDisplayed() i getNotDisplayedReason().

3. Usuń z kodu metodę getSkippedReason().

Chociaż moment pominięcia, isSkippedMoment(), nadal będzie wywoływany z funkcji google.accounts.id.prompt w obiekcie PromptMomentNotication, szczegółowy powód nie zostanie podany. Usuń z kodu kod, który zależy od metody getSkippedReason().

Pamiętaj, że powiadomienie o odrzuceniu chwili isDismissedMoment() i powiązana metoda szczegółowego powodu getDismissedReason() nie ulegają zmianie, gdy włączona jest funkcja FedCM.

4. Usuń atrybuty stylu position z elementów data-prompt_parent_id i intermediate_iframes.

Rozmiar i położenie promptów użytkownika są kontrolowane przez przeglądarkę. Nie można używać niestandardowych pozycji dla funkcji One Tap na komputerze.

5. W razie potrzeby zaktualizuj układ strony.

Rozmiar i położenie komunikatów dla użytkowników są kontrolowane przez przeglądarkę. W zależności od układu poszczególnych stron niektóre treści mogą być nakładane, ponieważ nie są obsługiwane żadne pozycje niestandardowe w przypadku aplikacji One Tap na komputerze, np. atrybut style, data-prompt_parent_id, intermediate_iframes, niestandardowy element iframe i inne kreacje.

Zmień układ strony, aby zwiększyć wygodę użytkowników, gdy ważne informacje są zasłonięte. Nie twórz interfejsu użytkownika wokół promptu One Tap, nawet jeśli zakładasz, że jest on domyślnie ustawiony. Interfejs FedCM API jest obsługiwany przez przeglądarkę, dlatego dostawcy różnych przeglądarek mogą umieszczać prompt w nieco innych miejscach.

6. Dodaj atrybut allow="identity-credentials-get" do nadrzędnego elementu iframe, jeśli Twoja aplikacja internetowa wywołuje interfejs One Tap API z elementu iframe z innego źródła.

Element iframe jest uważany za pochodzący z różnych domen, jeśli jego źródło nie jest takie samo jak źródło elementu nadrzędnego. Na przykład:

  • Różne domeny: https://example1.com i https://example2.com
  • różne domeny najwyższego poziomu: https://example.uk i https://example.jp;
  • Subdomeny: https://example.com i https://login.example.com

Korzystanie z usługi One Tap w ramach elementu iframe w innej domenie może być dla użytkowników mylące. W ramach tego promptu wyświetlany jest nazwa domeny najwyższego poziomu, a nie iframe, jako środek bezpieczeństwa zapobiegający kradzieży danych logowania. Jednak tokeny identyfikatora są wydawane do źródła iframe. Więcej informacji znajdziesz w tym zgłoszeniu na GitHubie.

Ponieważ ta rozbieżność może być myląca, obsługiwana jest tylko metoda, która polega na używaniu interfejsu iframe w ramach tej samej witryny, ale w innej domenie. Na przykład strona w domenie najwyższego poziomu https://www.example.com używającej iframe do umieszczania strony z jednym kliknięciem w domenie https://login.example.com. W prośbie o logowanie się jednym dotknięciem pojawi się komunikat „Zaloguj się na example.com przez google.com”.

Wszystkie inne przypadki, np. różne domeny, są nieobsługiwane. Zamiast tego rozważ alternatywne metody integracji, takie jak:

  • Wdrożenie przycisku Zaloguj się przez Google.
  • Implementacja funkcji One Tap w domenie najwyższego poziomu
  • Korzystanie z punktów końcowych OAuth 2.0 Google w celu bardziej dostosowanej integracji.
  • Jeśli umieszczasz w ramce iframe witrynę innej firmy i nie możesz zmodyfikować implementacji funkcji One Tap, możesz uniemożliwić wyświetlanie promptu One Tap w ramce iframe. Aby to zrobić, usuń atrybut allow="identity-credentials-get" z tagu iframe w ramce nadrzędnej. W ten sposób wyłączysz to promptowanie i będziesz mieć możliwość przekierowania użytkowników bezpośrednio na stronę logowania do osadzonej witryny.

Gdy interfejs One Tap API jest wywoływany z ramek iframe z innych domen, musisz dodać atrybut allow="identity-credentials-get" do każdego tagu iframe w ramce nadrzędnej:

  <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>

Jeśli Twoja aplikacja korzysta z elementu iframe, który zawiera inny element iframe, musisz zadbać o to, aby atrybut został dodany do każdego elementu iframe, w tym do wszystkich elementów iframe podrzędnych.

Rozważmy na przykład taki scenariusz:

  • Górny dokument (https://www.example.uk) zawiera element iframe o nazwie „IframeA”, który zawiera stronę (https://logins.example.com).

  • Ta umieszczona strona (https://logins.example.com) zawiera też ramkę iframe o nazwie „Iframe B”, która zawiera stronę (https://onetap.example2.com) z usługą One Tap.

    Aby zapewnić prawidłowe wyświetlanie funkcji One Tap, musisz dodać ten atrybut do tagów Iframe A i Iframe B.

    Przygotuj odpowiedzi na pytania dotyczące niewyświetlania promptu „Jedno kliknięcie”. Inne witryny z innymi źródłami mogą umieszczać w ramkach iframe Twoje strony, na których hostowany jest One Tap. Możesz otrzymać od użytkowników końcowych lub innych właścicieli witryn większą liczbę zgłoszeń dotyczących nie wyświetlania się funkcji One Tap. Zmiany mogą wprowadzać tylko właściciele witryn na swoich stronach, ale możesz podjąć te działania, aby ograniczyć ich wpływ:

  • Zaktualizuj dokumentację dla deweloperów, aby zawierała informacje o prawidłowym konfigurowaniu iframe do wywoływania witryny. Możesz umieścić w dokumentacji link do tej strony.

  • W razie potrzeby zaktualizuj stronę z najczęstszymi pytaniami dla deweloperów.

  • Poinformuj zespół pomocy o nadchodzącej zmianie i już teraz przygotuj odpowiedź na zapytanie.

  • Aby zapewnić płynne przejście na FedCM, skontaktuj się z partnerami, klientami lub właścicielami witryn, których dotyczy ta zmiana.

7. Dodaj te dyrektywy do zasad bezpieczeństwa treści (CSP).

Ten krok jest opcjonalny, ponieważ nie wszystkie witryny definiują dostawcę usług zabezpieczeń.

  • Jeśli w Twojej witrynie nie jest używany CSP, nie musisz wprowadzać żadnych zmian.

  • Jeśli usługa CSP działa w ramach obecnej usługi One Tap i nie używasz connect-src, frame-src, script-src, style-src ani default-src, nie musisz wprowadzać żadnych zmian.

  • W przeciwnym razie skonfiguruj dostawcę usług w chmurze, korzystając z tego przewodnika. Bez prawidłowej konfiguracji CSP usługa FedCM One Tap nie będzie się wyświetlać w witrynie.

8. Usuń obsługę logowania na przyspieszonych stronach mobilnych (AMP).

Obsługa logowania użytkownika w AMP to opcjonalna funkcja GIS, którą możesz zaimplementować w swojej aplikacji internetowej. W takiej sytuacji

Usuń wszelkie odniesienia do:

  • element niestandardowy amp-onetap-google, 
  • <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>

    Rozważ przekierowanie żądań logowania z AMP do procesu logowania HTML w witrynie. Pamiętaj, że powiązany Intermediate Iframe Support API nie jest dotknięty.

Testowanie i weryfikowanie migracji

Po wprowadzeniu niezbędnych zmian na podstawie poprzednich kroków możesz sprawdzić, czy migracja się powiodła.

  1. Sprawdź, czy Twoja przeglądarka obsługuje FedCM i czy masz aktywną sesję w koncie Google.

  2. Otwórz w aplikacji stronę lub strony One Tap.

  3. Sprawdź, czy wyświetla się prośba o jeden klik i czy jest ona bezpiecznie nałożona na zawartość.

  4. Sprawdź, czy prawidłowe dane logowania są zwracane do punktu końcowego lub metody wywołania zwrotnego podczas logowania się w aplikacji za pomocą funkcji One Tap.

  5. Jeśli automatyczne logowanie jest włączone, sprawdź, czy anulowanie działa i czy do punktu końcowego lub metody wywołania zwrotnego zwracane są prawidłowe dane logowania.

Okres oczekiwania w przypadku logowania jednym dotknięciem

Kliknięcie opcji Jednym kliknięciem w prawym górnym rogu powoduje zamknięcie promptu i wprowadzenie okresu przerwy, który tymczasowo uniemożliwia wyświetlanie promptu Jednym kliknięciem. Jeśli w Chrome chcesz, aby prośba o jeden kliknięcie została wyświetlona ponownie przed zakończeniem okresu oczekiwania, możesz zresetować stan oczekiwania. Aby to zrobić, kliknij ikonę kłódki na pasku adresu i kliknij przycisk Zresetuj uprawnienia.

Okres bezczynności logowania automatycznego

Podczas testowania logowania automatycznego za pomocą FedCM w jednym dotknięciu występuje 10-minutowy okres bezczynności między każdą próbą logowania automatycznego. Nie można zresetować okresu ciszy. Aby ponownie włączyć automatyczne logowanie, musisz odczekać 10 minut lub użyć innego konta Google.

Przydatne materiały

Narzędzia do analizy Piaskownicy prywatności (PSAT) to rozszerzenie narzędzi deweloperskich w Chrome, które ułatwia stosowanie alternatywnych interfejsów API, takich jak FedCM. Narzędzie działa poprzez skanowanie witryny pod kątem funkcji, których dotyczy problem, i podaje listę zalecanych zmian.