Konfiguracja

Aby dodać do swojej witryny przycisk Zaloguj się przez Google lub prośby o logowanie 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 Google Identity Services;
4. opcjonalnie skonfigurować standard Content Security Policy;
5. zaktualizować zasadę dotyczącą otwierającego z innej domeny.

Uwaga: aby skonfigurować Zaloguj się przez Google i zweryfikować tokeny identyfikatora na backendzie, musisz mieć identyfikator klienta. Identyfikator klienta wygląda tak jak w tym przykładzie: 1234567890-abc123def456.apps.googleusercontent.com

Uzyskiwanie identyfikatora klienta Google API

Aby włączyć Google Identity Services w swojej witrynie, musisz najpierw skonfigurować identyfikator klienta API Google. Aby to zrobić:

1. Otwórz stronę Klienci w konsoli Google Cloud.
2. Utwórz lub wybierz projekt w Cloud Console. Jeśli masz już projekt na potrzeby 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 utworzenie kilku projektów. Powtórz pozostałe kroki w tej sekcji w przypadku każdego projektu, którym zarządzasz.
3. Kliknij Utwórz klienta i jako Typ aplikacji wybierz Aplikacja internetowa , aby utworzyć nowy identyfikator klienta. Aby użyć istniejącego identyfikatora klienta, wybierz identyfikator 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.

   Ważne: w przypadku testów lokalnych lub programowania dodaj zarówno http://localhost jak i http://localhost:<port_number>
   Ważne: Google One Tap może być wyświetlany tylko w domenach HTTPS.

5. Opcjonalnie dane logowania mogą być zwracane za pomocą przekierowania do hostowanego przez Ciebie punktu końcowego, a nie za pomocą wywołania zwrotnego JavaScript. W takim przypadku dodaj identyfikatory URI przekierowania do pola Autoryzowane identyfikatory URI przekierowania. Identyfikatory URI przekierowania zawierają schemat, pełną i jednoznaczną nazwę hosta i ścieżkę oraz muszą być zgodne z regułami weryfikacji identyfikatorów URI przekierowania. Na przykład https://www.example.com/auth-receiver.

Dołącz identyfikator klienta do aplikacji internetowej za pomocą pól data-client_id lub client_id.

Ważne: podczas testowania za pomocą protokołu HTTP i hosta lokalnego ustaw w aplikacji internetowej nagłówek Referrer-Policy na Referrer-Policy: no-referrer-when-downgrade. Wczytywanie gsi/client z accounts.google.com to żądanie z innej domeny. Zalecamy użycie zasady Referrer-Policy strict-origin-when-cross-origin.

Konfigurowanie ekranu zgody OAuth

Zarówno logowanie przez Google, jak i uwierzytelnianie jednym dotknięciem obejmują ekran zgody, na którym użytkownicy mogą zobaczyć, która aplikacja prosi o dostęp do ich danych, o jakie dane prosi i jakie warunki obowiązują.

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

3. Na stronie Branding wypełnij formularz i kliknij przycisk "Zapisz" .

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

   3. E-mail pomocy: wyświetlany na ekranie zgody jako kontakt dla użytkowników potrzebujących pomocy oraz dla 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 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 Twoich 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 informacji o wyłączeniu odpowiedzialności zgodnej z RODO w One Tap 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 informacji o wyłączeniu odpowiedzialności zgodnej z RODO w One Tap 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ę przez Google oraz w informacji o wyłączeniu odpowiedzialności zgodnej z RODO w One Tap pod przyciskiem „Kontynuuj jako”. Musi być hostowany w autoryzowanej domenie.

4. Aby skonfigurować zakresy dla swojej aplikacji, otwórz stronę Dostęp do danych.

   1. Zakresy interfejsów API Google: zakresy umożliwiają aplikacji dostęp do prywatnych danych użytkownika. Do uwierzytelniania wystarczy domyślny zakres (e-mail, profil, openid). Nie musisz dodawać żadnych zakresów wrażliwych Zalecamy, aby prosić o zakresy przyrostowo, w momencie, gdy wymagany jest dostęp, a nie z góry.

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

Wyświetlanie ustawień OAuth podczas logowania

Jedno dotknięcie z FedCM

Podczas zgody użytkownika w Chrome wyświetlana jest domena najwyższego poziomu Autoryzowana domena. Używanie One Tap tylko w ramkach iframe z innych domen, ale z tej samej witryny jest obsługiwaną metodą.

Jedno dotknięcie bez FedCM

Podczas zgody użytkownika wyświetlana jest Nazwa aplikacji.

Rysunek 1. Ustawienia zgody OAuth wyświetlane przez One Tap 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.

Uwaga: biblioteka Google Identity Services powinna być wczytywana z adresu https://accounts.google.com/gsi/client za pomocą elementu <script> na stronie internetowej. Dzięki temu integracja zawsze będzie otrzymywać ważne aktualizacje zabezpieczeń i krytyczne poprawki dotyczące zgodności. Pamiętaj, że samodzielne hostowanie lub używanie kopii offline nie jest obsługiwanym przypadkiem użycia i może prowadzić do nieoczekiwanego działania lub przyszłych błędów integracji.

Standard Content Security Policy

Chociaż nie jest to obowiązkowe, zalecamy stosowanie standardu Content Security Policy aby zabezpieczyć aplikację i zapobiec atakom typu cross-site scripting (XSS) ataków. Więcej informacji znajdziesz w artykułach Wprowadzenie do CSP oraz CSP i XSS.

Standard Content Security Policy może zawierać jedną lub więcej dyrektyw, takich jak connect-src, frame-src, script-src, style-src lub default-src.

Jeśli standard Content Security Policy zawiera:

• dyrektywę 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 Google Identity Services.
• dyrektywę frame-src, dodaj https://accounts.google.com/gsi/, aby umożliwić adres URL nadrzędny ramek iframe jedno dotknięcie i przycisku Zaloguj się przez Google.
• dyrektywę script-src, dodaj https://accounts.google.com/gsi/client, aby umożliwić adres URL biblioteki JavaScript Google Identity Services.
• dyrektywę style-src, dodaj https://accounts.google.com/gsi/style, aby umożliwić adres URL arkuszy stylów Google Identity Services.
• dyrektywa default-src, jeśli jest używana, jest rezerwową, 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 adresu URL nadrzędnego dla punktów końcowych po stronie serwera Google Identity Services.

Podczas używania connect-src unikaj podawania poszczególnych adresów URL GIS. Pomaga to zminimalizować liczbę błędów podczas aktualizacji GIS. Na przykład 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 wczytywanie i wykonywanie 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 Zaloguj się przez Google i Google jedno dotknięcie mogą wymagać zmian w zasadzie Cross-Origin-Opener-Policy (COOP), aby można było prawidłowo tworzyć wyskakujące okienka.

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

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

• na same-origin oraz
• dodaj same-origin-allow-popups.

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