Korzystanie z protokołu OAuth 2.0 w aplikacjach internetowych po stronie klienta

OAuth 2.0 Endpoints

Wygeneruj URL, aby poprosić o dostęp z punktu końcowego OAuth 2.0 Google na 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 w przypadku stron internetowych te parametry ciągu zapytania aplikacje serwerowe:

Przykładowe przekierowanie na serwer autoryzacji Google

Przykładowy adres URL podano poniżej ze znakami podziału wiersza i spacjami, aby zapewnić czytelność. Adres URL wysyła żądania Dostęp do zakresu, który umożliwia pobieranie danych użytkownika z YouTube. Wykorzystuje przyrostowe (include_granted_scopes=true), by zagwarantować, że nowy token dostępu obejmuje wszystkie zakresy, do których użytkownik przyznał wcześniej dostęp aplikacji. Kilka innych określone w przykładzie.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 client_id=client_id

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

Przykładowy kod JavaScript

Poniższy fragment kodu JavaScript pokazuje, jak rozpocząć proces autoryzacji JavaScript bez biblioteki klienta interfejsów API Google dla JavaScriptu. Ponieważ ten protokół OAuth Punkt końcowy 2.0 nie obsługuje współdzielenia zasobów między pochodzeniem (CORS), fragment kodu tworzy który otworzy żą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/youtube.force-ssl',
                '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();
}

OAuth 2.0 Endpoints

Serwer OAuth 2.0 wysyła odpowiedź do redirect_uri określonego w żądania tokena dostępu.

Jeśli użytkownik zatwierdzi żądanie, 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 we fragmencie z krzyżykiem identyfikatora URI przekierowania jest zwracany komunikat o błędzie, jak pokazano poniżej:

• Odpowiedź tokena 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 z fragmentem zawiera parametr token_type, który jest zawsze ustawiony na Bearer oraz parametru expires_in, który określa czas życia tokena w sekundach. Jeśli parametr state został określony w żądaniu tokena dostępu, jego wartość jest również uwzględniona w odpowiedzi.

• Odpowiedź o błędzie:

  https://oauth2.example.com/callback#error=access_denied

Przykładowa odpowiedź serwera OAuth 2.0

Możesz przetestować ten proces, klikając poniższy przykładowy adres URL, który dostęp tylko do odczytu z możliwością wyświetlania metadanych plików na Dysku Google:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 client_id=client_id

Po zakończeniu procesu OAuth 2.0 przekierujemy Cię do strony http://localhost/oauth2callback Ten adres URL wygeneruje 404 NOT FOUND błąd, chyba że na komputerze lokalnym wyświetli się plik pod adresem pod tym adresem. W kolejnym kroku znajdziesz więcej informacji o informacjach zwracanych w Identyfikator URI, gdy użytkownik jest przekierowywany z powrotem do aplikacji.

OAuth 2.0 Endpoints

Gdy aplikacja uzyska token dostępu, możesz go używać do wywoływania API w imieniu danego konta użytkownika, jeśli zostały przyznane zakresy dostępu wymagane przez interfejs API. Aby to zrobić, dołącz token dostępu w żądaniu wysyłanym do interfejsu API przez dodanie zapytania access_token; lub wartość nagłówka HTTP Authorization Bearer. Jeśli to możliwe, preferowany jest nagłówek HTTP, ponieważ ciągi zapytań są zwykle widoczne w dziennikach serwera. Najwięcej można użyć biblioteki klienta do skonfigurowania wywołań interfejsów API Google (na przykład wywołaniem interfejsu YouTube Live Streaming API).

Pamiętaj, że interfejs YouTube Live Streaming API nie obsługuje procesu konta usługi. Od tego dnia nie pozwala połączyć konta usługi z kontem YouTube, próbuje autoryzować żądania za pomocą tego proces wygeneruje błąd NoLinkedYouTubeAccount.

Wszystkie interfejsy API Google możesz wypróbować i przejrzeć ich zakresy na stronie OAuth 2.0 Playground.

Przykłady żądań HTTP GET

Wywołanie funkcji liveBroadcasts.list (interfejs YouTube Live Streaming API) za pomocą protokołu HTTP Authorization: Bearer nagłówek może wyglądać tak: Pamiętaj, że musisz podać własny token dostępu:

GET /youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Oto wywołanie tego samego interfejsu API dla uwierzytelnionego użytkownika za pomocą interfejsu access_token parametr ciągu zapytania:

GET https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true

curl przykładu

Możesz je przetestować za pomocą aplikacji wiersza poleceń curl. Oto przykład wykorzystujący opcję nagłówka HTTP (preferowane):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true

Możesz też użyć opcji parametru ciągu zapytania:

curl https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true

Przykładowy kod JavaScript

Fragment kodu poniżej pokazuje, jak używać CORS (udostępniania zasobów między domenami) do wysyłania do interfejsu API Google. W tym przykładzie nie korzystamy z biblioteki klienta interfejsów API Google dla JavaScriptu. Nawet jeśli nie korzystasz z biblioteki klienta, pomocy CORS w dokumentacji tej biblioteki. do lepszego zrozumienia tych próśb.

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

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id,snippet&mine=true' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

