Konfiguracja

Aby dodać do witryny przycisk Zaloguj się przez Google lub prośby o zalogowanie się jednym dotknięciem i logowanie automatyczne, musisz najpierw:

1. uzyskać identyfikator klienta OAuth 2.0,
2. skonfigurować branding i ustawienia OAuth,
3. wczytać bibliotekę klienta usług Google Identity Services,
4. opcjonalnie skonfigurować standard Content Security Policy,
5. aktualizowanie zasady dotyczącej otwierającego z innej domeny,

Uzyskiwanie identyfikatora klienta Google API

Aby włączyć usługi Google Identity Services w swojej witrynie, musisz najpierw skonfigurować identyfikator klienta Google API. Aby to zrobić, wykonaj te czynności:

1. Otwórz stronę Klienci w konsoli Google Cloud.
2. Utwórz lub wybierz projekt w konsoli Cloud. 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ć potrzebnych kilka projektów. Powtórz pozostałe kroki w tej sekcji dla każdego projektu, którym zarządzasz.
3. Kliknij Utwórz klienta, a jako Typ aplikacji wybierz Aplikacja internetowa, aby utworzyć nowy identyfikator klienta. Aby użyć istniejącego identyfikatora klienta, wybierz jeden z identyfikatorów typu Aplikacja internetowa.

4. Dodaj identyfikator URI swojej witryny do pola Autoryzowane źródła JavaScript. Identyfikator URI zawiera tylko schemat i pełną i jednoznaczną 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, zamiast za pomocą wywołania zwrotnego JavaScript. W takim przypadku dodaj identyfikatory URI przekierowania do sekcji Autoryzowane identyfikatory URI przekierowania. Identyfikatory URI przekierowania obejmują schemat, pełną i jednoznaczną nazwę hosta i ścieżkę oraz muszą być zgodne z zasadami weryfikacji identyfikatorów URI przekierowania. Na przykład:https://www.example.com/auth-receiver.

Uwzględnij identyfikator klienta w aplikacji internetowej, korzystając z pól data-client_id lub client_id.

Konfigurowanie ekranu zgody OAuth

Zarówno logowanie przez Google, jak i uwierzytelnianie jednym kliknięciem obejmują ekran zgody, który informuje użytkowników o aplikacji proszącej o dostęp do ich danych, o rodzaju danych, o które są proszeni, oraz o obowiązujących warunkach.

1. Otwórz stronę Branding w sekcji Platforma uwierzytelniania Google w konsoli Cloud.
2. Jeśli pojawi się taka prośba, wybierz utworzony projekt.

3. Na stronie marki 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ć zgodna 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 wyświetlane na ekranie zgody „Zaloguj się przez Google” i w ustawieniach konta, ale nie jest wyświetlane w oknie dialogowym jedno dotknięcie.

   3. Adres e-mail pomocy: wyświetlany na ekranie zgody jako kontakt dla użytkowników potrzebujących pomocy oraz administratorów Google Workspace, którzy oceniają dostęp do Twojej aplikacji dla swoich użytkowników. Ten adres e-mail jest wyświetlany użytkownikom na ekranie zgody na Zaloguj się przez Google, gdy klikną nazwę aplikacji.

   4. Autoryzowane domeny: aby chronić Ciebie i Twoich użytkowników, Google pozwala na używanie autoryzowanych domen tylko aplikacjom, które uwierzytelniają się za pomocą protokołu 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” oraz w informacjach o wyłączeniu odpowiedzialności zgodnych z GDPR w przypadku logowania jednym kliknięciem pod przyciskiem „Kontynuuj jako”. Musi być hostowany w autoryzowanej domenie.

   6. Link do polityki prywatności aplikacji: wyświetlany na ekranie zgody Zaloguj się przez Google oraz w informacjach o wyłączeniu odpowiedzialności zgodnych z RODO w przypadku logowania jednym dotknięciem pod przyciskiem „Kontynuuj jako”. Musi być hostowany w autoryzowanej domenie.

   7. Link do Warunków korzystania z aplikacji (opcjonalnie): wyświetlany na ekranie zgody „Zaloguj się za pomocą Google” oraz w informacjach o wyłączeniu odpowiedzialności zgodnych z RODO, które pojawiają się po kliknięciu przycisku „Kontynuuj jako”. Musi być hostowany w autoryzowanej domenie.

