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.

Skonfiguruj ekran zgody OAuth

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

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.