OAuth 2.0 dla aplikacji internetowych po stronie klienta

Ten dokument wyjaśnia, jak wdrożyć autoryzację OAuth 2.0, aby uzyskać dostęp do interfejsów API Google z aplikacji internetowej JavaScript. Protokół OAuth 2.0 umożliwia użytkownikom udostępnianie określonych danych aplikacji przy zachowaniu ich nazw użytkowników, haseł i innych informacji. Aplikacja może na przykład używać protokołu OAuth 2.0, aby uzyskiwać od użytkowników uprawnienia do przechowywania plików na ich Dyskach Google.

Ten proces OAuth 2.0 jest nazywany domyślnym przepływem uwierzytelniania. Jest ona przeznaczona dla aplikacji, które mają dostęp do interfejsów API tylko wtedy, gdy użytkownik jest w aplikacji. Aplikacje nie mogą przechowywać informacji poufnych.

W ramach tego procesu Twoja aplikacja otwiera adres URL Google, który używa parametrów zapytania do jej identyfikacji, oraz typ dostępu API wymagany przez aplikację. Adres URL możesz otworzyć w bieżącym oknie przeglądarki lub w wyskakującym okienku. Użytkownik może uwierzytelnić się w Google i przyznać mu wymagane uprawnienia. Następnie Google przekierowuje użytkownika z powrotem do Twojej aplikacji. Przekierowanie zawiera token dostępu, który jest weryfikowany przez aplikację, a potem używany do wysyłania żądań do interfejsu API.

Wymagania wstępne

Włącz interfejsy API w projekcie

Każda aplikacja, która wywołuje interfejsy API Google, musi włączyć je w API Console.

Aby włączyć interfejs API w projekcie:

  1. Open the API Library w: Google API Console.
  2. If prompted, select a project, or create a new one.
  3. Na liście API Library znajdują się wszystkie dostępne interfejsy API pogrupowane według rodziny usług i popularności. Jeśli interfejs API, który chcesz włączyć, nie jest widoczny na liście, użyj funkcji wyszukiwania, aby go znaleźć, lub kliknij Wyświetl wszystko w rodzinie usług, do której należy.
  4. Wybierz interfejs API, który chcesz włączyć, a następnie kliknij przycisk Włącz.
  5. If prompted, enable billing.
  6. If prompted, read and accept the API's Terms of Service.

Tworzenie danych uwierzytelniających

Każda aplikacja, która uzyskuje dostęp do interfejsów API Google przy użyciu OAuth 2.0, musi mieć dane uwierzytelniające, które identyfikują aplikację z serwerem OAuth 2.0 Google. Poniżej wyjaśniamy, jak utworzyć dane logowania do projektu. Dzięki temu aplikacje będą mogły korzystać z danych logowania, aby uzyskać dostęp do interfejsów API włączonych w tym projekcie.

  1. Go to the Credentials page.
  2. Kliknij Utwórz dane logowania > identyfikator klienta OAuth.
  3. Wybierz typ aplikacji Aplikacja internetowa.
  4. Wypełnij formularz. Aplikacje używające JavaScriptu do wykonywania autoryzowanych żądań do interfejsu API Google muszą określać autoryzowane źródła JavaScriptu. Źródła identyfikują domeny, z których Twoja aplikacja może wysyłać żądania do serwera OAuth 2.0. Te źródła muszą być zgodne z regułami weryfikacji Google.

Określ zakresy dostępu

Zakresy umożliwiają aplikacji żądanie tylko tych zasobów, których potrzebują, a także umożliwienie użytkownikom kontrolowania poziomu dostępu przyznawanego aplikacji. Dlatego może występować zależność między liczbą żądanych zakresów a prawdopodobieństwem uzyskania zgody użytkownika.

Zanim zaczniesz wdrażać autoryzację OAuth 2.0, zalecamy wskazanie zakresów, do których aplikacja będzie potrzebować dostępu.

Dokument Zakresy OAuth 2.0 interfejsu API zawiera pełną listę zakresów, których możesz używać do korzystania z interfejsów API Google.

Uzyskiwanie tokenów dostępu do protokołu OAuth 2.0

Poniższe kroki przedstawiają sposób interakcji Twojej aplikacji z serwerem OAuth 2.0 Google w celu uzyskania zgody od użytkownika na wysłanie żądania interfejsu API w jego imieniu. Aplikacja musi uzyskać tę zgodę, zanim będzie mogła wysłać żądanie interfejsu API Google, które wymaga autoryzacji użytkownika.

Krok 1. Skonfiguruj obiekt kliencki

Jeśli do obsługi przepływu OAuth 2.0 używasz biblioteki klienta interfejsów API Google dla JavaScriptu, musisz najpierw skonfigurować obiekty gapi.auth2 i gapi.client. Te obiekty umożliwiają Twojej aplikacji uzyskiwanie autoryzacji użytkowników i wysyłanie autoryzowanych żądań do interfejsu API.

Obiekt klienta identyfikuje zakresy, do których aplikacja prosi o dostęp. Te wartości informują ekran zgody, który Google wyświetla użytkownikowi.

Biblioteka klienta JS