4. Otwórz stronę Dostępu do danych, aby skonfigurować zakresy dla aplikacji.

   1. Zakresy interfejsów API Google: zakresy umożliwiają aplikacji dostęp do prywatnych danych użytkownika. Do uwierzytelniania wystarczy domyślny zakres (email, profile, openid). Nie musisz dodawać żadnych zakresów wrażliwych. Zalecamy, aby zakresy żądań były przyrostowe i wysyłane w momencie, gdy dostęp jest wymagany, a nie z wyprzedzeniem.

5. Sprawdź „Stan weryfikacji”. Jeśli Twoja aplikacja wymaga weryfikacji, kliknij przycisk „Prześlij do weryfikacji”, aby przesłać ją do weryfikacji. Szczegółowe informacje znajdziesz w wymaganiach dotyczących weryfikacji OAuth.

Wyświetlanie ustawień OAuth podczas logowania

Rysunek 1. Ustawienia zgody protokołu OAuth wyświetlane przez jedno dotknięcie w Chrome.

Wczytywanie biblioteki klienta

Pamiętaj, aby wczytać bibliotekę klienta Google Identity Services na każdej stronie, na której użytkownik może się zalogować. Użyj tego fragmentu kodu:

<script src="https://accounts.google.com/gsi/client" async></script>

Możesz zoptymalizować szybkość wczytywania stron, jeśli wczytasz skrypt za pomocą atrybutu async.

Listę metod i właściwości obsługiwanych przez bibliotekę znajdziesz w dokumentacji interfejsu API HTML i JavaScript.

(standard) Content Security Policy

Chociaż standard Content Security Policy jest opcjonalny, zalecamy jego stosowanie, aby zabezpieczyć aplikację i zapobiec atakom typu cross-site scripting (XSS). Więcej informacji znajdziesz w tym artykule i w tym artykule.

Zasady bezpieczeństwa treści mogą zawierać co najmniej 1 dyrektywę, np. connect-src, frame-src, script-src, style-src lub default-src.

Jeśli Twoja strategia CSP zawiera:

• connect-src dyrektywa, dodaj https://accounts.google.com/gsi/, aby zezwolić stronie na wczytywanie adresu URL elementu nadrzędnego dla punktów końcowych po stronie serwera Google Identity Services.
• frame-src, dodaj https://accounts.google.com/gsi/, aby zezwolić na adres URL elementu nadrzędnego elementów iframe przycisku „Zaloguj się przez Google” i funkcji „Zaloguj się jednym dotknięciem”.
• script-src, dodaj https://accounts.google.com/gsi/client, aby zezwolić na adres URL biblioteki JavaScript usług Google Identity Services.
• style-src dyrektywa, dodaj https://accounts.google.com/gsi/style, aby zezwolić na adres URL arkuszy stylów Usług tożsamości Google.
• Dyrektywa default-src, jeśli jest używana, jest rezerwowa, gdy nie określono żadnej z poprzednich dyrektyw (connect-src, frame-src, script-src lub style-src). Dodaj https://accounts.google.com/gsi/, aby umożliwić stronie wczytywanie nadrzędnego adresu URL dla punktów końcowych po stronie serwera Google Identity Services.

Jeśli używasz connect-src, unikaj podawania poszczególnych adresów URL GIS. Pomaga to zminimalizować liczbę błędów podczas aktualizacji GIS. Zamiast dodawać na przykład 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 prawidłowe wczytanie i wykonanie usług Google Identity Services:

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 dotycząca otwierającego z innej domeny

Przycisk Logowanie przez Google i logowanie jednym dotknięciem Google mogą wymagać zmian w zasadach Cross-Origin-Opener-Policy (COOP), aby można było skutecznie tworzyć wyskakujące okienka.

Gdy FedCM jest włączony, przeglądarka bezpośrednio renderuje wyskakujące okienka i nie są potrzebne żadne zmiany.

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

• do same-origin i
• uwzględniać same-origin-allow-popups.

Nieprawidłowe ustawienie nagłówka przerywa komunikację między oknami, co powoduje wyświetlanie pustego wyskakującego okienka lub podobne błędy.