OAuth 2.0 Endpoints

Ten przykładowy kod pokazuje, jak wykonać przepływ OAuth 2.0 w JavaScripcie bez użycia Biblioteka klienta interfejsów API Google do obsługi JavaScriptu. Kod jest przeznaczony dla strony HTML, która wyświetla przycisk spróbuj wysłać żądanie do interfejsu API. Jeśli go klikniesz, kod sprawdzi, czy strona zapisała Token dostępu API w pamięci lokalnej przeglądarki. Jeśli tak, wykonuje żądanie do interfejsu API. W przeciwnym razie inicjuje przepływ OAuth 2.0.

W przypadku procesu OAuth 2.0 na stronie wykonaj te czynności:

1. Kieruje użytkownika do serwera OAuth 2.0 Google, który żąda dostępu do Zakres: https://www.googleapis.com/auth/youtube.force-ssl.
2. Po przyznaniu (lub odmówieniu) dostępu do co najmniej 1 żądanego zakresu użytkownik jest przekierowywany do stronie oryginalnej, która analizuje token dostępu z ciągu znaków identyfikatora fragmentu.

3. Strona używa tokena dostępu do przykładowego żądania do interfejsu API.

   To żądanie do interfejsu API wywołuje liveBroadcasts.list interfejsu YouTube Data API. umożliwia pobranie listy transmisji wideo na kanale YouTube autoryzowanego użytkownika.

4. Jeśli żądanie się powiedzie, odpowiedź interfejsu API zostanie zarejestrowana w interfejsie debugowania przeglądarki konsoli.

Dostęp do aplikacji możesz cofnąć w na stronie Uprawnienia Konto Google. Aplikacja będzie widoczna jako Wersja demonstracyjna OAuth 2.0 w Dokumentach interfejsu Google API.

Aby uruchomić ten kod lokalnie, musisz ustawić wartości dla: YOUR_CLIENT_ID i YOUR_REDIRECT_URI zmiennych, które odpowiadają danych logowania. Zmienna YOUR_REDIRECT_URI powinien zawierać ten sam adres URL, pod którym jest wyświetlana strona. Wartość musi dokładnie pasować do jednego ze autoryzowane identyfikatory URI przekierowania dla klienta OAuth 2.0 skonfigurowane w API Console Credentials page. Jeśli ta wartość nie jest zgodna z autoryzowanym identyfikatorem URI, otrzymasz redirect_uri_mismatch . Twój projekt musi też mieć 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';

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

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // 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/youtube/v3/liveBroadcasts?part=id,snippet&mine=true' +
          '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() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // 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/youtube.force-ssl',
                  'state': state,
                  '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>

OAuth 2.0 Endpoints

W tym przykładzie aplikacja wywołująca prosi o dostęp do pobrania danych YouTube użytkownika, oprócz wszelkich innych uprawnień dostępu, aplikacja została już udzielona.

Aby dodać zakresy do istniejącego tokena dostępu, dołącz include_granted_scopes w żądaniu wysyłanym do serwera Google OAuth 2.0.

Fragment kodu poniżej pokazuje, jak to zrobić. Fragment zakłada, że zapisane dane zakresy, dla których token dostępu jest prawidłowy w pamięci lokalnej przeglądarki. (Parametr pełny przykład zawiera listę zakresów, dla których token dostępu jest prawidłowe po ustawieniu właściwości oauth2-test-params.scope w ustawieniach storage.)

Fragment kodu porównuje zakresy, dla których token dostępu jest prawidłowy, z zakresem, którego chcesz użyć dla konkretnego zapytania. Jeśli token dostępu nie obejmuje tego zakresu, rozpoczyna się przepływ OAuth 2.0. W tym przypadku funkcja oauth2SignIn jest taka sama jak funkcja podana w kroku 2 (opisanego później w pełnym przykład).

var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl';
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.
}

OAuth 2.0 Endpoints

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

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

Tokenem może być token dostępu lub token odświeżania. Jeśli token jest tokenem dostępu i ma parametr token odświeżania, token odświeżania również zostanie unieważniony.

Jeśli odwołanie zostanie przetworzone, kod stanu HTTP odpowiedzi będzie miał postać 200 W przypadku wystąpienia błędu zwracany jest kod stanu HTTP 400. z kodem błędu.

Poniższy fragment kodu JavaScript pokazuje, jak unieważnić token w JavaScript bez użycia Biblioteka klienta interfejsów API Google do obsługi JavaScriptu. Ponieważ punkt końcowy OAuth 2.0 Google do unieważniania tokeny nie obsługują współdzielenia zasobów między domenami (CORS), kod tworzy formularz i przesyła do punktu końcowego, zamiast używać metody XMLHttpRequest() do publikowania użytkownika.

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