Biblioteka klienta JavaScript upraszcza wiele aspektów procesu autoryzacji:

  1. Tworzy on przekierowanie dla serwera autoryzacji Google i udostępnia metodę przekierowywania użytkownika na ten adres URL.
  2. Obsługuje ona przekierowanie z tego serwera z powrotem do Twojej aplikacji.
  3. Weryfikuje token dostępu zwrócony przez serwer autoryzacji.
  4. Przechowuje token dostępu wysyłany przez serwer autoryzacji do aplikacji i pobiera go, gdy aplikacja wywoła następnie autoryzowane wywołania interfejsu API.

Widoczny poniżej fragment kodu jest fragmentem pełnego przykładu widocznego w dalszej części tego dokumentu. Ten kod inicjuje obiekt gapi.client, którego aplikacja będzie później używać do wywoływania interfejsu API. Po utworzeniu tego obiektu inicjowany jest też obiekt gapi.auth2, który jest używany przez aplikację do sprawdzania i monitorowania stanu autoryzacji użytkownika.

Wywołanie gapi.client.init określa następujące pola:

  • Wartości apiKey i clientId określają dane uwierzytelniające aplikację. Zgodnie z sekcją Tworzenie danych uwierzytelniających te wartości możesz pobrać w API Console. Uwaga: clientId jest wymagany, jeśli aplikacja wysyła autoryzowane żądania do interfejsu API. Aplikacje wysyłające tylko nieautoryzowane żądania mogą jedynie określić klucz interfejsu API.
  • Pole scope określa oddzieloną spacjami listę zakresów dostępu, które odpowiadają zasobom, do których aplikacja może uzyskiwać dostęp w imieniu użytkownika. Te wartości informują ekran zgody, który Google wyświetla użytkownikowi.

    Zalecamy, aby w miarę możliwości aplikacja żądała dostępu do zakresów autoryzacji w określonym kontekście. Prosząc o dostęp do danych użytkownika w kontekście, korzystając z autoryzacji przyrostowej, ułatwiasz użytkownikom zrozumienie, dlaczego Twoja aplikacja potrzebuje dostępu.

  • Pole discoveryDocs zawiera listę dokumentów interfejsu API Discovery używanych w Twojej aplikacji. Dokument Discovery opisuje powierzchnię interfejsu API, w tym jego schematy zasobów, a biblioteka bibliotek JavaScript korzysta z tych informacji do generowania metod, których mogą używać aplikacje. W tym przykładzie kod pobiera dokument Discovery w wersji 3 interfejsu Google Drive API.

Po zakończeniu wywołania gapi.client.init kod ustawia zmienną GoogleAuth do identyfikacji obiektu Uwierzytelniania Google. Na koniec kod określa detektor, który wywołuje funkcję, gdy zmieni się stan logowania użytkownika. Ta funkcja nie jest zdefiniowana we fragmencie kodu.

var GoogleAuth; // Google Auth object.
function initClient() {
  gapi.client.init({
      'apiKey': 'YOUR_API_KEY',
      'clientId': 'YOUR_CLIENT_ID',
      'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
  }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);
  });
}

Punkty końcowe OAuth 2.0

Jeśli masz bezpośredni dostęp do punktów końcowych OAuth 2.0, możesz przejść do następnego kroku.

Krok 2. Przekieruj na serwer OAuth 2.0 Google

Aby poprosić o dostęp do danych użytkownika, przekieruj go na serwer OAuth 2.0 Google.

Biblioteka klienta JS

Wywołaj metodę GoogleAuth.signIn(), aby przekierować użytkownika na serwer autoryzacji Google.

GoogleAuth.signIn();

W praktyce aplikacja może ustawić wartość logiczną określającą, czy przed próbą wywołania interfejsu API trzeba wywołać metodę signIn().

Fragment kodu poniżej pokazuje, w jaki sposób rozpoczniesz proces autoryzacji użytkownika. Pamiętaj o tych uwagach na temat fragmentu:

  • Obiekt GoogleAuth, do którego odwołuje się kod, jest taki sam jak zmienna globalna zdefiniowana we fragmencie kodu w kroku 1.

  • Funkcja updateSigninStatus to detektor, który wykrywa zmiany stanu autoryzacji użytkownika. Jego rola jako detektora została też zdefiniowana we fragmencie kodu w kroku 1:
    GoogleAuth.isSignedIn.listen(updateSigninStatus);
  • Fragment kodu zawiera 2 dodatkowe zmienne globalne:

    • isAuthorized to zmienna logiczna, która wskazuje, czy użytkownik jest już zalogowany. Tę wartość można ustawić podczas wczytywania aplikacji i aktualizowania jej, gdy użytkownik się zaloguje lub wyloguje.

      Ta funkcja sendAuthorizedApiRequest sprawdza wartość zmiennej w celu określenia, czy aplikacja powinna podjąć próbę użycia interfejsu API, który wymaga autoryzacji, lub poprosić użytkownika o autoryzację aplikacji.

    • currentApiRequest to obiekt z informacjami o ostatnim żądaniu API podjętym przez użytkownika. Wartość obiektu jest ustawiana, gdy aplikacja wywołuje funkcję sendAuthorizedApiRequest.

      Jeśli użytkownik autoryzował aplikację, żądanie zostanie natychmiast wykonane. W przeciwnym razie przekierowuje użytkownika do logowania. Gdy użytkownik się zaloguje, funkcja updateSignInStatus wywołuje metodę sendAuthorizedApiRequest, przekazując to samo żądanie, które zostało próbowane przed rozpoczęciem procesu autoryzacji.

var isAuthorized;
var currentApiRequest;

