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ć Logowanie przez Google w swojej witrynie, musisz najpierw skonfigurować identyfikator klienta Google API. 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 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 wiele 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 w polu Typ aplikacji wybierz Aplikacja internetowa, aby utworzyć nowy identyfikator klienta. Aby użyć dotychczasowego identyfikatora klienta, wybierz typ Aplikacja internetowa.

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

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 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 za pomocą jednego kliknięcia obejmują ekran zgody, na którym użytkownicy mogą zobaczyć, jakie dane prosi o aplikacja, jakiego rodzaju dane są potrzebne i jakie są zasady.

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 przez siebie projekt.

3. Na stronie „Ekran zgody OAuth” wypełnij formularz i kliknij przycisk „Zapisz”.

   1. Nazwa aplikacji: nazwa aplikacji, która prosi o zgodę na wykorzystanie danych. Nazwa powinna dokładnie odzwierciedlać Twoją 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 aplikacji. Logo jest widoczne na ekranie zgody Zaloguj się przez Google i w ustawieniach konta, ale nie jest wyświetlane w oknie dialogowym jednym dotknięciem.

   3. Adres e-mail pomocy: wyświetlany na ekranie akceptacji, aby mogli się oni kontaktować z pomocą techniczną użytkowników i administratorzy G Suite oceniający dostęp użytkowników do Twojej aplikacji. Adres e-mail jest widoczny dla użytkowników na ekranie logowania z użyciem 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 wystarcza domyślny zakres (e-mail, profil, openid), nie musisz dodawać żadnych zakresów wrażliwych. Zwykle zaleca się, aby prośby o zakresy wysyłać stopniowo, w momencie, gdy jest potrzebny dostęp, a nie z wyprzedzeniem. Więcej informacji

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

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

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

   8. Link do warunków korzystania z aplikacji (opcjonalny): widoczny na ekranie zgody Zaloguj się przez Google i wyświetlonym jednym kliknięciem informacji o wyłączeniu odpowiedzialności zgodnego z RODO pod przyciskiem „Kontynuuj jako”. Musi być hostowany w autoryzowanej domenie.

4. 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 artykule Wymagania dotyczące weryfikacji OAuth.

Wyświetlanie ustawień OAuth podczas logowania

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

(standard) Content Security Policy

Zasady bezpieczeństwa treści są opcjonalne, ale zalecamy ich stosowanie, aby zabezpieczyć aplikację przed atakami 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 1 polecenie, 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.
• Do dyrektywy frame-src dodaj https://accounts.google.com/gsi/, aby zezwolić na adres URL nadrzędnego elementu iframe przycisku Zaloguj się przez Google i jednego dotknięcia.
• script-src, dodaj https://accounts.google.com/gsi/client, aby zezwolić na adres URL biblioteki JavaScript usług tożsamości Google.
• W sekcji style-src dodaj dyrektywę 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ć błędy przy 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 wczytywanie 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/;

Zasada otwierająca z różnych domen

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

Gdy usługa FedCM jest włączona, przeglądarka bezpośrednio renderuje wyskakujące okienka i nie są wymagane żadne zmiany.

Jeśli jednak usługa 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.