İstemci tarafı web uygulamaları için OAuth 2.0'ı kullanma

OAuth 2.0 Uç Noktaları

Şu adresteki Google OAuth 2.0 uç noktasından erişim istemek için bir URL oluşturun: https://accounts.google.com/o/oauth2/v2/auth Bu uç noktaya HTTPS üzerinden erişilebilir; düz HTTP bağlantıları reddedilir.

Google yetkilendirme sunucusu, web için aşağıdaki sorgu dizesi parametrelerini destekler sunucu uygulamaları:

Google'ın yetkilendirme sunucusuna örnek yönlendirme

Aşağıda, okunabilirlik için satır sonları ve boşluklar içeren örnek bir URL gösterilmiştir. URL istekleri kullanıcının YouTube verilerine erişim izni veren bir kapsama erişebilir. Artımlı yaklaşım yeni erişim jetonunun bulunduğundan emin olmak için yetkilendirme (include_granted_scopes=true) kullanıcının daha önce uygulama erişimi verdiği tüm kapsamları kapsar. Birkaç başka parametreleri de örnek olarak belirtilmiştir.

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

İstek URL'sini oluşturduktan sonra kullanıcıyı bu URL'ye yönlendirin.

JavaScript örnek kodu

Aşağıdaki JavaScript snippet'i, JavaScript için Google API'leri İstemci Kitaplığı kullanmadan JavaScript. Bu OAuth sürümünden itibaren 2.0 uç noktası, Kaynaklar Arası Kaynak Paylaşımı'nı (CORS) desteklemez. Snippet, bir formunu doldurun.