/**
 * Store the request details. Then check to determine whether the user
 * has authorized the application.
 *   - If the user has granted access, make the API request.
 *   - If the user has not granted access, initiate the sign-in flow.
 */
function sendAuthorizedApiRequest(requestDetails) {
  currentApiRequest = requestDetails;
  if (isAuthorized) {
    // Make API request
    // gapi.client.request(requestDetails)

    // Reset currentApiRequest variable.
    currentApiRequest = {};
  } else {
    GoogleAuth.signIn();
  }
}

/**
 * Listener called when user completes auth flow. If the currentApiRequest
 * variable is set, then the user was prompted to authorize the application
 * before the request executed. In that case, proceed with that API request.
 */
function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    isAuthorized = true;
    if (currentApiRequest) {
      sendAuthorizedApiRequest(currentApiRequest);
    }
  } else {
    isAuthorized = false;
  }
}

Punkty końcowe OAuth 2.0

Wygeneruj URL, by poprosić o dostęp z punktu końcowego Google OAuth 2.0 na adres https://accounts.google.com/o/oauth2/v2/auth. Ten punkt końcowy jest dostępny przez HTTPS. Zwykłe połączenia HTTP są odrzucane.

Serwer autoryzacji Google obsługuje następujące parametry ciągu zapytania dla aplikacji serwera WWW:

Parametry
client_id Wymagany

Identyfikator klienta aplikacji. Tę wartość znajdziesz w API ConsoleCredentials page.

redirect_uri Wymagany

Określa, gdzie serwer interfejsu API przekierowuje użytkownika po ukończeniu autoryzacji. Wartość musi dokładnie odpowiadać jednemu z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0 skonfigurowanego w API ConsoleCredentials pageklienta. Jeśli ta wartość nie będzie zgodna z autoryzowanym identyfikatorem URI przekierowania dla podanego kodu client_id, wystąpi błąd redirect_uri_mismatch.

Schemat http, https i ukośnik na końcu ('/') muszą się zgadzać.

response_type Wymagany

