Konfiguracja

Zanim dodasz do witryny logowanie się przez Google, jedno dotknięcie lub logowanie automatyczne, skonfiguruj konfigurację OAuth i opcjonalnie skonfiguruj politykę bezpieczeństwa treści witryny.

Uzyskiwanie identyfikatora klienta interfejsu API Google

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

  1. Otwórz stronę Dane logowania w konsoli interfejsów API Google.
  2. Utwórz lub wybierz projekt interfejsów API Google. Jeśli masz już projekt przycisku Zaloguj się przez Google lub Google One Tap, użyj go i identyfikatora klienta internetowego. Podczas tworzenia aplikacji produkcyjnych możesz potrzebować wielu projektów. W przypadku każdego projektu, którym zarządzasz, powtórz pozostałe kroki z tej sekcji.
  3. Kliknij Utwórz dane logowania > Identyfikator klienta OAuth i jako Typ aplikacji wybierz Aplikacja internetowa, aby utworzyć nowy identyfikator klienta. Aby użyć istniejącego identyfikatora klienta, wybierz jeden z typów Aplikacja internetowa.
  4. Dodaj identyfikator URI witryny do Autoryzowane źródła JavaScript. Identyfikator URI zawiera tylko schemat i pełną i jednoznaczną nazwę hosta. Przykład: https://www.example.com.

  5. 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 pola Autoryzowane identyfikatory URI przekierowania. Identyfikatory URI przekierowania obejmują schemat, pełną i jednoznaczną nazwę hosta i ścieżkę. Muszą być zgodne z regułami weryfikacji identyfikatora URI przekierowania. Przykład: https://www.example.com/auth-receiver.

Zarówno uwierzytelnianie przez funkcję Zaloguj się przez Google, jak i uwierzytelnianie jednym dotknięciem zawierają ekran zgody, na którym aplikacja prosi o dostęp do danych użytkownika, o jakie dane są potrzebne i jakie obowiązują warunki.

  1. Otwórz stronę Ekran akceptacji OAuth w sekcji Interfejsy API i usługi w Google Developer Console.
  2. Jeśli pojawi się taka prośba, wybierz utworzony przed chwilą projekt.
  3. Na stronie „Ekran zgody OAuth” wypełnij formularz i kliknij przycisk „Zapisz”.

    1. Nazwa aplikacji: nazwa aplikacji, która prosi o zgodę. Nazwa powinna dokładnie odzwierciedlać Twoją aplikację i być spójna z nazwą, 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 i w ustawieniach konta, ale nie w oknie dialogowym włączanym jednym dotknięciem.

    3. Adres e-mail zespołu pomocy: wyświetlany na ekranie zgody, aby uzyskać pomoc dla użytkowników lub dla administratorów G Suite oceniających dostęp użytkowników do Twojej aplikacji. Ten adres e-mail jest wyświetlany na ekranie zgody Zaloguj się przez Google, gdy użytkownik kliknie nazwę aplikacji.

    4. Zakresy dla interfejsów API Google: zakresy umożliwiają aplikacji dostęp do prywatnych danych użytkownika. Do uwierzytelniania wystarczy domyślny zakres (adres e-mail, profil, identyfikator openid) – nie musisz dodawać żadnych wrażliwych zakresów. Sprawdzoną metodą jest wysyłanie próśb o zakresy stopniowo w momencie, gdy jest wymagany dostęp, a nie z góry. Więcej informacji

    5. Autoryzowane domeny: aby chronić Ciebie i Twoich użytkowników, Google zezwala na korzystanie z autoryzowanych domen tylko aplikacjom, które uwierzytelniają się przy użyciu protokołu OAuth. Linki Twoich aplikacji muszą być hostowane w autoryzowanych domenach. Więcej informacji

    6. Link do strony głównej aplikacji: wyświetlany na ekranie z prośbą o zgodę za pomocą funkcji Zaloguj się przez Google oraz informacje o wyłączeniu odpowiedzialności zgodne z RODO, które włącza się jednym kliknięciem, pod przyciskiem „Kontynuuj jako”. Musi być hostowany w autoryzowanej domenie.

    7. Link do Polityki prywatności w aplikacji: wyświetlany na ekranie zgody Zaloguj się przez Google oraz informacje o wyłączeniu odpowiedzialności zgodne z RODO, które włącza się jednym kliknięciem, pod przyciskiem „Kontynuuj jako”. Musi być hostowany w autoryzowanej domenie.

    8. Link do Warunków korzystania z usługi (opcjonalny): wyświetla się na ekranie zgody Zaloguj się przez Google i zgodnych z RODO informacjami o wyłączeniu odpowiedzialności (dostępnym jednym kliknięciem) pod przyciskiem „Kontynuuj jako”. Musi być hostowany w autoryzowanej domenie.

  4. Sprawdź „Stan weryfikacji”. Jeśli zgłoszenie wymaga weryfikacji, kliknij przycisk „Prześlij do weryfikacji”, aby przesłać zgłoszenie do weryfikacji. Więcej informacji znajdziesz w artykule Wymagania dotyczące weryfikacji OAuth.

