Migracja do FedCM

W tym przewodniku omawiamy zmiany w aplikacji internetowej wprowadzone przez Federated Credentials Management API (FedCM).

Gdy FedCM jest włączony, przeglądarka wyświetla komunikaty użytkownika i nie są używane żadne pliki cookie innych firm.

Opis

Piaskownica prywatności w internecie i usunięcie z Chrome plików cookie innych firm z internetu wprowadzają istotne zmiany w usługach tożsamości Google i logowaniu użytkowników.

FedCM umożliwia bardziej prywatny proces logowania bez konieczności używania 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 tylko po udzieleniu wyraźnej zgody użytkownika.

W przypadku większości witryn migracja odbywa się bezproblemowo dzięki zgodnym wstecznym aktualizacjom biblioteki JavaScript usług tożsamości Google.

Zanim zaczniesz

Sprawdź, czy Twoja przeglądarka i jej wersja obsługują interfejs FedCM API. W razie potrzeby zaktualizuj go do nowszej wersji.

Zanim przetestujesz przepływy logowania z zablokowanym plikiem cookie innych firm, otwórz chrome://flags i włącz eksperymentalną funkcję FedCmWithoutThirdPartyCookies. Ten krok jest konieczne tylko do momentu, aż ustawienie zostanie ustawione jako domyślne. W Chrome musi być też włączone ustawienie Logowanie przez usługę zewnętrzną.

Migracja aplikacji internetowej

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

1. Dodaj flagę wartości logicznej, aby włączyć FedCM podczas inicjowania za pomocą:

   • HTML, ustaw wartość atrybutu data-use_fedcm_for_prompt na true.

   • JavaScript: ustaw use_fedcm_for_prompt na true w obiekcie IdConfiguration.

2. Usuń wszelkie użycie wartości opt_out_or_no_session zwróconej w obiekcie PromptMomentNotication.

   Aby chronić prywatność użytkowników, wywołanie zwrotne google.accounts.id.prompt nie zwraca już wyników związanych z ustawieniami użytkownika lub stanem sesji.

3. Zaktualizuj przepływy użytkowników i kod witryny, aby obsługiwały opóźnione powiadomienia o zdarzeniach isDisplayMoment().

   Aby chronić prywatność użytkowników, po włączeniu FedCM powiadomienia o momentach wyświetlania są celowo opóźnione o losowy czas. Powiadomienia można odbierać do 1 minuty po wystąpieniu zdarzenia. Jeśli używasz funkcji isDisplayMoment do warunkowego wyświetlania promptów lub wywoływania interakcji użytkownika, zwróć szczególną uwagę na zmienną długości czasu w swoim projekcie UX.

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

   Przeglądarka określa rozmiar i pozycję promptów. Położenie niestandardowe nie jest obsługiwane w przypadku użycia funkcji One Tap na komputerze.

5. W razie potrzeby zaktualizuj układ strony.

   Przeglądarka określa rozmiar i pozycję promptów użytkownika. W zależności od układu poszczególnych stron niektóre treści mogą zostać nałożone.

   Zmienić układ strony, aby zwiększyć wygodę użytkowników, gdy ważne informacje są zasłonięte.

6. Dodaj atrybut allow="identity-credentials-get" do ramki nadrzędnej, jeśli aplikacja internetowa wywołuje interfejs One Tap API z elementów iframe z innych domen.

   Element iframe jest uznawany za element z innych domen, jeśli jego źródło nie jest dokładnie takie samo jak źródło nadrzędne. 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

   Aby zwiększyć prywatność użytkowników, gdy interfejs One Tap API jest wywoływany z elementów iframe z innych domen, musisz dodać atrybut allow="identity-credentials-get" w każdym tagu iframe ramki nadrzędnej:

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

   Jeśli aplikacja korzysta z elementu iframe, który zawiera inny element iframe, musisz się upewnić, że ten atrybut został dodany do każdego elementu iframe, w tym do wszystkich elementów podrzędnych.

   Przeanalizujmy 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ż element iframe o nazwie „iframe B”, który zawiera stronę (https://onetap.example2.com) hostującą jedno dotknięcie.

   Aby umożliwić prawidłowe wyświetlanie jednym dotknięciem, atrybut należy dodać zarówno do tagów iframe A, jak i iframe B.

7. Dodaj te dyrektywy do standardu Content Security Policy (CSP).

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

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

   Obsługa logowania się przez użytkowników w przypadku AMP to opcjonalna funkcja GIS zaimplementowana w swojej aplikacji internetowej. W takim przypadku

   Usuń wszelkie odwołania do:

   • amp-onetap-google element niestandardowy,

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

   Rozważ przekierowanie żądań logowania ze stron AMP do procesu logowania się w kodzie HTML swojej witryny. Pamiętaj, że nie ma to wpływu na powiązany Intermediate Iframe Support API.