Aplikacje JavaScript muszą ustawić wartość parametru na token. Ta wartość instruuje serwer autoryzacji Google, by zwrócić token dostępu jako parę name=value w identyfikatorze fragmentu identyfikatora URI (#), do którego zostaje przekierowany użytkownik po zakończeniu procesu autoryzacji.

scope Wymagany

Lista rozdzielonych spacjami, które identyfikują zasoby, do których aplikacja może uzyskiwać dostęp w imieniu użytkownika. Te wartości informują ekran zgody, który Google wyświetla użytkownikowi.

Zakresy umożliwiają aplikacji żądanie tylko tych zasobów, których potrzebują, a także umożliwienie użytkownikom kontrolowania poziomu dostępu przyznawanego aplikacji. Dlatego występuje odwrotna zależność między liczbą żądanych zakresów a prawdopodobieństwem uzyskania zgody użytkownika.

Zalecamy, aby w miarę możliwości aplikacja żądała dostępu do zakresów autoryzacji. Prosząc o dostęp do danych użytkownika w kontekście, korzystając z autoryzacji przyrostowej, ułatwiasz użytkownikom zrozumienie, dlaczego aplikacja potrzebuje dostępu, o który prosi.

state Zalecane

Określa dowolną wartość ciągu tekstowego, której aplikacja używa do obsługi stanu między żądaniem autoryzacji a odpowiedzią serwera autoryzacji. Gdy użytkownik wyrazi zgodę na żądanie dostępu lub odmówi jego dostępu, serwer zwraca dokładną wartość, którą wyślesz jako parę name=value w identyfikatorze fragmentu adresu URL (#) w redirect_uri.

Możesz używać tego parametru do różnych celów, takich jak kierowanie użytkownika do właściwego zasobu w aplikacji, wysyłanie jednorazowych żądań czy fałszowanie żądań pochodzących z różnych witryn. Ponieważ można zgadnąć redirect_uri, użycie wartości state może zwiększyć pewność, że połączenie przychodzące jest wynikiem żądania uwierzytelniania. Jeśli wygenerujesz losowy ciąg znaków lub zaszyfrujesz hasz plików cookie bądź inną wartość, która będzie przechwytywać stan klienta, możesz sprawdzić odpowiedź, aby zyskać pewność, że żądanie i odpowiedź pochodzą z tej samej przeglądarki, co zapewnia ochronę przed atakami takimi jak fałszowanie żądań w różnych witrynach. Przykład tworzenia i potwierdzania tokena state znajdziesz w dokumentacji OpenID Connect.

include_granted_scopes Opcjonalnie

Umożliwia aplikacjom używanie autoryzacji przyrostowej do żądania dostępu do dodatkowych zakresów w kontekście. Jeśli ustawisz wartość tego parametru na true i żądanie autoryzacji zostanie przyznane, nowy token dostępu będzie obejmować wszystkie zakresy, do których użytkownik wcześniej przyznał dostęp aplikacji. Przykłady znajdziesz w sekcji Autoryzacja przyrostowa.

login_hint Opcjonalnie

Jeśli aplikacja wie, który użytkownik próbuje się uwierzytelnić, może użyć tego parametru do przekazania wskazówki do serwera uwierzytelniania Google. Serwer korzysta z podpowiedzi, aby uprościć przepływ logowania, wypełniając pole adresu e-mail w formularzu logowania lub wybierając odpowiednią sesję wielokrotnego logowania.

Ustaw wartość parametru na adres e-mail lub identyfikator sub, który jest odpowiednikiem identyfikatora Google użytkownika.

prompt Opcjonalnie

Lista rozdzielonych spacjami wielkości liter z pytaniami, które przedstawiają użytkownikowi. Jeśli nie określisz tego parametru, użytkownik zobaczy prośbę tylko wtedy, gdy pierwszy raz poprosi on o dostęp do Twojego projektu. Więcej informacji znajdziesz w artykule Ponowne wyświetlanie prośby o zgodę na wykorzystanie danych.

Możliwe wartości to:

none Nie wyświetlaj żadnych ekranów uwierzytelniania ani uzyskiwania zgody. Nie można go określać razem z innymi wartościami.
consent Pytaj użytkownika o zgodę.
select_account Wyświetlaj użytkownikowi prośbę o wybranie konta.

Przykład przekierowania na serwer autoryzacji Google

Poniżej znajduje się przykładowy URL z podziałami wierszy i miejscami, które są czytelne.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

Po utworzeniu adresu URL żądania przekieruj użytkownika na niego.

Przykładowy kod JavaScript

Poniższy fragment kodu JavaScript pokazuje, jak rozpocząć przepływ autoryzacji w kodzie JavaScript bez użycia biblioteki klienta interfejsów API Google dla JavaScript. Ten punkt końcowy OAuth 2.0 nie obsługuje udostępniania zasobów międzyźródłowych (CORS), dlatego we fragmencie kodu tworzony jest formularz otwierający żądanie do tego punktu końcowego.

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

Krok 3. Google prosi użytkownika o zgodę

W tym kroku użytkownik decyduje, czy przyznać aplikacji wymagany dostęp. Na tym etapie Google wyświetla okno zgody z nazwą aplikacji i usługami interfejsu API Google, w ramach których prosi o dostęp z użyciem danych uwierzytelniających użytkownika i podsumowaniem zakresów dostępu, które należy przyznać. Użytkownik może następnie udzielić dostępu do co najmniej jednego zakresu, o który prosi Twoja aplikacja, lub odrzucić prośbę.

Twoja aplikacja na tym etapie nie musi nic robić, bo czeka na odpowiedź serwera OAuth 2.0 Google. Jest to informacja o tym, czy przyznano dostęp. Odpowiedź opisano w następnym kroku.

Błędy

Żądania wysyłane do punktu końcowego autoryzacji OAuth 2.0 przez Google mogą wyświetlać komunikaty o błędach wyświetlane użytkownikom, a nie oczekiwane przepływy uwierzytelniania i autoryzacji. Poniżej znajdziesz typowe kody błędów i sugerowane rozwiązania.

admin_policy_enforced

Konto Google nie może autoryzować jednego lub większej liczby zakresów, o które prosił administrator Google Workspace. Przeczytaj artykuł pomocy dla administratorów Google Workspace i określ, które aplikacje innych firm i aplikacje wewnętrzne mają dostęp do danych Google Workspace. W ten sposób dowiesz się, w jaki sposób administrator może ograniczyć dostęp do wszystkich zakresów lub zakresów wrażliwych i zakresów z ograniczeniami, dopóki dostęp do identyfikatora klienta OAuth nie zostanie przyznany wprost.

disallowed_useragent

Punkt końcowy autoryzacji jest wyświetlany w umieszczonym kliencie użytkownika niedozwolonym przez zasady OAuth 2.0.

Android

Deweloperzy aplikacji na Androida mogą napotkać ten komunikat o błędzie podczas otwierania żądań autoryzacji w android.webkit.WebView. Deweloperzy powinni zamiast tego korzystać z bibliotek Androida, takich jak Logowanie przez Google na Androida czy Fundacja OpenIDAppAuth for Android.

Deweloperzy mogą napotkać ten błąd, gdy aplikacja na Androida otwiera ogólny link internetowy w umieszczonym kliencie użytkownika i przechodzi do punktu końcowego autoryzacji OAuth 2.0 z Twojej witryny. Deweloperzy powinni zezwolić na ogólne linki w domyślnym module obsługi linków systemu operacyjnego, który zawiera zarówno moduły obsługi aplikacji na Androida, jak i domyślną aplikację przeglądarki. Biblioteka Niestandardowe karty Androida też jest obsługiwana.

iOS

Deweloperzy iOS i macOS mogą napotkać ten błąd podczas otwierania żądań autoryzacji w WKWebView. Deweloperzy powinni zamiast tego korzystać z bibliotek iOS, takich jak Logowanie przez Google na iOS czy AppAuth for iOS (Podstawy Fundacji).

Deweloper może napotkać ten błąd, gdy w aplikacji na iOS lub macOS otworzy się ogólny link internetowy w umieszczonym kliencie użytkownika, a użytkownik przejdzie do Twojej witryny przez punkt końcowy autoryzacji OAuth 2.0. Deweloperzy powinni zezwolić na otwieranie ogólnych linków w domyślnym module obsługi systemu operacyjnego, który obejmuje zarówno moduły uniwersalnych linków, jak i domyślną aplikację przeglądarki. Biblioteka SFSafariViewController jest też obsługiwana.

org_internal

Identyfikator klienta OAuth w żądaniu jest częścią projektu ograniczającego dostęp do kont Google w określonej organizacji Google Cloud. Więcej informacji o tej opcji konfiguracji znajdziesz w sekcji User type (Typ użytkownika) artykułu pomocy o konfigurowaniu OAuth na potrzeby uzyskiwania zgody.

origin_mismatch

Schemat, domena i/lub port JavaScript, z którego pochodzi żądanie autoryzacji, mogą nie być zgodne z autoryzowanym identyfikatorem URI źródła JavaScript zarejestrowanym dla identyfikatora klienta OAuth. Sprawdź autoryzowane źródła JavaScript w Google API ConsoleCredentials page.

redirect_uri_mismatch

redirect_uri przekazany w żądaniu autoryzacji nie pasuje do autoryzowanego identyfikatora URI przekierowania dla identyfikatora klienta OAuth. Sprawdź autoryzowane identyfikatory URI przekierowania w Google API Console Credentials page.

Schemat, domena i/lub port JavaScript, z którego pochodzi żądanie autoryzacji, mogą nie być zgodne z autoryzowanym identyfikatorem URI źródła JavaScript zarejestrowanym dla identyfikatora klienta OAuth. Przejrzyj autoryzowane źródła JavaScript w: Google API Console Credentials page.

Krok 4. Przetwórz odpowiedź serwera OAuth 2.0

Biblioteka klienta JS

Biblioteka klienta JavaScript obsługuje odpowiedzi z serwera autoryzacji Google. Jeśli skonfigurujesz odbiornik do monitorowania zmian w bieżącym stanie logowania, funkcja ta będzie wywoływana, gdy użytkownik przyzna żądany dostęp do aplikacji.

Punkty końcowe OAuth 2.0

Serwer OAuth 2.0 wysyła odpowiedź na żądanie redirect_uri określone w żądaniu tokena dostępu.

Jeśli użytkownik zatwierdzi prośbę, odpowiedź będzie zawierać token dostępu. Jeśli użytkownik nie zatwierdzi żądania, odpowiedź będzie zawierać komunikat o błędzie. Token dostępu lub komunikat o błędzie jest zwracany we fragmencie z identyfikatorem przekierowania, jak w poniższym przykładzie:

  • Odpowiedź tokenem dostępu:

    https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

    Oprócz parametru access_token ciąg znaków fragmentu zawiera też parametr token_type, który zawsze ma wartość Bearer, oraz parametr expires_in, który określa czas życia tokena w sekundach. Jeśli w żądaniu tokena dostępu określono parametr state, jego wartość zostanie uwzględniona w odpowiedzi.

  • Odpowiedź błędu:
    https://oauth2.example.com/callback#error=access_denied

Przykładowa odpowiedź serwera OAuth 2.0

Możesz go przetestować, klikając ten przykładowy adres URL, który prosi o dostęp tylko do odczytu do wyświetlania metadanych plików na Dysku Google:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

Po zakończeniu procesu OAuth 2.0 nastąpi przekierowanie na stronę http://localhost/oauth2callback. Adres URL będzie zwracał błąd 404 NOT FOUND, chyba że Twój komputer lokalny prześle plik pod tym adresem. Kolejny krok zawiera więcej informacji o identyfikatorach zwracanych w identyfikatorze URI, gdy użytkownik jest przekierowywany z powrotem do aplikacji.

Wywołanie interfejsów API Google

Biblioteka klienta JS

Gdy Twoja aplikacja uzyska token dostępu, możesz używać biblioteki klienta JavaScript, aby wysyłać żądania API w imieniu użytkownika. Biblioteka klienta zarządza tokenem dostępu za Ciebie. Nie musisz nic robić, aby wysłać go w żądaniu.

Biblioteka klienta obsługuje dwa sposoby wywoływania metod API. Jeśli załadowano dokument wykrywania, interfejs API określi funkcje za Ciebie. Możesz też użyć funkcji gapi.client.request, by wywołać metodę API. Poniższe 2 fragmenty przedstawiają opcje interfejsu Drive API w about.get.

// Example 1: Use method-specific function
var request = gapi.client.drive.about.get({'fields': 'user'});

// Execute the API request.
request.execute(function(response) {
  console.log(response);
});


// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
  'method': 'GET',
  'path': '/drive/v3/about',
  'params': {'fields': 'user'}
});
// Execute the API request.
request.execute(function(response) {
  console.log(response);
});

