Konfiguracja

Aby dodać do swojej 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ć ustawienia i markę OAuth;
3. wczytać bibliotekę klienta Google Identity Services,
4. opcjonalnie skonfigurować Content Security Policy i
5. zaktualizowano zasady dotyczące otwierającego z innej domeny

Uwaga: aby skonfigurować logowanie z Google i weryfikować tokeny tożsamości na zapleczu, musisz mieć identyfikator klienta. Identyfikator klienta wygląda na przykład tak: 1234567890-abc123def456.apps.googleusercontent.com

Uzyskiwanie identyfikatora klienta Google API

Aby włączyć usługi tożsamości Google w swojej witrynie, musisz najpierw skonfigurować identyfikator klienta Google API. Aby to zrobić:

1. Otwórz .
2. Utwórz lub wybierz projekt . 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 użycie kilku projektów. Powtórz pozostałe czynności z tej sekcji w przypadku każdego projektu, którym zarządzasz.
3. Aby utworzyć nowy identyfikator klienta, kliknij Utwórz klienta, a w sekcji Typ aplikacji wybierz Aplikacja internetowa. 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.

   Ważna uwaga: do testów lokalnych lub programowania dodaj zarówno http://localhost, jak i http://localhost:<port_number>
   Ważna uwaga: usługa Google One Tap może być wyświetlana tylko w domenach HTTPS.

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.

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

Ważne: podczas testowania za pomocą http i localhost ustaw nagłówek Referrer-Policy w aplikacji internetowej na Referrer-Policy: no-referrer-when-downgrade.

Konfigurowanie ekranu akceptacji OAuth

Zarówno logowanie się przez Google, jak i uwierzytelnianie jednym kliknięciem obejmują ekran zgody, na którym użytkownicy mogą zobaczyć, jakie dane prosi o aplikacja, jakie są to dane i jakie warunki obowiązują.

1. Otwórz sekcję w sekcjina platformie Google Auth.
2. Jeśli pojawi się taka prośba, wybierz utworzony przez siebie projekt.

3. Na stronie 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ć 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 Twojej aplikacji. Logo jest widoczne na ekranie zgody na logowanie się przez Google oraz w ustawieniach konta, ale nie jest widoczne w oknie dialogowym „Jedno kliknięcie”.

   3. Adres e-mail pomocy: wyświetlany na ekranie zgody jako kontakt dla użytkowników potrzebujących pomocy oraz dla administratorów G Suite, którzy oceniają dostęp do Twojej aplikacji dla swoich użytkowników. Ten adres e-mail jest widoczny dla użytkowników na ekranie logowania z użyciem Google, gdy użytkownik kliknie nazwę aplikacji.

   4. Autoryzowane domeny: aby chronić Ciebie i Twoich użytkowników, Google zezwala na używanie autoryzowanych domen tylko aplikacjom, które korzystają z 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” 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.

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

   7. Link do Warunków korzystania z aplikacji (opcjonalnie): wyświetlany na ekranie logowania z Google. Zawiera informacje o zrzeczeniu się odpowiedzialności zgodne z RODO, które użytkownik musi zaakceptować, zanim będzie mógł kliknąć „Dalej”. Musi być hostowany w autoryzowanej domenie.

4. Aby skonfigurować zakresy dla aplikacji, otwórz .

   1. Zakresy uprawnień interfejsów API Google: zakresy uprawnień pozwalają aplikacji na dostęp do prywatnych danych użytkownika. W przypadku uwierzytelniania wystarcza zakres domyślny (e-mail, profil, openid). Nie musisz dodawać żadnych zakresów wrażliwych. Zwykle zaleca się stopniowe zwiększanie zakresów w momencie, gdy jest to konieczne, 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. Więcej informacji znajdziesz w wymaganiach dotyczących weryfikacji OAuth.

Wyświetlanie ustawień OAuth podczas logowania

Logowanie jednym dotknięciem za pomocą FedCM

Domenę autoryzowaną najwyższego poziomu wyświetla się w Chrome podczas uzyskiwania zgody użytkownika. Tylko korzystanie z One Tap w ramach różnych domen, ale w ramach tej samej witryny w ramach iframe jest obsługiwaną metodą.

Jedno dotknięcie bez FedCM

Nazwa aplikacji jest wyświetlana podczas uzyskiwania zgody użytkownika.

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

Wczytywanie biblioteki klienta

Pamiętaj, aby wczytywać 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, wczytując 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

Zasady bezpieczeństwa treści są opcjonalne, ale zalecamy ich stosowanie, aby chronić 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 jedną dyrektywę, np. connect-src, frame-src, script-src, style-src lub default-src.

Jeśli Twój nagłówek CSP zawiera:

• connect-src, dodaj https://accounts.google.com/gsi/, aby umożliwić stronie wczytywanie adresu URL nadrzędnego dla punktów końcowych Google Identity Services po stronie serwera.
• 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.
• Dodaj dyrektywę script-src, a następnie dodaj https://accounts.google.com/gsi/client, aby zezwolić na adres URL biblioteki JavaScript Google Identity Services.
• style-src, dodaj 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 strona mogła wczytać adres URL nadrzędnego dla punktów końcowych Google Identity Services po stronie serwera.

Korzystając z funkcji connect-src, nie podawaj adresów URL poszczególnych usług GIS. Pomaga to zminimalizować awarie 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 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/;

Zasady dotyczące otwierającego z innej domeny

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 FedCM jest włączony, przeglądarka bezpośrednio renderuje wyskakujące okienka i nie trzeba wprowadzać żadnych zmian.

Jeśli jednak funkcja 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.