Użyj modelu kodu

Biblioteka usług Google Identity umożliwia użytkownikom wysyłanie do Google żądań autoryzacji za pomocą wyskakującego okienka przeglądarki lub przekierowania UX. Rozpoczyna to bezpieczny przepływ protokołu OAuth 2.0 i skutkuje uzyskaniem tokena dostępu do interfejsu API Google w imieniu użytkownika.

Podsumowanie procesu autoryzacji kodu autoryzacji OAuth 2.0:

• Właściciel konta Google prosi w Google o kod autoryzacji, wykonując gest taki jak kliknięcie przycisku.
• Odpowiada on na żądanie, wysyłając unikalny kod autoryzacji do wywołania zwrotnego w aplikacji internetowej JavaScript uruchomionej w przeglądarce użytkownika lub bezpośrednio wywołuje punkt końcowy kodu przekierowania za pomocą przekierowania przeglądarki.
• Platforma backendu hostuje punkt końcowy kodu autoryzacji i otrzymuje kod. Po weryfikacji kod jest wymieniany na potrzeby dostępu użytkownika i jest odświeżany przez żądanie do punktu końcowego tokena Google.
• Google weryfikuje kod autoryzacji, potwierdza żądanie pochodzące z bezpiecznej platformy, identyfikuje problemy z dostępem i tokenami odświeżania oraz zwraca tokeny, wywołując punkt końcowy logowania hostowany przez Twoją platformę.
• Punkt końcowy logowania otrzymuje token dostępu i token odświeżania, który bezpiecznie przechowuje do późniejszego użycia.

Inicjowanie klienta kodu

Metoda google.accounts.oauth2.initCodeClient() inicjuje klienta kodu.

Wyskakujące okienko lub tryb przekierowania

Kod autoryzacji możesz udostępnić za pomocą procesu użytkownika Przekierowanie lub Wyskakujące okienko. W trybie przekierowania hostujesz punkt końcowy autoryzacji OAuth2 na serwerze, a Google przekierowuje klienta użytkownika do tego punktu końcowego, udostępniając kod uwierzytelniania jako parametr URL. W przypadku trybu wyskakującego definiuje się moduł obsługi wywołań zwrotnych JavaScript, który wysyła kod autoryzacji na serwer. Tryb tymczasowy może być przydatny dla użytkowników, którzy nie muszą opuścić witryny.

Aby zainicjować klienta dla:

• Przekierowuj przepływ UX, ustaw ux_mode na redirect i wartość redirect_uri na punkcie końcowym kodu autoryzacji platformy. Wartość musi dokładnie odpowiadać jednemu z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0 skonfigurowanego w konsoli API. Muszą też być zgodne z regułami weryfikacji identyfikatora URI przekierowania.

• Wyskakujące okienko UX, ustaw ux_mode na popup, a wartość callback na nazwę funkcji, której będziesz używać do wysyłania kodów autoryzacji do Twojej platformy.

Zapobieganie CSRF

Aby zapobiec atakom typu cross-site-Request-Forgery (CSRF), stosowany jest nieco inny technikę w procesach przekierowywania i trybu wyskakującego okienka UX. W trybie przekierowania używany jest parametr state (stan) OAuth 2.0. Więcej informacji o generowaniu i weryfikowaniu parametru state znajdziesz w sekcji RFC6749 w sekcji 10.12 Forgery z różnymi witrynami. Dzięki trybowi wyskakującemu możesz dodać do żądań niestandardowy nagłówek HTTP, a następnie sprawdzić, czy serwer pasuje do oczekiwanej wartości i źródła.

Wybierz tryb UX, aby wyświetlić fragment kodu przedstawiający kod uwierzytelniania i obsługę CSRF:

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

Aktywowanie przepływu kodu OAuth 2.0

Aby wywołać przepływ użytkownika, wywołaj metodę requestCode() kodu klienta:

<button onclick="client.requestCode();">Authorize with Google</button>

