JavaScript Web Uygulamaları için OAuth 2.0'ı Kullanma

OAuth 2.0 Uç Noktaları

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

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

Google'ın yetkilendirme sunucusuna örnek yönlendirme

Aşağıdaki örnek URL, kullanıcının YouTube hesabını görüntüleme izni veren bir kapsama çevrimdışı erişim (access_type=offline) istiyor. Bu özellik, yeni erişim jetonunun kullanıcının daha önce uygulama erişimi verdiği tüm kapsamları kapsadığından emin olmak için artımlı yetkilendirme kullanır. URL, gerekli redirect_uri, response_type ve client_id parametrelerinin yanı sıra state parametresinin değerlerini de ayarlar. URL, okunabilirlik için satır sonları ve boşluklar içeriyor.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 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ığı'nı kullanmadan JavaScript'te yetkilendirme akışının nasıl başlatılacağını gösterir. Bu OAuth 2.0 uç noktası, Kaynaklar Arası Kaynak Paylaşımı'nı (CORS) desteklemediğinden snippet, isteği ilgili uç noktaya açan bir form oluşturur.

/*
 * 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, erişim jetonu isteğinizde belirtilen redirect_uri öğesine bir yanıt gönderir.

Kullanıcı isteği onaylarsa yanıt bir erişim jetonu içerir. Kullanıcı isteği onaylamazsa yanıt bir hata mesajı içerir. 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

  Parça dizesi, access_token parametresine ek olarak her zaman Bearer olarak ayarlanmış token_type parametresini ve jetonun kullanım süresini saniye cinsinden belirten expires_in parametresini de içerir. Erişim jetonu isteğinde state parametresi belirtilmişse bu parametrenin 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ı

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

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

OAuth 2.0 akışını tamamladıktan sonra http://localhost/oauth2callback sitesine yönlendirileceksiniz. Yerel makineniz söz konusu adreste bir dosya sunmadığı sürece bu URL, 404 NOT FOUND hatası verir. Bir sonraki adım, kullanıcı uygulamanıza tekrar yönlendirildiğinde URI'de döndürülen bilgiler hakkında daha ayrıntılı bilgi sağlar.

OAuth 2.0 Uç Noktaları

Uygulamanız bir erişim jetonu aldıktan sonra, API'nin ihtiyaç duyduğu erişim kapsamları verildiyse bu jetonu belirli bir kullanıcı hesabı adına Google API'ye çağrı yapmak için kullanabilirsiniz. Bunu yapmak için bir access_token sorgu parametresi veya Authorization HTTP başlığı Bearer değeri ekleyerek API'ye yapılan bir isteğe erişim jetonunu dahil edin. Sorgu dizeleri, sunucu günlüklerinde genellikle görünür olduğundan, mümkünse HTTP üst bilgisi tercih edilir. Çoğu durumda, Google API'lerine yapılan çağrılarınızı ayarlamak için bir istemci kitaplığı kullanabilirsiniz (örneğin, YouTube Data API'yi çağırırken).

YouTube Data API'nin hizmet hesaplarını yalnızca plak şirketleri ve film stüdyoları gibi birden fazla YouTube kanalına sahip ve yöneten YouTube içerik sahipleri için desteklediğini unutmayın.

Tüm Google API'lerini deneyebilir ve OAuth 2.0 Playground'da kapsamlarını görüntüleyebilirsiniz.

HTTP GET örnekleri

Authorization: Bearer HTTP üst bilgisi kullanılarak youtube.channels uç noktasına (YouTube Data API) yapılan çağrı aşağıdaki gibi görünebilir. Kendi erişim jetonunuzu belirtmeniz gerektiğini unutmayın:

GET /youtube/v3/channels?part=snippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Aşağıda, access_token sorgu dizesi parametresini kullanarak kimliği doğrulanmış kullanıcı için aynı API'ye yapılan bir çağrıyı görebilirsiniz:

GET https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

curl örnekleri

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

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true

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

curl https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

JavaScript örnek kodu

Aşağıdaki kod snippet'i, Google API'ye istek göndermek için CORS'un (Kaynaklar arası kaynak paylaşımı) nasıl kullanılacağını gösterir. Bu örnekte, JavaScript için Google API'leri İstemci Kitaplığı kullanılmaz. Ancak istemci kitaplığını kullanmıyor olsanız bile, ilgili kitaplığın belgelerindeki CORS destek kılavuzu bu istekleri daha iyi anlamanıza yardımcı olacaktır.

Bu kod snippet'inde access_token değişkeni, yetkili kullanıcı adına API istekleri yapmak için aldığınız jetonu temsil eder. Eksiksiz bir örnek, tarayıcının yerel depolama alanında bu jetonun nasıl saklanacağını ve bir API isteğinde bulunurken nasıl alınacağını gösterir.

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/v3/channels?part=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ığı kullanılmadan JavaScript'te OAuth 2.0 akışının nasıl tamamlanacağı gösterilmektedir. Kod, API isteğini deneme düğmesini görüntüleyen bir HTML sayfası içindir. Düğmeyi tıklarsanız kod, sayfanın tarayıcınızın yerel depolama alanında bir API erişim jetonu depolayıp depolamadığını kontrol eder. Bu durumda, API isteğini yürütür. Aksi takdirde 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. Sunucu da https://www.googleapis.com/auth/youtube.force-ssl kapsamına erişim isteğinde bulunur.
2. Bir veya daha fazla istenen kapsama erişim izni verildikten (veya reddedildikten) sonra kullanıcı, erişim jetonunu parça tanımlayıcı dizesinden ayrıştıran orijinal sayfaya yönlendirilir.

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

   Bu API isteği, yetkili kullanıcının YouTube kanalı hakkında veri almak için YouTube Data API'nin channels.list yöntemini çağırır.

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

Google Hesabınızın İzinler sayfasından uygulamaya erişimi iptal edebilirsiniz. Uygulama, Google API Dokümanları için OAuth 2.0 Demo olarak listelenir.

Bu kodu yerel olarak çalıştırmak istiyorsanız yetkilendirme kimlik bilgilerinize karşılık gelen YOUR_CLIENT_ID ve YOUR_REDIRECT_URI değişkenleri için değerler belirlemeniz gerekir. YOUR_REDIRECT_URI değişkeni, sayfanın sunulduğu URL'ye ayarlanmalıdır. Değer, OAuth 2.0 istemcisi için API Console Credentials pageiçinde yapılandırdığınız yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir. Bu değer, yetkili bir URI ile eşleşmezse redirect_uri_mismatch hatası alırsınız. Projenizin bu istek için uygun API'yi de etkinleştirmiş olması gerekir.

<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/channels?part=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 uygulamaya önceden vermiş olduğu diğer erişimlerin yanı sıra YouTube Analytics verilerini de almak için erişim isteğinde bulunur.

Mevcut bir erişim jetonuna kapsam eklemek için Google'ın OAuth 2.0 sunucusuna yönelik isteğinize include_granted_scopes parametresini dahil edin.

Aşağıdaki kod snippet'i bunun nasıl yapılacağını göstermektedir. Snippet, tarayıcının yerel depolama alanında erişim jetonunuzun geçerli olduğu kapsamları depoladığınızı varsayar. (Eksiksiz örnek kodunda, tarayıcının yerel depolama alanındaki oauth2-test-params.scope özelliği ayarlanarak erişim jetonunun geçerli olduğu kapsamların listesi yer alır.)

Snippet, erişim jetonunun geçerli olduğu kapsamları, belirli bir sorgu için kullanmak istediğiniz kapsamla karşılaştırır. Erişim jetonu bu kapsamı içermiyorsa OAuth 2.0 akışı başlar. Burada oauth2SignIn işlevi, 2. adımda sağlananla (ve eksiksiz örnekte sağlanmış olan) aynıdır.

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 kaynağına istek gönderir 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 buna karşılık gelen bir yenileme jetonu varsa yenileme jetonu da iptal edilir.

İptal başarıyla işlenirse yanıtın HTTP durum kodu 200 olur. Hata koşulları için hata koduyla birlikte 400 HTTP durum kodu döndürülür.

Aşağıdaki JavaScript snippet'inde, JavaScript için Google API'leri İstemci Kitaplığı kullanılmadan JavaScript'te bir jetonun nasıl iptal edileceği gösterilmektedir. Google'ın jetonları iptal etmeye yönelik OAuth 2.0 uç noktası, Kaynaklar Arası Kaynak Paylaşımı'nı (CORS) desteklemediğinden kod, bir form oluşturur ve isteği yayınlamak için XMLHttpRequest() yöntemini kullanmak yerine formu uç noktaya gönderir.

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