Konfiguracja

Zanim dodasz do swojego konta konfiguracja witryny OAuth i opcjonalnie konfiguracja witryny Content Security Policy

Uzyskiwanie identyfikatora klienta interfejsu API Google

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

  1. W konsoli interfejsów API Google otwórz stronę Dane logowania.
  2. Utwórz lub wybierz projekt interfejsów API Google. Jeśli masz już projekt dla użyj przycisku Zaloguj się przez Google lub Google One Tap, użyj istniejącego projektu oraz identyfikator klienta internetowego. Podczas tworzenia aplikacji produkcyjnych może być konieczne użycie kilku projektów. Powtórz pozostałe czynności z tego rozdziału w przypadku każdego projektu, którym zarządzasz.
  3. Aby utworzyć nowy identyfikator klienta, kliknij Utwórz dane logowania > Identyfikator klienta OAuth i w polu Typ aplikacji wybierz Aplikacja internetowa. Aby użyć istniejącej identyfikator klienta wybierz jeden z typów Aplikacja internetowa.

  4. Dodaj identyfikator URI swojej witryny do sekcji Autoryzowane źródła JavaScriptu. Identyfikator URI zawiera tylko schemat i w pełni kwalifikowaną nazwę hosta. Na przykład: https://www.example.com.

  5. Opcjonalnie dane logowania mogą być zwracane przez przekierowanie do punktu końcowego za pomocą wywołania zwrotnego JavaScriptu. W takim przypadku dodaj identyfikatory URI przekierowania do sekcji Autoryzowane identyfikatory URI przekierowania. Identyfikatory URI przekierowania obejmują schemat, pełną i jednoznaczną nazwę hosta oraz ścieżkę, które muszą być zgodne z Reguły weryfikacji identyfikatora URI przekierowania. Na przykład: https://www.example.com/auth-receiver.

.

Zarówno funkcja Zaloguj się przez Google, jak i uwierzytelnienie jednym dotknięciem mają ekran zgody. który informuje użytkowników, jak aplikacja prosi o dostęp do ich danych, o dane, o które prosi, i obowiązujące warunki.

  1. Otwórz stronę Ekran zgody OAuth Interfejsy API Usługi w Google Developer Console.
  2. Jeśli pojawi się taka prośba, wybierz utworzony przed chwilą 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 pod 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 zespołu pomocy: wyświetlany na ekranie zgody, aby użytkownicy mogli się kontaktować z pomocą techniczną, a także wiadomości G Administratorzy pakietu oceniający dostęp swoich użytkowników do Twojej aplikacji. Ten 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. W przypadku uwierzytelniania zakres domyślny (adres e-mail, profil, identyfikator OpenID) wystarczą, nie trzeba dodawać żadnych zakresy wrażliwe. 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 używanie autoryzowanych domen tylko aplikacjom, które uwierzytelniają się za pomocą OAuth. Linki do aplikacji muszą być hostowane w autoryzowanych domenach. Więcej informacji

    6. Link do strony głównej aplikacji: wyświetlany przy logowaniu się za zgodą Google. ekranu i jednym kliknięciem informacji o wyłączeniu odpowiedzialności zgodnym z RODO w „Kontynuuj jako” Przycisk Musi być hostowana 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”. muszą być hostowane w autoryzowanej domenie;

    8. 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”. Muszą być hostowane w autoryzowanej domenie.

  4. Sprawdź „Stan weryfikacji”, jeśli zgłoszenie wymaga weryfikacji, kliknij przycisk „Prześlij do weryfikacji”. aby przesłać zgłoszenie weryfikacji. Więcej informacji znajdziesz w wymaganiach dotyczących weryfikacji OAuth.

Wyświetlanie ustawień OAuth podczas logowania

Jednym dotknięciem w FedCM

Ustawienia uzyskiwania zgody OAuth wyświetlane przez Chrome One Tap przy użyciu FedCM

Autoryzowana domena najwyższego poziomu jest wyświetlana podczas uzyskiwania zgody użytkownika w tych usługach: Chrome.

Jednym dotknięciem bez FedCM

Ustawienia uzyskiwania zgody OAuth wyświetlane jednym dotknięciem

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

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

(standard) Content Security Policy

Polityka bezpieczeństwa treści jest opcjonalna, ale zalecamy jej stosowanie, aby chronić aplikację i zapobiegać atakom typu cross-site scripting (XSS). Aby dowiedzieć się więcej, przeczytaj Wprowadzenie do CSP oraz CSP i XSS.

Polityka bezpieczeństwa treści może zawierać jedną lub więcej dyrektyw, takich jak connect-src, frame-src, script-src, style-src lub default-src.

Jeśli Twój dostawca usług chroniących przed atakami 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.
  • W elemencie 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.
  • Dyrektywa script-src, dodaj https://accounts.google.com/gsi/client do zezwolić na adres URL biblioteki JavaScript usług Google Identity Services.
  • 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.
  • dyrektywa default-src (jeśli jest używana) powoduje wystąpienie kreacji zastępczej, jeśli dowolny poprzedzające dyrektywy (connect-src, frame-src, script-src lub style-src) nie został określony, dodaj https://accounts.google.com/gsi/ do zezwól stronie na wczytanie adresu URL nadrzędnego dla usług tożsamości Google po stronie serwera; i punktów końcowych.

Unikaj podawania poszczególnych adresów URL GIS podczas korzystania z elementu connect-src. Pomaga to zminimalizować błędów podczas aktualizacji GIS. Na przykład zamiast dodawać https://accounts.google.com/gsi/status używa nadrzędnego adresu URL GIS https://accounts.google.com/gsi/

Ten przykładowy nagłówek odpowiedzi umożliwia wczytanie i wykonanie usługi tożsamości Google udało się:

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ć wprowadzenia 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 usługa FedCM jest wyłączona, ustaw nagłówek COOP:

  • do: same-origin i
  • obejmują same-origin-allow-popups.

Nieprawidłowe ustawienie nagłówka powoduje przerwanie komunikacji między oknami, co prowadzi do pustego wyskakującego okienka lub inne podobne błędy.