Wyświetlanie ustawień OAuth podczas logowania

jedno dotknięcie w FedCM

Ustawienia uzyskiwania zgody OAuth wyświetlane przez Chrome One Tap w FedCM

Podczas udzielania zgody przez użytkownika w Chrome wyświetla się Autoryzowana domena najwyższego poziomu.

Jedno dotknięcie bez FedCM

Ustawienia uzyskiwania zgody OAuth wyświetlane jednym dotknięciem

Podczas wyrażania zgody przez użytkownika wyświetlana jest nazwa aplikacji.

Rysunek 1. Ustawienia zgody OAuth wyświetlane jednym kliknięciem w Chrome.

(standard) Content Security Policy

Chociaż jest to opcjonalne, zalecamy stosowanie Content Security Policy, aby zabezpieczyć aplikację i zapobiec atakom XSS. Więcej informacji znajdziesz we wprowadzeniu do CSP oraz CSP i XSS.

Zasada bezpieczeństwa treści może zawierać 1 lub więcej dyrektyw, na przykład connect-src, frame-src, script-src, style-src lub default-src.

Jeśli Twój CSP zawiera:

  • connect-src, dodaj element https://accounts.google.com/gsi/, aby umożliwić stronie wczytanie nadrzędnego adresu URL punktów końcowych po stronie serwera usług tożsamości Google.
  • frame-src, dodaj element https://accounts.google.com/gsi/, aby zezwolić na nadrzędny adres URL elementów iframe z przyciskami jednym dotknięciem i Zaloguj się przez Google.
  • script-src, dodaj https://accounts.google.com/gsi/client, aby zezwolić na adres URL biblioteki JavaScript usług tożsamości Google.
  • style-src, dodaj https://accounts.google.com/gsi/style, by zezwolić na adres URL arkuszy stylów usług tożsamości Google.
  • Jeśli jest używana, dyrektywa default-src zawiera kreację zastępczą, jeśli żadna z poprzednich dyrektyw (connect-src, frame-src, script-src lub style-src) nie jest określona. Dodaj https://accounts.google.com/gsi/, aby umożliwić stronie wczytanie nadrzędnego adresu URL na potrzeby punktów końcowych po stronie serwera usług tożsamości Google.

Unikaj podawania poszczególnych adresów URL GIS, gdy używasz polecenia connect-src. Pomaga to zminimalizować liczbę błędów podczas aktualizacji GIS. Na przykład zamiast dodawać https://accounts.google.com/gsi/status użyj nadrzędnego adresu URL GIS https://accounts.google.com/gsi/.

Ten przykładowy nagłówek odpowiedzi umożliwia usługom Google Identity Services wczytywanie i wykonywanie:

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 otwierające połączenia z innych źródeł

Przycisk Zaloguj się przez Google i Google One Tap mogą wymagać wprowadzenia zmian w Cross-Origin-Opener-Policy (COOP), aby można było tworzyć wyskakujące okienka.

Po włączeniu FedCM przeglądarka bezpośrednio renderuje wyskakujące okienka i nie wymaga wprowadzania żadnych zmian.

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

  • do same-origin i
  • uwzględnij same-origin-allow-popups.

Nieprawidłowy nagłówek przerywa komunikację między oknami, co powoduje wyświetlenie pustego wyskakującego okienka lub podobne błędy.