/*
 * 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 Uç Noktaları

OAuth 2.0 sunucusu,redirect_uri erişim jetonu isteği.

Kullanıcı isteği onaylarsa yanıt bir erişim jetonu içerir. Kullanıcı isteği onaylamazsa yanıtta hata mesajı gösterilir. Erişim jetonu veya hata mesajı aşağıda gösterildiği gibi yönlendirme URI'sinin karma parçasında döndürülür:

• Erişim jetonu yanıtı:

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

  access_token parametresine ek olarak parça dizesi de her zaman şuna ayarlı token_type parametresini içerir: Bearer ve expires_in parametresi, jetonun kullanım süresi (saniye cinsinden). state parametresi belirtildiyse isteğine dahil edilirse bu koşulun değeri yanıta da dahil edilir.

• Hata yanıtı:

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

Örnek OAuth 2.0 sunucu yanıtı

Aşağıdaki örnek URL'yi tıklayarak bu akışı test edebilirsiniz. URL'de Google Drive'ınızdaki dosyaların meta verilerini görüntülemek için salt okuma erişimi:

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

OAuth 2.0 akışını tamamladıktan sonra şuraya yönlendirileceksiniz: http://localhost/oauth2callback Bu URL, 404 NOT FOUND hatası yalnızca yerel makineniz bir dosyayı bu adrese gidin. Bir sonraki adım, Kullanıcı tekrar uygulamanıza yönlendirildiğinde gösterilecek URI.

OAuth 2.0 Uç Noktaları

Uygulamanız bir erişim jetonu aldıktan sonra, bu jetonu kullanarak bir Google Belirli bir kullanıcı adına API kullanıcı hesabı(API'nin gerektirdiği erişim kapsamları verildiyse) ile birlikte çalışır. Bunu yapmak için API'ye yapılan bir istekte, access_token sorgusu ekleyerek erişim jetonunu parametresi veya Authorization HTTP başlığı Bearer değeri olabilir. Mümkünse HTTP üstbilgisi tercih edilir, çünkü sorgu dizeleri sunucu günlüklerinde görünür olma eğilimindedir. Çoğu zaman Google API'lerine yapılan çağrılarınızı ayarlamak için bir istemci kitaplığı kullanabilirsiniz (örneğin, YouTube Live Streaming API'yi çağırma).

YouTube Live Streaming API, hizmet hesabı akışını desteklemez. Bu tarihten beri bir Hizmet Hesabı'nı bir YouTube hesabına bağlamanın bir yolu yoktur. İstekleri bu hesapla yetkilendirmeye çalışır akışı NoLinkedYouTubeAccount hatası oluşturur.

Tüm Google API'lerini deneyebilir ve kapsamlarını şuradan görüntüleyebilirsiniz: OAuth 2.0 Playground (OAuth 2.0 Oyun Alanı).

HTTP GET örnekleri

Bir liveBroadcasts.list Authorization: Bearer HTTP kullanan uç nokta (YouTube Live Streaming API) başlık aşağıdaki gibi görünebilir. Kendi erişim jetonunuzu belirtmeniz gerektiğini unutmayın:

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

Aşağıda, kimliği doğrulanmış kullanıcı için aynı API'ye access_token kullanılarak yapılan bir çağrı verilmiştir. sorgu dizesi parametresi:

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

curl örnek

Bu komutları curl komut satırı uygulamasıyla test edebilirsiniz. Bir HTTP üstbilgisi seçeneğini kullanan bir örnek (tercih edilen):

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

Alternatif olarak, sorgu dizesi parametre seçeneği şu şekildedir:

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

JavaScript örnek kodu

Aşağıdaki kod snippet'i, bir isteği gönderin. Bu örnekte, JavaScript için Google API'leri İstemci Kitaplığı kullanılmaz. Ancak, istemci kitaplığını kullanmıyor olsanız bile Bu kütüphanenin belgelerindeki CORS destek rehberi size yardımcı olacaktır göz atabilirsiniz.

Bu kod snippet'inde access_token değişkeni, sahip olduğunuz jetonu temsil eder yetkili kullanıcı adına API isteklerinde bulunmak için. Tamamlanan example, tarayıcının yerel depolama alanında bu jetonun nasıl depolanacağını ve jetonun nasıl alınacağını gösterir lütfen unutmayın.

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 Uç Noktaları

Bu kod örneğinde, JavaScript için Google API'leri İstemci Kitaplığı. Bu kod, bir düğmenin yer aldığı bir HTML sayfası için bir API isteği gönderin. Düğmeyi tıklarsanız kod, sayfada bir Tarayıcınızın yerel depolama alanındaki API erişim jetonu. Bu durumda, API isteğini yürütür. Aksi halde OAuth 2.0 akışını başlatır.

OAuth 2.0 akışı için sayfa şu adımları izler:

1. Kullanıcıyı Google'ın OAuth 2.0 sunucusuna yönlendirir. Bu sunucu, https://www.googleapis.com/auth/youtube.force-ssl kapsamı.
2. İstenen bir veya daha fazla kapsama erişim izni verdikten (veya reddettikten) sonra kullanıcı şuraya yönlendirilir: parça tanımlayıcısı dizesinden erişim jetonunu ayrıştıran orijinal sayfa.

3. Sayfa, örnek API isteğinde bulunmak için erişim jetonunu kullanır.

   Bu API isteği, YouTube Data API'nin liveBroadcasts.list çağrısını yapıyor yöntemini kullanın.

4. İstek başarıyla yürütülürse API yanıtı, tarayıcının hata ayıklama sayfasına kaydedilir konsolu.

Uygulamaya erişimi şuradan iptal edebilirsiniz: İzinler sayfası: Google Hesabı. Uygulama, Google API Dokümanları için OAuth 2.0 Demo olarak listelenir.

Bu kodu yerel olarak çalıştırmak istiyorsanız YOUR_CLIENT_ID ve YOUR_REDIRECT_URI sizin yetkilendirme kimlik bilgileri. YOUR_REDIRECT_URI değişkeni sayfanın sunulduğu URL'ye ayarlanmalıdır. Değer, şunlardan biriyle tam olarak eşleşmelidir: OAuth 2.0 istemcisi için, API Console Credentials pageEğer bu değer yetkili bir URI ile eşleşmezse bir redirect_uri_mismatch alırsınız hatası. Projeniz ayrıca Bu istek için uygun API'yi etkinleştirdiğinizden emin olun.

<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 Uç Noktaları

Bu örnekte, çağıran uygulama Kullanıcının erişebildiği diğer tüm erişimlere ek olarak izin vermiş olursunuz.

Mevcut bir erişim jetonuna kapsam eklemek için include_granted_scopes dahil edin Google'ın OAuth 2.0 sunucusuna gönderilen isteğinizde parametresini içermelidir.

Aşağıdaki kod snippet'i bunun nasıl yapılacağını göstermektedir. Snippet, büyük resmi depoladığınızı varsayar Tarayıcının yerel depolama alanında erişim jetonunuzun geçerli olduğu kapsamlar. ( complete example kodu, erişim jetonunun geldiği kapsamların bir listesini depolar tarayıcının yerel ayarında oauth2-test-params.scope özelliği ayarlanarak geçerli olur. storage.)

Snippet, erişim jetonunun geçerli olduğu kapsamları kullanmak istediğiniz kapsamla karşılaştırır geçiş yapabilirsiniz. Erişim jetonu bu kapsamı içermiyorsa OAuth 2.0 akışı başlar. Burada, oauth2SignIn işlevi 2. Adım (ve bu adım tamamlanan örneğine bakın).

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 Uç Noktaları

Uygulamanız, bir jetonu programlı bir şekilde iptal etmek için https://oauth2.googleapis.com/revoke ve jetonu parametre olarak ekler:

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

Bu jeton bir erişim jetonu veya yenileme jetonu olabilir. Jeton bir erişim jetonuysa ve bir yenileme jetonu varsa yenileme jetonu da iptal edilir.

İptal işlemi başarıyla tamamlanırsa yanıtın HTTP durum kodu 200 Hata koşulları için 400 ile birlikte HTTP durum kodu döndürülür hata kodu içerir.

Aşağıdaki JavaScript snippet'i, JavaScript için Google API'leri İstemci Kitaplığı. İptal işlemi için Google'ın OAuth 2.0 uç noktasından itibaren jetonlar Arası Kaynak Paylaşımı'nı (CORS) desteklemiyorsa, kod bir form oluşturur ve göndermek için XMLHttpRequest() yöntemini kullanmak yerine formu uç noktaya isteği gönderin.

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