Użyj modelu kodu

Biblioteka usług tożsamości Google umożliwia użytkownikom żądanie od Google kodu autoryzacji za pomocą wyskakującego okienka w przeglądarce lub procesu Redirect UX. Powoduje to rozpoczęcie bezpiecznego procesu OAuth 2.0 i wygenerowanie tokena dostępu używanego do wywoływania interfejsów API Google w imieniu użytkownika.

Podsumowanie przepływu kodu autoryzacji OAuth 2.0:

• Używając gestu, np. kliknięcia przycisku, właściciel konta Google prosi Google o kod autoryzacji.
• W odpowiedzi Google wysyła 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 autoryzacji za pomocą przekierowania przeglądarki.
• Platforma backendu hostuje punkt końcowy kodu autoryzacji i otrzymuje kod. Po weryfikacji ten kod jest wymieniany na dostęp dla każdego użytkownika i odświeżany tokeny za pomocą żądania wysyłanego do punktu końcowego tokena Google.
• Google weryfikuje kod autoryzacji, potwierdza żądanie wysłane z bezpiecznej platformy, wydaje tokeny dostępu i odświeżania oraz zwraca tokeny, wywołując punkt końcowy logowania hostowany przez Twoją platformę.
• Punkt końcowy logowania otrzymuje tokeny dostępu i odświeżania, które bezpiecznie przechowuje token odświeżania do późniejszego użycia.

Inicjowanie klienta kodu

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

Tryb wyskakującego okienka lub przekierowania

Możesz udostępnić kod autoryzacji, korzystając z trybu Przekierowanie lub Wyskakujące okienko. W trybie przekierowania hostujesz punkt końcowy autoryzacji OAuth2 na swoim serwerze, a Google przekierowuje do niego klienta użytkownika, udostępniając kod autoryzacji jako parametr adresu URL. W przypadku trybu Wyskakujące okienko definiujesz element obsługi wywołania zwrotnego JavaScript, który wysyła kod autoryzacji do Twojego serwera. Tryb wyskakującego okienka może zapewniać użytkownikom wygodną obsługę bez konieczności opuszczania witryny.

Aby zainicjować klienta dla:

• Przekieruj przepływ UX, ustaw ux_mode na redirect, a wartość redirect_uri na punkt końcowy kodu autoryzacji Twojej platformy. Wartość musi być dokładnie taka sama jak jeden z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0 skonfigurowanego w Konsoli API. Musi też być zgodny z naszymi regułami weryfikacji identyfikatora URI przekierowania.

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

Zapobieganie atakom CSRF

Aby zapobiec atakom typu Cross-Site-Request-Forgery (CSRF), w procesach UX w trybach przekierowania i wyskakującego okienka stosujemy nieco inne techniki. W przypadku trybu przekierowania używany jest parametr state protokołu OAuth 2.0. Więcej informacji o generowaniu i weryfikowaniu parametru state znajdziesz w sekcji 10.12 RFC6749 w przypadku fałszowania żądań z innych witryn. W trybie wyskakującego okienka dodajesz do żądań niestandardowy nagłówek HTTP, a następnie na serwerze potwierdzasz, że pasuje on do oczekiwanej wartości i źródła.

Wybierz tryb UX, aby wyświetlić fragment kodu przedstawiający kod autoryzacji 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);
  },
});

Uruchom przepływ kodu OAuth 2.0

Wywołaj metodę requestCode() klienta kodu, aby aktywować przepływ użytkownika:

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

Spowoduje to, że użytkownik będzie musiał zalogować się na konto Google i wyrazić zgodę na udostępnianie poszczególnych zakresów, zanim zwróci kod autoryzacji do punktu końcowego przekierowania lub modułu obsługi wywołania zwrotnego.

Obsługa kodu autoryzacji

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

W przypadku trybu wyskakującego okienka moduł obsługi określony przez callback, uruchomiony w przeglądarce użytkownika, przekazuje kod autoryzacji do punktu końcowego obsługiwanego przez Twoją platformę.

W przypadku trybu przekierowania żądanie GET jest wysyłane do punktu końcowego określonego przez redirect_url, udostępniając kod autoryzacji w parametrze code adresu URL. Aby otrzymać kod autoryzacji:

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

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

Punkt końcowy autoryzacji

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

Przykładowe żądanie GET z parametrami adresu URL kierowanymi 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 kodu autoryzacji jest inicjowany przez starsze biblioteki JavaScript lub przez bezpośrednie wywołania 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

Zweryfikuj żądanie

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

Sprawdź wartość parametru state pod kątem trybu przekierowania.

Upewnij się, że nagłówek X-Requested-With: XmlHttpRequest jest ustawiony na tryb wyskakującego okienka.

Następnie kontynuuj uzyskiwanie od Google tokenów odświeżania i dostępu do niego tylko wtedy, gdy najpierw uda Ci się zweryfikować prośbę o kod autoryzacji.

Uzyskaj dostęp i odśwież tokeny

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

Postępuj zgodnie z instrukcjami, zaczynając od kroku 5. Kod autoryzacji Exchange dla tokenów odświeżania i dostępu z przewodnika Używanie OAuth 2.0 w aplikacjach serwera WWW.

Zarządzanie tokenami

Twoja platforma bezpiecznie przechowuje tokeny odświeżania. Usuń zapisane tokeny odświeżania, gdy konta użytkowników zostaną usunięte lub gdy zgoda użytkownika zostanie cofnięta przez google.accounts.oauth2.revoke lub bezpośrednio na stronie https://myaccount.google.com/permissions.

Opcjonalnie możesz zastosować RISC do ochrony kont użytkowników przy użyciu ochrony wszystkich kont.

Zwykle platforma backendu wywołuje interfejsy API Google przy użyciu tokena dostępu. Jeśli Twoja aplikacja internetowa również będzie bezpośrednio wywoływać interfejsy API Google z przeglądarki użytkownika, musisz zaimplementować sposób udostępniania tokena dostępu swojej aplikacji internetowej. Nie jest to uwzględnione w tym przewodniku. Jeśli stosujesz to podejście i korzystasz z biblioteki klienta interfejsu API Google dla języka JavaScript, użyj metody gapi.client.SetToken(), aby tymczasowo przechowywać token dostępu w pamięci przeglądarki i umożliwić bibliotece wywoływanie interfejsów API Google.