W takim przypadku użytkownik będzie musiał zalogować się na konto Google i wyrazić zgodę na udostępnienie poszczególnych zakresów przed zwróceniem kodu autoryzacji do punktu końcowego przekierowania lub do modułu obsługi wywołania zwrotnego.

Obsługa kodu uwierzytelniania

Google generuje unikalny kod autoryzacji dla każdego użytkownika, który otrzymujesz i weryfikujesz na serwerze backendu.

W trybie wyskakującego moduł obsługi określony przez callback w przeglądarce użytkownika przekazuje kod autoryzacji do punktu końcowego hostowanego przez Twoją platformę.

W trybie przekierowania żądanie GET jest wysyłane do punktu końcowego określonego przez redirect_url i udostępnia kod autoryzacji w parametrze kod adresu URL. Aby otrzymać kod autoryzacji:

• Utwórz nowy punkt końcowy autoryzacji, jeśli nie masz jeszcze implementacji, lub

• Zaktualizuj istniejący punkt końcowy, aby akceptował żądania (GET) i parametry adresu URL. Wcześniej żądanie PUT z wartością kodu autoryzacji w ładunku było używane.

Punkt końcowy autoryzacji

Punkt końcowy kodu autoryzacji musi obsługiwać żądania (GET) z tymi parametrami ciągu zapytania z URL:

Przykładowe żądanie GET z parametrami adresu URL do punktu końcowego o nazwie auth-code i hostowane przez example.com:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

Gdy przepływ autoryzacji kodu jest inicjowany przez wcześniejsze biblioteki JavaScript lub przez bezpośrednie wywołania do punktów końcowych Google OAuth 2.0, używane jest żądanie POST.

Przykładowe żądanie POST zawierające kod autoryzacji jako ładunek w treści żądania HTTP:

  Request URL: https://www.example.com/auth-code
  Request Payload:
  4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

Weryfikowanie żądania

Na swoim serwerze wykonaj te czynności, by uniknąć ataków CSRF.

Sprawdź wartość parametru state (stan) w trybie przekierowania.

Potwierdź ustawienie nagłówka X-Requested-With: XmlHttpRequest na potrzeby trybu wyskakującego.

Jeśli chcesz zweryfikować token uwierzytelniający, najpierw musisz uzyskać tokeny odświeżania i dostępu od Google.

Uzyskiwanie dostępu i tokenów odświeżania

Gdy platforma backendu otrzyma od Google kod autoryzacji i sprawdzi żądanie, użyj kodu uwierzytelniania, aby uzyskać dostęp i tokeny odświeżania od Google do wykonywania wywołań interfejsu API.

Postępuj zgodnie z instrukcjami, począwszy od Kroku 5. Kod autoryzacji Exchange na potrzeby tokenów odświeżania i dostępu w przewodniku Korzystanie z OAuth 2.0 dla aplikacji serwera WWW.

Zarządzanie tokenami

Platforma bezpiecznie przechowuje tokeny odświeżania. Usuwanie zapisanych tokenów odświeżania po usunięciu kont użytkowników lub cofnięciu zgody użytkownika przez użytkownika google.accounts.oauth2.revoke albo bezpośrednio na stronie https://myaccount.google.com/permissions.

Możesz też włączyć szyfrowanie RISC, by chronić konta użytkowników za pomocą ochrony obejmującej wiele kont.

Zazwyczaj platforma backendu wywołuje interfejsy API Google przy użyciu tokena dostępu. Jeśli Twoja aplikacja internetowa będzie też bezpośrednio wywoływać interfejsy API Google w przeglądarce użytkownika, musisz zaimplementować sposób udostępniania tokena dostępu aplikacji internetowej. Gdy korzystasz z tego typu biblioteki, użyj gapi.client.SetToken() do tymczasowego przechowywania tokena dostępu w pamięci przeglądarki i włączania biblioteki do wywoływania interfejsów Google API.