Punkty końcowe OAuth 2.0

Gdy aplikacja uzyska token dostępu, możesz go używać do wywoływania interfejsu API Google w imieniu danego konta użytkownika, jeśli przyznano zakresy dostępu wymagane przez interfejs API. Aby to zrobić, umieść token dostępu w żądaniu do interfejsu API, podając parametr zapytania access_token lub wartość nagłówka Authorization nagłówka Bearer. W miarę możliwości zalecamy użycie nagłówka HTTP, ponieważ ciągi zapytania są zwykle widoczne w dziennikach serwera. W większości przypadków biblioteki klienta możesz skonfigurować, aby wywoływać wywołania interfejsów API Google (na przykład podczas wywoływania interfejsu Drive Files API).

Możesz wypróbować wszystkie interfejsy API Google i wyświetlić ich zakresy w Play OAuth 2.0 Playground.

Przykłady użycia HTTP GET

Wywołanie punktu końcowego drive.files (interfejsu Drive Files API) z nagłówkiem HTTP Authorization: Bearer może wyglądać tak: Pamiętaj, że musisz określić własny token dostępu:

GET /drive/v2/files HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Oto wywołanie tego samego interfejsu API dla uwierzytelnionego użytkownika z wykorzystaniem parametru ciągu zapytania access_token:

