Migracja do FedCM

Z tego przewodnika dowiesz się, jakie zmiany w Twojej aplikacji internetowej wprowadził interfejs federowanego zarządzania danymi logowania API (FedCM).

Gdy włączona jest funkcja FedCM, przeglądarka wyświetla użytkownikom odpowiednie monity 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 prośby i kontaktuje się z dostawcą tożsamości, takim jak Google, tylko po udzieleniu wyraźnej zgody użytkownika.

W przypadku większości witryn migracja przebiega płynnie przez zgodne wstecznie aktualizacje biblioteki JavaScriptu Google Identity Services.

Aktualizacje dotyczące funkcji automatycznego logowania

W sierpniu 2023 r. udostępniliśmy wersję beta FedCM (FedCM) dla Google Identity Services. Wielu programistów przetestowało ten interfejs i przekazaliśmy 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 potwierdzenie odbywa się przez jednokrotne kliknięcie promptu „One Tap”, aby potwierdzić zamiar zalogowania użytkownika. W przypadku niektórych witryn ta zmiana może spowodować początkowe zakłócenie we współczynnikach konwersji związanych z automatycznym logowaniem się.

Niedawno w M121 wprowadziliśmy zmianę w interfejsie logowania automatycznego FedCM. Ponowne potwierdzenie jest wymagane tylko w przypadku ograniczeń dotyczących plików cookie innych firm. Oznacza to, że:

  1. Automatyczne logowanie w FedCM nie wymaga ponownego potwierdzenia w przypadku powracających użytkowników. Jeśli użytkownik ponownie potwierdzi dostęp do usługi w interfejsie FedCM, to potwierdzenie zostanie uwzględnione w ramach wymagań gestu użytkownika po wprowadzeniu ery 3PCD.

  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 funkcji automatycznego logowania jak najszybciej przejść na FedCM, aby zmniejszyć zakłócenia w procentowym wskaźniku konwersji automatycznego logowania.

W przypadku automatycznego procesu logowania kod JavaScript GIS nie uruchamia FedCM w starszych wersjach Chrome (przed M121), nawet jeśli Twoja witryna korzysta 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 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)

Dzięki usłudze FedCM jedno dotknięcie powoduje wyświetlenie nazwy domeny 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 z jedną sesją przy użyciu FedCM (z włączonym logowaniem automatycznym) Ś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 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 FedCM API jest dostępny w Chrome 117 i nowszych wersjach.

  • W Chrome jest włączone ustawienie Logowanie przez inną usługę.

  • Jeśli używasz przeglądarki 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.

Migracja 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()getNotDisplayedReason().

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

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

Mimo że moment pominięcia (isSkippedMoment()) jest nadal wywoływany z wywołania zwrotnego google.accounts.id.prompt w obiekcie PromptMomentNotication, nie podano szczegółowego powodu. Usuń z kodu cały kod, który zależy od metody getSkippedReason().

Pamiętaj, że powiadomienie o odrzuceniu momentu, isDismissedMoment(), i powiązana z nim szczegółowa metoda przyczyny, 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ć nałożone na własne pozycje, np. atrybut stylu, data-prompt_parent_id, intermediate_iframes, niestandardowy element iframe i inne kreatywne sposoby.

Zmień układ strony, aby poprawić wrażenia użytkowników, gdy ważne informacje są zasłonięte. Nie twórz interfejsu użytkownika wokół promptu Smart 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 innym miejscu.

6. Dodaj atrybut allow="identity-credentials-get" do elementu nadrzędnego, jeśli Twoja aplikacja internetowa wywołuje interfejs One Tap API z ramek iframe z innych domen.

Ramka iframe jest uważana za pochodzącą z różnych domen, jeśli jej źródło nie jest identyczne ze źródłem nadrzędnej ramki. Na przykład:

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

    Aby zwiększyć prywatność użytkowników, 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 podelementów iframe.

    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).

  • Umieszczona strona (https://logins.example.com) zawiera również element iframe o nazwie „iframe B”, który zawiera dodatkowo stronę (https://onetap.example2.com) obsługującą jedno dotknięcie.

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

    Przygotuj się na pytania dotyczące niewyświetlanego komunikatu jednym dotknięciem. Inne witryny z innych źródeł mogą umieszczać w swoich ramach iframe strony z usługą One Tap. Możesz otrzymać od użytkowników końcowych lub innych właścicieli witryn większą liczbę zgłoszeń dotyczących braku wyświetlania funkcji One Tap. Choć zmiany mogą wprowadzać tylko właściciele witryn na ich stronach, możesz wykonać te czynności, aby zminimalizować skutki:

  • 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 dewelopera.

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

  • Aktywnie kontaktuj się z partnerami, klientami lub właścicielami witryn, których dotyczy ta zmiana, aby uniknąć problemów z przejściem na FedCM.

7. Dodaj te dyrektywy do nagłówka Content-Security-Policy (CSP).

Ten krok jest opcjonalny, ponieważ nie wszystkie witryny definiują CSP.

  • Jeśli w Twojej witrynie nie jest używany nagłówek 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 FedCM One Tap nie będzie się wyświetlać w witrynie.

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

Obsługa logowania użytkowników na stronach AMP to opcjonalna funkcja GIS, która może być zaimplementowana w Twojej aplikacji internetowej. W takim przypadku

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ż przekierowywanie żądań logowania z AMP do procesu logowania w Twojej witrynie w formacie HTML. Pamiętaj, że powiązany z nim element 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ę udała.

  1. Sprawdź, czy Twoja przeglądarka obsługuje FedCM i czy masz już sesję na 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. Podczas logowania się w aplikacji za pomocą funkcji One Tap sprawdź, czy do punktu końcowego lub metody wywołania zwrotnego zwracane są prawidłowe dane logowania.

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

Okres oczekiwania w przypadku funkcji One Tap

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. W tym celu kliknij ikonę kłódki na pasku adresu i kliknij przycisk Zresetuj uprawnienia.

Okres blokady automatycznego logowania się

Gdy testujesz logowanie automatyczne jednym dotknięciem przy użyciu FedCM, między każdą próbą logowania automatycznego następuje 10-minutowy okres wyciszania. Okres ciszy nie może zostać zresetowany. Aby ponownie włączyć automatyczne logowanie, musisz odczekać 10 minut lub użyć innego konta Google.

Przydatne materiały

Privacy Sandbox Analysis Tool (PSAT) to rozszerzenie narzędzi deweloperskich 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.