Konfiguracja

Aby autoryzować dostęp do interfejsów API Google w aplikacji internetowej za pomocą biblioteki JavaScript usług Google Identity (google.accounts.oauth2), musisz najpierw:

  1. Uzyskaj identyfikator klienta OAuth 2.0.
  2. skonfigurować ekran zgody OAuth i zakresy,
  3. Wczytaj bibliotekę klienta.
  4. Opcjonalnie skonfiguruj standard Content Security Policy (CSP) i zasady Cross-Origin Opener Policy (COOP).

Uzyskiwanie identyfikatora klienta Google API

Aby włączyć autoryzację konta Google w swojej witrynie, musisz najpierw skonfigurować identyfikator klienta interfejsu API Google. Wykonaj te czynności:

  1. Otwórz stronę Klienci w konsoli Google Cloud.
  2. Utwórz lub wybierz projekt w konsoli Cloud. Podczas tworzenia aplikacji produkcyjnych może być konieczne utworzenie kilku projektów. Powtórz pozostałe kroki opisane w tej sekcji w przypadku każdego zarządzanego projektu.
  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 jeden z identyfikatorów typu Aplikacja internetowa.

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

  5. Jeśli używasz modelu kodu autoryzacji z ux_mode: 'redirect' (lub wymieniasz kody autoryzacji w punkcie końcowym backendu), dodaj identyfikatory URI przekierowania do Autoryzowanych identyfikatorów URI przekierowania. Identyfikatory URI przekierowania obejmują schemat, pełną nazwę hosta i ścieżkę oraz muszą być zgodne z regułami weryfikacji identyfikatorów URI przekierowania. Na przykład: https://www.example.com/oauth2callback.

Po zakończeniu konfiguracji zapisz utworzony identyfikator klienta. Tę wartość przekażesz we właściwości client_id podczas inicjowania initCodeClient() lub initTokenClient(). (Zostanie też utworzony tajny klucz klienta, który należy zachować w tajemnicy i używać tylko do operacji wymiany tokenów po stronie serwera).

Gdy aplikacja internetowa prosi o dostęp do danych użytkownika za pomocą zakresów OAuth 2.0, Google wyświetla ekran zgody, na którym użytkownicy mogą zobaczyć, która aplikacja prosi o dostęp, o jakie zakresy danych prosi i jakie warunki obowiązują.

  1. Otwórz stronę Marka w sekcji Google Auth Platform w konsoli Cloud.
  2. Jeśli pojawi się taka prośba, wybierz skonfigurowany projekt.
  3. Wypełnij formularz dotyczący marki (nazwa aplikacji, logo aplikacji, adres e-mail do kontaktu, autoryzowane domeny, link do strony głównej aplikacji i link do polityki prywatności) i kliknij Zapisz.
  4. Otwórz stronę Dostęp do danych, aby skonfigurować zakresy interfejsów API Google, których wymaga Twoja aplikacja. Sprawdzoną metodą jest przyrostowe wysyłanie żądań zakresów w momencie, gdy dostęp jest wymagany, a nie z góry.
  5. Sprawdź stan weryfikacji. Jeśli Twoja aplikacja prosi o zakresy wrażliwe lub z ograniczeniami, prześlij ją do weryfikacji. Więcej informacji znajdziesz w artykule Wymagania dotyczące weryfikacji OAuth.

Standard Content Security Policy i nagłówek COOP

Jeśli aplikacja internetowa wymusza Content Security Policy (CSP), zezwól na te źródła usług Google Identity Services:

  • script-src: https://accounts.google.com/gsi/client
  • frame-src: https://accounts.google.com/gsi/
  • connect-src: https://accounts.google.com/gsi/

W przypadku procesów autoryzacji w wyskakującym okienku (initTokenClient lub initCodeClient z ux_mode: 'popup') skonfiguruj nagłówek odpowiedzi HTTP Cross-Origin-Opener-Policy (COOP) na same-origin-allow-popups, aby okno dialogowe mogło przekazać odpowiedź autoryzacji z powrotem na Twoją stronę.

Dalsze kroki

Następnie załadować bibliotekę klienta na stronie internetowej, aby rozpocząć inicjowanie klienta autoryzacji.