Zanim dodasz do witryny logowanie przez Google, logowanie jednokrotne lub automatyczne, skonfiguruj konfigurację OAuth i opcjonalnie skonfiguruj politykę treści witryny.
Uzyskiwanie identyfikatora klienta Google API
Aby włączyć funkcję Zaloguj się przez Google na swojej stronie, musisz najpierw skonfigurować identyfikator klienta Google API. Aby to zrobić:
- Otwórz stronę Dane logowania w konsoli interfejsów API Google.
- Utwórz lub wybierz projekt interfejsów API Google. Jeśli masz już projekt dotyczący 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 wielu projektów, a pozostałe kroki będą powtarzane dla każdego projektu, którym zarządzasz.
- Kliknij Utwórz dane logowania > Identyfikator klienta OAuth, a jako Typ aplikacji wybierz Aplikacja internetowa, aby utworzyć nowy identyfikator klienta. Aby użyć dotychczasowego identyfikatora klienta, wybierz jeden z typów Aplikacja internetowa.
Dodaj identyfikator URI witryny do autoryzowanych źródeł JavaScript. Identyfikator URI zawiera tylko schemat i w pełni kwalifikowaną nazwę hosta. Na przykład:
https://www.example.com.Opcjonalnie dane logowania można zwrócić przez przekierowanie do hostowanego punktu końcowego, a nie przez wywołanie zwrotne JavaScript. W takim przypadku dodaj identyfikatory URI przekierowań do Autoryzowanych identyfikatorów URI przekierowania. Identyfikatory URI przekierowania obejmują schemat, w pełni kwalifikowaną nazwę hosta i ścieżkę, a także muszą być zgodne z regułami weryfikacji identyfikatora URI przekierowania. Na przykład:
https://www.example.com/auth-receiver.
Konfigurowanie ekranu zgody OAuth
Uwierzytelnianie w ramach funkcji Zaloguj się przez Google i One Tap obejmuje ekran zgody, który informuje użytkowników, którzy proszą o dostęp do swoich danych, oraz o jakie dane i jakie warunki mają zostać wysłane.
- Otwórz stronę Ekran zgody OAuth w konsoli interfejsów API Google.
- Jeśli pojawi się taka prośba, wybierz utworzony przed chwilą projekt.
Na stronie „Ekran zgody OAuth” wypełnij formularz i kliknij przycisk „Zapisz”.
Nazwa aplikacji: nazwa aplikacji, która prosi o zgodę. Nazwa powinna dokładnie odzwierciedlać charakter aplikacji i być zgodna z nazwą aplikacji widoczną dla użytkowników. Nazwa aplikacji pojawi się w oknie jednym kliknięciem.
Logo aplikacji: obraz na ekranie zgody, który pomoże użytkownikom rozpoznać Twoją aplikację. Logo jest widoczne na ekranie zgody Zaloguj się przez Google i w ustawieniach konta, a nie w oknie dialogowym jednym dotknięciem.
Adres e-mail zespołu pomocy: wyświetlany na ekranie zgody dla użytkowników potrzebujących pomocy i dla administratorów G Suite, którzy oceniają dostęp użytkowników do aplikacji. Ten adres e-mail będzie widoczny dla użytkowników na ekranie zgody Zaloguj się przez Google, gdy kliknie on nazwę aplikacji.
Zakresy interfejsów API Google: umożliwiają aplikacjom dostęp do prywatnych danych Google. W przypadku uwierzytelniania wystarczy domyślny zakres (e-mail, profil, openid). Nie musisz dodawać żadnych poufnych zakresów. Sprawdzoną metodą jest stopniowe wysyłanie żądań zakresów w momencie, gdy jest wymagany, a nie z góry. Więcej informacji
Autoryzowane domeny: aby chronić Ciebie i Twoich użytkowników, Google zezwala na używanie autoryzowanych domen tylko tym aplikacjom, które uwierzytelniają się za pomocą protokołu OAuth. Linki do Twoich aplikacji muszą być hostowane w autoryzowanych domenach. Więcej informacji
Link do strony głównej aplikacji: wyświetlany na ekranie z prośbą o zgodę na wykorzystanie danych przy użyciu funkcji Zaloguj się przez Google oraz informacje o wyłączeniu odpowiedzialności zgodne z RODO i przycisku „Kontynuuj jako”. Musi być hostowana w autoryzowanej domenie.
Link do Polityki prywatności aplikacji: wyświetlany na ekranie zgody Zaloguj się przez Google i przez kliknięcie przycisku „Kontynuuj jako”, aby wyświetlać informacje o wyłączeniu odpowiedzialności zgodne z RODO. Musi być hostowana w autoryzowanej domenie.
Link do Warunków korzystania z aplikacji (opcjonalnie): przycisk „Kontynuuj jako” widoczny na ekranie zgody na logowanie się przez Google oraz informacje o wyłączeniu odpowiedzialności zgodne z RODO. Musi być hostowana w autoryzowanej domenie.
Rysunek 1. Pola ekranu uwierzytelniania OAuth wyświetlane w interfejsie jednym dotknięciem
Jeśli aplikacja wymaga weryfikacji, kliknij przycisk „Prześlij do weryfikacji”, aby przesłać ją do weryfikacji. Więcej informacji znajdziesz w artykule Wymagania weryfikacyjne OAuth.
(standard) Content Security Policy
Zalecamy używanie polityki bezpieczeństwa treści w celu zabezpieczenia aplikacji i zapobiegania atakom typu cross-site scripting (XSS). Więcej informacji zawierają Wprowadzenie do CSP oraz CSP i XSS.
Polityka treści może zawierać co najmniej jedną dyrektywę, np. connect-src, frame-src, script-src lub style-src.
Jeśli Twoja platforma CSP zawiera:
connect-src, dodajhttps://accounts.google.com/gsi/, aby zezwolić na wczytywanie nadrzędnego adresu URL na potrzeby punktów końcowych usługi Google Identity Services po stronie serwera.frame-src, dodajhttps://accounts.google.com/gsi/, aby zezwolić na nadrzędny adres URL elementów iframe przycisku jednym kliknięciem i logowania przez Google.script-src, dodajhttps://accounts.google.com/gsi/client, aby umożliwić dostęp do adresu URL biblioteki JavaScript usług tożsamości Google.style-src, dodajhttps://accounts.google.com/gsi/style, aby zezwolić na adres URL arkuszy stylów usług tożsamości Google.
Jeśli używasz connect-src, nie podawaj adresów URL GIS. Pomaga to zminimalizować błędy przy aktualizacji GIS. Na przykład zamiast dodawać atrybut 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 ładowanie i wykonywanie kodu:
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 otwierania zasobów z innych domen
Aby przycisk Logowanie przez Google i Google One Tap działały prawidłowo w wyskakujących okienkach, nie możesz ustawić nagłówka HTTP Cross-Origin-Opener-Policy na same-origin, ponieważ spowoduje to przerwanie komunikacji między oknami i wyświetlenie pustego wyskakującego okienka lub podobnych błędów.
Wartość same-origin-allow-popups jest zalecana w przypadku nagłówka Cross-Origin-Opener-Policy na stronach, na których wyświetlany jest przycisk Zaloguj się przez Google lub Google One Tap.