Użyj modelu kodu

Biblioteka usług tożsamości Google umożliwia użytkownikom wysyłanie próśb o autoryzację z Google za pomocą wyskakującego okienka przeglądarki lub procesu UX. Ten rozpoczyna bezpieczny przepływ protokołu OAuth 2.0 i powoduje wyświetlenie tokena dostępu używanego do wywoływania interfejsów API Google w imieniu użytkownika.

Podsumowanie procesu autoryzacji OAuth 2.0:

• W przeglądarce, za pomocą gestu takiego jak kliknięcie przycisku, pojawi się konto Google właściciel prosi o kod autoryzacji do Google.
• Google odpowiada, wysyłając unikalny kod autoryzacji na wywołanie zwrotne aplikacja internetowa JavaScript działająca w przeglądarce użytkownika lub bezpośrednio wywołuje punktu końcowego kodu autoryzacji przez przekierowanie w przeglądarce.
• Platforma backendu hostuje punkt końcowy kodu autoryzacji i otrzymuje w kodzie. Po weryfikacji kod jest wymieniany na dostęp dla poszczególnych użytkowników. odświeżaj tokeny za pomocą żądania wysyłanego do punktu końcowego tokena Google.
• Google weryfikuje kod autoryzacji i potwierdza źródło żądania. z bezpiecznej platformy, wystawia tokeny dostępu i odświeża je, a następnie zwraca przez wywołanie punktu końcowego logowania hostowanego przez Twoją platformę.
• Punkt końcowy logowania otrzymuje tokeny dostępu i odświeżania, bezpiecznie przechowywane token odświeżania do późniejszego użycia.

Inicjowanie klienta kodu

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

Wyskakujące okienko lub tryb przekierowania

Możesz udostępnić kod autoryzacji za pomocą opcji Przekierowanie lub Wzorzec przeglądania w trybie Wyskakujące okienko. W trybie przekierowania hostujesz autoryzację OAuth2 na serwerze, a Google przekierowuje klienta użytkownika do tego punktu końcowego, udostępniając kod autoryzacji jako parametr adresu URL. W przypadku trybu wyskakującego definiujesz kod JavaScript modułu obsługi wywołania zwrotnego, który wysyła kod autoryzacji do serwera. Tryb wyskakującego okienka mogą zapewnić wygodę użytkownikom, którzy nie muszą opuszczą Twoją witrynę.

Aby zainicjować klienta dla:

• Przekieruj przepływ UX, ustaw ux_mode na redirect i wartość redirect_uri do punktu końcowego kodu autoryzacji Twojej platformy. Wartość musi dokładnie odpowiadać jednemu z autoryzowanych identyfikatorów URI przekierowania dla OAuth 2.0 skonfigurowany w konsoli API. Musi też być zgodna z Reguły weryfikacji identyfikatora URI przekierowania.

• Wyskakujące okienko procesu UX, ustaw ux_mode na popup, a wartość callback na nazwa funkcji, która będzie używana do wysyłania kodów autoryzacji na platformy.

Zapobieganie atakom CSRF

Aby zapobiegać atakom typu cross-site-Request-Forgery (CSRF) w nieco inny sposób dla procesów UX w trybach przekierowania i wyskakującego okienka. W przypadku przekierowania używany jest parametr state protokołu OAuth 2.0. Zobacz RFC6749, sekcję 10.12 Fałszywe żądania dotyczące innych witryn , aby dowiedzieć się więcej o generowaniu i weryfikowaniu parametru state. W trybie wyskakujących okienek musisz dodać do żądań niestandardowy nagłówek HTTP, a następnie potwierdzić na serwerze pasuje do oczekiwanej wartości i punktu początkowego.

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);
  },
});

Aktywuj przepływ kodu OAuth 2.0

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

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

Aby to zrobić, użytkownik będzie musiał zalogować się na konto Google i wyrazić zgodę na poszczególnych zakresów przed zwróceniem kodu autoryzacji do lub modułu obsługi wywołania zwrotnego.

Obsługa kodu autoryzacji

Google generuje niepowtarzalny kod autoryzacji dla każdego użytkownika, który otrzymasz, na serwerze backendu.

W trybie wyskakujących okienek moduł obsługi określony przez callback, który działa w 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, udostępniając kod autoryzacji w parametrze code adresu URL. Do otrzymać kod autoryzacji:

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

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

Punkt końcowy autoryzacji

Punkt końcowy kodu autoryzacji musi obsługiwać żądania GET z tymi zapytaniami do adresu URL parametry ciągu:

Przykładowe żądanie GET z parametrami adresu URL prowadzącym do punktu końcowego o nazwie auth-code i z witryny 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 wcześniejsze 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ść żądania HTTP:

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

Weryfikowanie żądania

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

Sprawdź wartość parametru state dla trybu przekierowania.

Potwierdź, że nagłówek X-Requested-With: XmlHttpRequest jest ustawiony na tryb wyskakujących okienek.

Następnie możesz uzyskać od Google tokeny odświeżania i dostępu. tylko wtedy, gdy najpierw udało się zweryfikować żądanie kodu autoryzacji.

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

Gdy platforma backendu otrzyma kod autoryzacji od Google zweryfikuje żądanie, użyj kodu autoryzacji, aby uzyskać dostęp i odświeżyć tokeny Google, aby wywoływać interfejs API.

Postępuj zgodnie z instrukcjami od Krok 5. Wymiana kodu autoryzacji dla domeny Tokeny odświeżania i dostępu w artykule Korzystanie z protokołu OAuth 2.0 na potrzeby serwera WWW Przewodnik po aplikacjach.

Zarządzanie tokenami

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

Opcjonalnie możesz też rozważyć zastosowanie RISC do ochrony kont użytkowników za pomocą wielu kont Ochrona.

Zwykle platforma backendu wywołuje interfejsy API Google przy użyciu tokena dostępu. Jeśli aplikacja internetowa będzie także bezpośrednio wywoływać interfejsy API Google z przeglądarki użytkownika, musi zaimplementować sposób udostępniania tokena dostępu aplikacji internetowej, wykonując więc wykraczają poza zakres tego przewodnika. Stosując się do tej metody i korzystając z Biblioteka klienta interfejsów API Google do języka JavaScript użyj gapi.client.SetToken() do tymczasowego przechowywania tokena dostępu w przeglądarce pamięci i włączać bibliotekę do wywoływania interfejsów API Google.