Przenosimy usługi tożsamości Google do interfejsów API FedCM. Postępuj zgodnie z przewodnikiem po migracji, aby sprawdzić potencjalne zmiany i uniknąć negatywnego wpływu na logowanie się użytkowników w Twojej witrynie.

Ta strona została przetłumaczona przez Cloud Translation API.

Konfiguracja

Zanim dodasz do swojej witryny logowanie się przez Google, logowanie jednym kliknięciem lub logowanie automatyczne, skonfiguruj konfigurację OAuth i opcjonalnie skonfiguruj zasady bezpieczeństwa treści.

Uzyskiwanie identyfikatora klienta Google API

Aby włączyć funkcję Zaloguj się przez Google w swojej witrynie, musisz najpierw skonfigurować identyfikator klienta Google API. Aby to zrobić:

Otwórz .
Utwórz lub wybierz projekt . Jeśli masz już projekt dla przycisku Zaloguj się przez Google lub Google One Tap, użyj istniejącego projektu i identyfikatora klienta internetowego. Podczas tworzenia aplikacji produkcyjnych może być konieczne użycie kilku projektów. Powtórz pozostałe czynności z tej sekcji w przypadku każdego projektu, którym zarządzasz.
Aby utworzyć nowy identyfikator klienta, kliknij Utwórz klienta, a w sekcji Typ aplikacji wybierz Aplikacja internetowa. Aby użyć dotychczasowego identyfikatora klienta, wybierz typ Aplikacja internetowa.
Dodaj identyfikator URI swojej witryny do sekcji Autoryzowane źródła JavaScriptu. Identyfikator URI zawiera tylko schemat i pełną nazwę hosta. Na przykład: https://www.example.com.

Ważna uwaga: do testów lokalnych lub programowania dodaj zarówno http://localhost, jak i http://localhost:<port_number>
Ważna uwaga: usługa Google One Tap może być wyświetlana tylko w domenach HTTPS.
Opcjonalnie dane logowania mogą być zwracane za pomocą przekierowania do punktu końcowego, który hostujesz, a nie przez wywołanie zwrotne JavaScript. W takim przypadku dodaj identyfikatory URI przekierowania do sekcji Autoryzowane identyfikatory URI przekierowania. Identyfikatory URI przekierowania zawierają schemat, pełną nazwę hosta i ścieżkę. Muszą być zgodne z regułami sprawdzania identyfikatorów URI przekierowania. Na przykład: https://www.example.com/auth-receiver.

Konfigurowanie ekranu akceptacji OAuth

Zarówno logowanie się przez Google, jak i uwierzytelnianie jednym kliknięciem obejmują ekran zgody, na którym użytkownicy mogą zobaczyć, jakie dane prosi o aplikacja, jakiego rodzaju dane są potrzebne i jakie są zasady.

Otwórz sekcję w sekcjina platformie Google Auth.
Jeśli pojawi się taka prośba, wybierz utworzony przez siebie projekt.
Na stronie wypełnij formularz i kliknij przycisk „Zapisz”.
1. Nazwa aplikacji: nazwa aplikacji, która prosi o zgodę. Nazwa powinna dokładnie odzwierciedlać aplikację i być spójna z nazwą aplikacji, którą użytkownicy widzą w innych miejscach.
2. Logo aplikacji: ten obraz jest wyświetlany na ekranie zgody, aby ułatwić użytkownikom rozpoznanie Twojej aplikacji. Logo jest widoczne na ekranie zgody „Zaloguj się przez Google” oraz w ustawieniach konta, ale nie jest widoczne w oknie dialogowym „Jedno kliknięcie”.
3. Adres e-mail pomocy: wyświetlany na ekranie zgody jako kontakt dla użytkowników potrzebujących pomocy oraz dla administratorów G Suite, którzy oceniają dostęp do Twojej aplikacji dla swoich użytkowników. Ten adres e-mail jest widoczny dla użytkowników na ekranie logowania z użyciem Google, gdy użytkownik kliknie nazwę aplikacji.
4. Autoryzowane domeny: aby chronić Ciebie i Twoich użytkowników, Google zezwala na używanie autoryzowanych domen tylko aplikacjom, które uwierzytelniają się za pomocą OAuth. Linki do aplikacji muszą być hostowane w autoryzowanych domenach. Więcej informacji
5. Link do strony głównej aplikacji: wyświetlany na ekranie zgody „Zaloguj się przez Google” i w ramach funkcji One-Tap informacje o zrzeczeniu się odpowiedzialności zgodne z RODO pod przyciskiem „Dalej jako”. Musi być hostowany w autoryzowanej domenie.
6. Link do polityki prywatności aplikacji: wyświetlany na ekranie zgody w przypadku logowania się przez Google oraz informacje o zrzeczeniu się odpowiedzialności zgodne z RODO w ramach funkcji logowania jednym kliknięciem pod przyciskiem „Dalej”. Musi być hostowany w autoryzowanej domenie.
7. Link do Warunków korzystania z aplikacji (opcjonalnie): wyświetlany na ekranie logowania z Google. Na ekranie zgody Google i ekranie z jednoklikowym akceptowaniem RODO znajdują się informacje o zrzeczeniu się odpowiedzialności zgodne z RODO. Znajdują się one pod przyciskiem „Dalej jako”. Musi być hostowany w autoryzowanej domenie.
Aby skonfigurować zakresy dla aplikacji, otwórz .
1. Zakresy interfejsów API Google: zakresy pozwalają aplikacji na dostęp do prywatnych danych użytkownika. W przypadku uwierzytelniania wystarcza zakres domyślny (e-mail, profil, openid). Nie musisz dodawać żadnych zakresów wrażliwych. Zwykle zaleca się stopniowe zwiększanie zakresów w momencie, gdy jest to konieczne, a nie z góry.
Sprawdź „Stan weryfikacji”. Jeśli Twoja aplikacja wymaga weryfikacji, kliknij przycisk „Prześlij do weryfikacji”, aby przesłać aplikację do weryfikacji. Więcej informacji znajdziesz w wymaganiach dotyczących weryfikacji OAuth.