GET https://www.googleapis.com/drive/v2/files?access_token=access_token

Przykłady zapytań z operatorem curl

Te polecenia możesz przetestować za pomocą aplikacji wiersza poleceń curl. Oto przykład z użyciem opcji nagłówka HTTP (co jest zalecane):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files

Możesz też skorzystać z parametru ciągu zapytania:

curl https://www.googleapis.com/drive/v2/files?access_token=access_token

Przykładowy kod JavaScript

Fragment kodu poniżej pokazuje, jak użyć CORS (udostępniania zasobów między domenami) do wysyłania żądań do interfejsu Google API. W tym przykładzie nie korzystamy z biblioteki klienta interfejsów API Google dla JavaScriptu. Jednak nawet wtedy, gdy nie korzystasz z biblioteki klienta, dokumentacja pomocy CORS w tej bibliotece pomoże Ci lepiej zrozumieć te żądania.

W tym fragmencie kodu zmienna access_token reprezentuje token uzyskany do wysyłania żądań interfejsu API w imieniu autoryzowanego użytkownika. Pełny przykład pokazuje, jak zapisać ten token w pamięci lokalnej przeglądarki i pobrać go podczas wysyłania żądania do interfejsu API.

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/drive/v3/about?fields=user&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

Pełny przykład

Biblioteka klienta JS

Przykładowy kod demonstracyjny

Ta sekcja zawiera działającą demonstrację przykładowego kodu, która pokazuje, jak kod działa w rzeczywistej aplikacji. Gdy zatwierdzisz aplikację, pojawi się ona wśród aplikacji połączonych z Twoim kontem Google. aplikacja nazywa się Demonstracja protokołu OAuth 2.0 dla Dokumentów Google API, Jeśli unieważnisz dostęp tej strony i ją odświeżysz, aplikacja nie będzie już wymieniona.

Pamiętaj, że ta aplikacja prosi o dostęp do zakresu https://www.googleapis.com/auth/drive.metadata.readonly. Dostęp jest wymagany tylko w celu zainicjowania przepływu OAuth 2.0 w aplikacji JavaScript. Ta aplikacja nie wysyła żadnych żądań API.

Przykładowy kod JavaScript

Jak pokazano powyżej, przykładowy kod dotyczy strony (aplikacji), która wczytuje bibliotekę klienta interfejsów API Google dla JavaScriptu i inicjuje przepływ protokołu OAuth 2.0. Strona zawiera:

  • Jeden przycisk, który umożliwia użytkownikowi zalogowanie się w aplikacji. Jeśli użytkownik nie autoryzował wcześniej aplikacji, uruchamia ona proces OAuth 2.0.
  • Dwa przyciski, które umożliwiają użytkownikowi wylogowanie się z aplikacji lub unieważnienie dostępu przyznanego wcześniej aplikacji. Nie wycofujesz wcześniej przyznanego dostępu. Musisz się zalogować jeszcze raz, zanim aplikacja będzie mogła wysyłać w Twoim imieniu inne autoryzowane żądania, ale nie będzie trzeba ponownie przyznawać dostępu przy kolejnym użyciu aplikacji. Jeśli jednak unieważnisz dostęp, musisz ponownie przyznać dostęp.

Dostęp do aplikacji możesz też anulować na stronie Uprawnienia na swoim koncie Google. Aplikacja jest opublikowana jako Wersja demonstracyjna protokołu OAuth 2.0 dla Dokumentów Google API.

<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();

      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }

  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }

  function revokeAccess() {
    GoogleAuth.disconnect();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }

  function updateSigninStatus() {
    setSigninStatus();
  }
</script>

<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>

<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

Punkty końcowe OAuth 2.0

Ten przykładowy kod pokazuje, jak ukończyć przepływ OAuth 2.0 w JavaScript bez korzystania z biblioteki klienta interfejsów API Google dla JavaScript. Kod jest przeznaczony do strony HTML, która wyświetla przycisk pozwalający wykonać żądanie interfejsu API. Gdy go klikniesz, kod sprawdzi, czy strona zapisała token dostępu API w pamięci lokalnej przeglądarki. Jeśli tak, wykonuje żądanie API. W przeciwnym razie inicjuje przepływ OAuth 2.0.

W przypadku procesu OAuth 2.0 strona wykonuje te czynności:

  1. Kieruje on użytkownika na serwer OAuth 2.0 Google, który prosi o dostęp do zakresu https://www.googleapis.com/auth/drive.metadata.readonly.
  2. Po przyznaniu (lub odrzuceniu) dostępu do co najmniej jednego żądanego zakresu użytkownik jest przekierowywany na stronę oryginalną, na której analizuje token dostępu z ciągu identyfikatora fragmentu.
  3. Strona używa tokena dostępu, aby utworzyć przykładowe żądanie API.

    Żądanie interfejsu API wywołuje metodę about.get interfejsu Drive API do pobierania informacji o autoryzowanym koncie użytkownika Dysku Google.

  4. Jeśli żądanie zostanie ukończone, odpowiedź interfejsu API zostanie zarejestrowana w konsoli debugowania przeglądarki.

Dostęp do aplikacji możesz anulować na stronie Uprawnienia na swoim koncie Google. Aplikacja zostanie opublikowana jako Wersja demonstracyjna protokołu OAuth 2.0 dla Dokumentów Google API.