Wyświetlanie ustawień OAuth podczas logowania

Logowanie jednym dotknięciem za pomocą FedCM

Ustawienia zgody OAuth wyświetlane przez Chrome One Tap za pomocą FedCM

Domenę autoryzowaną najwyższego poziomu wyświetla się w Chrome podczas uzyskiwania zgody użytkownika. Tylko korzystanie z One Tap w ramach różnych domen, ale w ramach tej samej witryny w ramach iframe jest obsługiwaną metodą.

Jedno dotknięcie bez FedCM

Ustawienia zgody OAuth wyświetlane przez One Tap

Nazwa aplikacji jest wyświetlana podczas uzyskiwania zgody użytkownika.

Rysunek 1. Ustawienia zgody OAuth wyświetlane przez One Tap w Chrome

(standard) Content Security Policy

Polityka bezpieczeństwa treści jest opcjonalna, ale zalecamy jej stosowanie, aby zabezpieczyć aplikację i zapobiegać atakom typu cross-site scripting (XSS). Więcej informacji znajdziesz w artykułach Wprowadzenie do CSP i CSP i XSS.

Twoja zasada bezpieczeństwa treści może zawierać co najmniej jedną dyrektywę, np. connect-src, frame-src, script-src, style-src lub default-src.

Jeśli Twój CSP zawiera:

connect-src, dodaj https://accounts.google.com/gsi/, aby umożliwić stronie wczytywanie adresu URL nadrzędnego dla punktów końcowych po stronie serwera usług Google Identity.
frame-src, dodaj https://accounts.google.com/gsi/, aby zezwolić na adres URL nadrzędny iframe przycisku Zaloguj się przez Google i jednego dotknięcia.
Dodaj dyrektywę script-src, a następnie dodaj https://accounts.google.com/gsi/client, aby zezwolić na adres URL biblioteki JavaScript Google Identity Services.
style-src, dodaj https://accounts.google.com/gsi/style, aby zezwolić na adres URL arkuszy stylów usług tożsamości Google.
Jeśli używasz dyrektywy default-src, jest ona opcją zapasową, gdy nie jest określona żadna z poprzednich dyrektyw (connect-src, frame-src, script-src ani style-src). Dodaj dyrektywę https://accounts.google.com/gsi/, aby umożliwić stronie wczytanie adresu URL nadrzędnego dla punktów końcowych usług tożsamości Google po stronie serwera.

Korzystając z funkcji connect-src, nie podawaj adresów URL poszczególnych usług GIS. Pomaga to zminimalizować liczbę awarii podczas aktualizacji GIS. Zamiast dodawać https://accounts.google.com/gsi/status użyj adresu URL nadrzędnego GIS https://accounts.google.com/gsi/.

Ten przykładowy nagłówek odpowiedzi umożliwia prawidłowe wczytanie i wykonywanie usług Google Identity:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Zasady dotyczące otwierającego z innej domeny

Aby można było tworzyć wyskakujące okienka, konieczne może być wprowadzenie zmian w Cross-Origin-Opener-Policy (COOP) dotyczących przycisku Zaloguj się przez Google i Google One Tap.

Gdy FedCM jest włączona, przeglądarka bezpośrednio renderuje wyskakujące okienka i nie trzeba wprowadzać żadnych zmian.

Jeśli jednak funkcja FedCM jest wyłączona, ustaw nagłówek COOP:

do: same-origin i
zawiera same-origin-allow-popups.

Nieustawienie odpowiedniego nagłówka powoduje przerwanie komunikacji między oknami, co prowadzi do pustego wyskakującego okienka lub podobnych błędów.