Aby uruchomić ten kod lokalnie, musisz ustawić wartości zmiennych YOUR_CLIENT_ID i YOUR_REDIRECT_URI, które odpowiadają danym autoryzacji. Zmienna YOUR_REDIRECT_URI powinna być ustawiona na ten sam adres URL, pod którym jest wyświetlana strona. Wartość musi być zgodna z jednym z autoryzowanych identyfikatorów URI przekierowania dla klienta OAuth 2.0 skonfigurowanego w API Console Credentials page. Jeśli ta wartość nie będzie zgodna z autoryzowanym identyfikatorem URI, wystąpi błąd redirect_uri_mismatch. Twój projekt musi też włączyć odpowiedni interfejs API dla tego żądania.

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
  var fragmentString = location.hash.substring(1);

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0) {
    localStorage.setItem('oauth2-test-params', JSON.stringify(params) );
    if (params['state'] && params['state'] == 'try_sample_request') {
      trySampleRequest();
    }
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/drive/v3/about?fields=user&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                  'state': 'try_sample_request',
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

Reguły weryfikacji źródła JavaScriptu

Aby ułatwić deweloperom bezpieczeństwo aplikacji, Google stosuje następujące reguły weryfikacji do źródeł JavaScript. Źródła JavaScript muszą być zgodne z tymi regułami. Definicję domeny, hosta i schematu znajdziesz w RFC 3986 (sekcja 3) poniżej.

Reguły weryfikacji
Schemat

Źródła JavaScript muszą używać schematu HTTPS, a nie zwykłego HTTP. Identyfikatory URI lokalnych hostów (w tym identyfikatory URI adresów IP lokalnych hostów) są zwolnione z tej reguły.

Osoba prowadząca

Hosty nie mogą być nieprzetworzonymi adresami IP. Adresy IP lokalnego hosta są zwolnione z tej reguły.

Domena
  • Domeny najwyższego poziomu najwyższego poziomu (domeny najwyższego poziomu) muszą należeć do listy domen publicznych.
  • Domeny hosta nie mogą być typu “googleusercontent.com”.
  • Źródła JavaScript nie mogą zawierać domen skracających adresy URL (np. goo.gl), chyba że właścicielem domeny jest aplikacja.
  • Informacje o użytkowniku

    Źródła JavaScript nie mogą zawierać podkomponentu userinfo.

    Ścieżka

    Źródła JavaScript nie mogą zawierać komponentu ścieżki.

    Zapytanie

    Źródła JavaScript nie mogą zawierać komponentu zapytania.

    Fragment

    Źródła JavaScript nie mogą zawierać komponentu fragmentu.

    Znaki Źródła JavaScript nie mogą zawierać określonych znaków, takich jak:
    • Symbole wieloznaczne ('*')
    • Znaki ASCII niedrukowalne
    • Nieprawidłowe kodowanie procentowe (dowolne kodowanie procentowe nie występuje po zakodowaniu adresu URL z użyciem znaku procenta, po którym następuje dwie cyfry szesnastkowe)
    • Brak znaków (zakodowany znak NULL, np. %00, %C0%80)

    Autoryzacja przyrostowa

    W protokole OAuth 2.0 aplikacja prosi o autoryzację dostępu do zasobów identyfikowanych przez zakresy. Prośba o autoryzację zasobów w odpowiednim momencie jest uznawana za najlepszą metodę zwiększania wygody użytkowników. Aby włączyć tę praktykę, serwer autoryzacji Google i obsługuje autoryzację przyrostową. Ta funkcja umożliwia żądanie zakresów w razie potrzeby. Jeśli użytkownik udzieli zgody na nowy zakres, zostanie zwrócony kod autoryzacji, który można wymienić na token zawierający wszystkie zakresy przyznane przez użytkownika projektowi.

    Na przykład aplikacja, która umożliwia pobieranie utworów muzycznych i tworzenie składanek, może nie mieć wielu zasobów poza nazwą logowania. Zapisanie gotowej składanki wymaga jednak dostępu do Dysku Google. Większość ludzi uznałaby, że prośba o dostęp do Dysku Google pojawia się dopiero wtedy, gdy aplikacja faktycznie jej potrzebuje.

    W takim przypadku przy logowaniu aplikacja może poprosić o zakresy openid i profile, aby przeprowadzić logowanie podstawowe, a potem w momencie pierwszego żądania wysłać prośbę o zapisanie zakresu https://www.googleapis.com/auth/drive.file.

    W przypadku tokena dostępu uzyskanego z przyrostowej autoryzacji obowiązują te reguły:

    • Pozwala on uzyskać dostęp do zasobów odpowiadających dowolnemu zakresowi wdrożonemu w nowej, połączonej autoryzacji.
    • Jeśli używasz tokenu odświeżania połączonej autoryzacji, aby uzyskać token dostępu, token dostępu reprezentuje połączoną autoryzację i może być używany dla dowolnej wartości scope w odpowiedzi.
    • Połączona autoryzacja obejmuje wszystkie zakresy przyznane użytkownikowi przez projekt interfejsu API, nawet jeśli prośby o granty pochodzą od różnych klientów. Jeśli na przykład użytkownik przyznał dostęp do jednego zakresu za pomocą klienta na komputery, a następnie przyznasz innemu zakresowi tę samą aplikację za pomocą klienta mobilnego, łączna autoryzacja będzie obejmować oba zakresy.
    • Jeśli unieważnisz token reprezentujący połączoną autoryzację, dostęp do wszystkich zakresów tej autoryzacji zostanie unieważniony jednocześnie w imieniu powiązanego użytkownika.

    Poniższe przykłady kodu pokazują, jak dodać zakresy do istniejącego tokena dostępu. Dzięki temu Twoja aplikacja nie musi zarządzać wieloma tokenami dostępu.

    Biblioteka klienta JS

    Aby dodać zakresy do istniejącego tokena dostępu, wywołaj metodę GoogleUser.grant(options). Obiekt options wskazuje dodatkowe zakresy, którym chcesz przyznać dostęp.

    // Space-separated list of additional scope(s) you are requesting access to.
    // This code adds read-only access to the user's calendars via the Calendar API.
    var NEW_SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';
    
    // Retrieve the GoogleUser object for the current user.
    var GoogleUser = GoogleAuth.currentUser.get();
    GoogleUser.grant({'scope': NEW_SCOPES});

    Punkty końcowe OAuth 2.0

    Aby dodać zakresy do istniejącego tokena dostępu, umieść parametr include_granted_scopes w żądaniu do serwera OAuth 2.0 Google.

    Poniższy fragment kodu pokazuje, jak to zrobić. Fragment kodu zakłada, że przechowywane są zakresy, w przypadku których token dostępu jest prawidłowy w pamięci lokalnej przeglądarki. (Pełny przykład kodu przechowuje listę zakresów, w przypadku których token dostępu jest prawidłowy, ustawiając właściwość oauth2-test-params.scope w pamięci lokalnej przeglądarki).

    Fragment porównuje zakresy, dla których token dostępu jest prawidłowy, z zakresem, którego chcesz użyć w przypadku konkretnego zapytania. Jeśli token dostępu nie obejmuje tego zakresu, rozpoczyna się proces OAuth 2.0. Funkcja oauth2SignIn jest identyczna z tą, która została udostępniona w kroku 2 (i została udostępniona w późniejszym przykładzie).

    var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    
    var current_scope_granted = false;
    if (params.hasOwnProperty('scope')) {
      var scopes = params['scope'].split(' ');
      for (var s = 0; s < scopes.length; s++) {
        if (SCOPE == scopes[s]) {
          current_scope_granted = true;
        }
      }
    }
    
    if (!current_scope_granted) {
      oauth2SignIn(); // This function is defined elsewhere in this document.
    } else {
      // Since you already have access, you can proceed with the API request.
    }

    Unieważnianie tokena

    W niektórych przypadkach użytkownik może unieważnić dostęp aplikacji. Użytkownik może cofnąć dostęp w ustawieniach konta. Więcej informacji znajdziesz w sekcji pomocy dotyczącej usuwania dostępu do witryn i aplikacji z witryn i aplikacji innych firm, które mają dostęp do Twojego konta.

    Możliwe jest też unieważnienie przez aplikację przyznanego dostępu. Automatyczne unieważnienie jest ważne, jeśli użytkownik anuluje subskrypcję, usunie aplikację lub zasoby interfejsu API wymagane przez aplikację znacznie się zmieniły. Oznacza to, że część procesu usuwania może obejmować żądanie interfejsu API, które zapewnia usunięcie wcześniej przyznanych uprawnień aplikacji.

    Biblioteka klienta JS

    Aby automatycznie unieważnić token, wywołaj GoogleAuth.disconnect():

    GoogleAuth.disconnect();

    Punkty końcowe OAuth 2.0

    Aby automatycznie unieważnić token, aplikacja wysyła żądanie do https://oauth2.googleapis.com/revoke i uwzględnia go jako parametr:

    curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
            https://oauth2.googleapis.com/revoke?token={token}

    Może to być token dostępu lub token odświeżania. Jeśli token jest tokenem dostępu i ma przypisany token odświeżania, też zostanie on unieważniony.

    Jeśli odwołanie zostało pomyślnie przetworzone, kod stanu HTTP odpowiedzi będzie wynosił 200. W przypadku błędów zwracany jest kod stanu HTTP 400 wraz z kodem błędu.

    Ten fragment kodu JavaScript pokazuje, jak unieważnić token w JavaScript, nie używając w tym celu biblioteki klienta interfejsów API Google. Ponieważ punkt końcowy Google OAuth 2.0 do unieważniania tokenów nie obsługuje udostępniania zasobów między domenami (CORS), kod tworzy formularz i przesyła go do punktu końcowego zamiast przy użyciu metody XMLHttpRequest() do opublikowania żądania.

    function revokeAccess(accessToken) {
      // Google's OAuth 2.0 endpoint for revoking access tokens.
      var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';
    
      // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
      var form = document.createElement('form');
      form.setAttribute('method', 'post');
      form.setAttribute('action', revokeTokenEndpoint);
    
      // Add access token to the form so it is set as value of 'token' parameter.
      // This corresponds to the sample curl request, where the URL is:
      //      https://oauth2.googleapis.com/revoke?token={token}
      var tokenField = document.createElement('input');
      tokenField.setAttribute('type', 'hidden');
      tokenField.setAttribute('name', 'token');
      tokenField.setAttribute('value', accessToken);
      form.appendChild(tokenField);
    
      // Add form to page and submit it to actually revoke the token.
      document.body.appendChild(form);
      form.submit();
    }