İstemci Tarafı Web Uygulamaları için OAuth 2.0

Bu dokümanda, Google API'lerine bir JavaScript web uygulamasından erişmek için OAuth 2.0 yetkilendirmesinin nasıl uygulanacağı açıklanmaktadır. OAuth 2.0, kullanıcıların kullanıcı adlarını, şifrelerini ve diğer bilgilerini gizli tutarken bir uygulamayla belirli verileri paylaşmasına olanak tanır. Örneğin bir uygulama, kullanıcılardan Google Drive'larında dosya depolama izni almak için OAuth 2.0'ı kullanabilir.

Bu OAuth 2.0 akışına dolaylı erişim izni denir. Yalnızca kullanıcı uygulamadayken API'lere erişen uygulamalar için tasarlanmıştır. Bu uygulamalar gizli bilgileri depolayamaz.

Bu akışta, uygulamanızı tanımlamak için sorgu parametrelerini kullanan bir Google URL'si ve uygulamanın gerektirdiği API erişimi türü açılır. URL'yi geçerli tarayıcı penceresinde veya bir pop-up'ta açabilirsiniz. Kullanıcı Google ile kimlik doğrulaması yapabilir ve istenen izinleri verebilir. Ardından Google, kullanıcıyı tekrar uygulamanıza yönlendirir. Yönlendirme, uygulamanızın doğrulayıp API istekleri yapmak için kullandığı bir erişim jetonu içerir.

Google API'leri İstemci Kitaplığı ve Google Kimlik Hizmetleri

Google'a yetkili çağrılar yapmak amacıyla JavaScript için Google API'leri istemci kitaplığını kullanıyorsanız OAuth 2.0 akışını yönetmek üzere Google Kimlik Hizmetleri JavaScript kitaplığını kullanmanız gerekir. Lütfen OAuth 2.0 dolaylı erişim akışına dayanan Google kimlik hizmetleri jeton modeline bakın.

Ön koşullar

Projeniz için API'leri etkinleştirin

Google API'lerini çağıran tüm uygulamaların API Console'da bu API'leri etkinleştirmesi gerekir.

Projenizde bir API'yi etkinleştirmek için:

  1. Open the API Library içinde Google API Console.
  2. If prompted, select a project, or create a new one.
  3. Kullanılabilir API Library API'ler ürün ailesine ve popülerliğe göre gruplandırılmış olarak listelenir. Etkinleştirmek istediğiniz API listede görünmüyorsa bulmak için aramayı kullanın veya ait olduğu ürün ailesinde Tümünü Görüntüle'yi tıklayın.
  4. Etkinleştirmek istediğiniz API'yi seçip Etkinleştir düğmesini tıklayın.
  5. If prompted, enable billing.
  6. If prompted, read and accept the API's Terms of Service.

Yetkilendirme kimlik bilgileri oluşturma

Google API'lerine erişmek için OAuth 2.0 kullanan tüm uygulamalar, uygulamayı Google'ın OAuth 2.0 sunucusuna tanımlayan yetkilendirme kimlik bilgilerine sahip olmalıdır. Aşağıdaki adımlarda projeniz için kimlik bilgilerinin nasıl oluşturulacağı açıklanmaktadır. Daha sonra uygulamalarınız bu proje için etkinleştirdiğiniz API'lere erişmek üzere kimlik bilgilerini kullanabilir.

  1. Go to the Credentials page.
  2. Kimlik bilgisi oluştur > OAuth istemci kimliği seçeneğini tıklayın.
  3. Web uygulaması uygulama türünü seçin.
  4. Formu doldurun. Yetkilendirilmiş Google API isteklerinde bulunmak için JavaScript kullanan uygulamalar, yetkili JavaScript kaynaklarını belirtmelidir. Kaynaklar, uygulamanızın OAuth 2.0 sunucusuna istek gönderebileceği alanları tanımlar. Bu kaynaklar Google'ın doğrulama kurallarına uygun olmalıdır.

Erişim kapsamlarını belirleme

Kapsamlar, uygulamanızın yalnızca ihtiyaç duyduğu kaynaklara erişim isteğinde bulunurken kullanıcıların da uygulamanıza verdikleri erişim miktarını kontrol etmelerine olanak tanır. Bu nedenle, istenen kapsam sayısı ile kullanıcı izni alma olasılığı arasında ters bir ilişki olabilir.

OAuth 2.0 yetkilendirmesini uygulamaya başlamadan önce uygulamanızın erişim izni alması gereken kapsamları belirtmenizi öneririz.

OAuth 2.0 API Kapsamları belgesinde, Google API'lerine erişmek için kullanabileceğiniz kapsamların tam listesi bulunmaktadır.

OAuth 2.0 erişim jetonları elde etme

Aşağıdaki adımlarda, uygulamanızın, kullanıcı adına API isteği gerçekleştirmek için kullanıcının iznini almak amacıyla Google'ın OAuth 2.0 sunucusuyla nasıl etkileşimde bulunduğu gösterilmektedir. Uygulamanızın, kullanıcı yetkilendirme gerektiren bir Google API isteği gerçekleştirebilmesi için önce izin vermesi gerekir.

1. Adım: Google'ın OAuth 2.0 sunucusuna yönlendirin

Bir kullanıcının verilerine erişme izni istemek için kullanıcıyı Google'ın OAuth 2.0 sunucusuna yönlendirin.

OAuth 2.0 Uç Noktaları

Google'ın https://accounts.google.com/o/oauth2/v2/auth adresindeki 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:

Parametreler
client_id Zorunlu

Uygulamanızın istemci kimliği. Bu değeri API Console Credentials pagebölümünde bulabilirsiniz.
redirect_uri Zorunlu

Kullanıcı, yetkilendirme akışını tamamladıktan sonra API sunucusunun kullanıcıyı nereye yönlendireceğini belirler. Değerin, istemcinizin API Console Credentials pagebölümünde yapılandırdığınız OAuth 2.0 istemcisinin yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmesi gerekir. Bu değer, sağlanan client_id için yetkili bir yönlendirme URI'si ile eşleşmezse redirect_uri_mismatch hatası alırsınız.

http veya https şeması, büyük/küçük harf ve sondaki eğik çizgi ("/") eşleşmelidir.
response_type Zorunlu

JavaScript uygulamalarının, parametrenin değerini token olarak ayarlaması gerekir. Bu değer, Google Yetkilendirme Sunucusu'na, kullanıcının yetkilendirme işlemini tamamladıktan sonra yönlendirildiği URI'nın (#) parça tanımlayıcısında bir name=value çifti olarak erişim jetonunu döndürmesini bildirir.
scope Zorunlu

Uygulamanızın, kullanıcı adına erişebileceği kaynakları tanımlayan, boşlukla sınırlandırılmış kapsam listesi. Bu değerler, Google'ın kullanıcıya gösterdiği izin ekranını belirtir.

Kapsamlar, uygulamanızın yalnızca ihtiyaç duyduğu kaynaklara erişim istemesine imkan tanırken kullanıcıların uygulamanıza verdikleri erişim miktarını kontrol etmelerine olanak tanır. Bu nedenle, istenen kapsam sayısı ile kullanıcı izni alma olasılığı arasında ters bir ilişki vardır.

Başvurunuzun, mümkün olduğunda bağlam dahilinde yetkilendirme kapsamlarına erişim isteğinde bulunmasını öneririz. Artımlı yetkilendirme ile kullanıcı verilerine erişim izni isteyerek kullanıcıların uygulamanızın istediği erişime neden ihtiyaç duyduğunu daha kolay anlamalarına yardımcı olursunuz.
state Önerilen

Uygulamanızın, yetkilendirme isteğiniz ile yetkilendirme sunucusunun yanıtı arasında durumu korumak için kullandığı herhangi bir dize değerini belirtir. Kullanıcı uygulamanızın erişim isteğini kabul ettikten veya reddettikten sonra, sunucu, redirect_uri parça URL tanımlayıcısında (#) name=value çifti olarak gönderdiğiniz değeri tam olarak döndürür.

Bu parametreyi kullanıcıyı uygulamanızda doğru kaynağa yönlendirmek, tek seferlik rastgele sayı göndermek ve siteler arası istek sahtekarlığını azaltmak gibi çeşitli amaçlarla kullanabilirsiniz. redirect_uri tahmini yapabildiğiniz için bir state değeri kullanmak, gelen bağlantının bir kimlik doğrulama isteği sonucunda gerçekleştiğine dair güvencenizi artırabilir. Rastgele bir dize oluşturur veya bir istemcinin veya istemcinin durumunu yakalayan başka bir değerin karmasını kodlarsanız isteğin ve yanıtın aynı tarayıcıdan kaynaklandığından emin olmak için yanıtı doğrulayabilirsiniz. Böylece, siteler arası istek sahtekarlığı gibi saldırılara karşı koruma sağlayabilirsiniz. state jetonunun nasıl oluşturulacağı ve onaylanacağına dair bir örnek için OpenID Connect dokümanlarına bakın.
include_granted_scopes İsteğe bağlı

Uygulamalara, bağlam içindeki ek kapsamlara erişim istemek için ek yetkilendirme kullanma izni verir. Bu parametrenin değerini true olarak ayarlarsanız ve yetkilendirme isteği verildiyse yeni erişim jetonu, kullanıcının daha önce uygulamaya erişim izni verdiği kapsamları da kapsar. Örnekler için ek yetkilendirme bölümüne bakın.
login_hint İsteğe bağlı

Uygulamanız, hangi kullanıcının kimlik doğrulaması yapmaya çalıştığını tespit ederse Google Kimlik Doğrulama Sunucusu'na bir ipucu vermek için bu parametreyi kullanabilir. Sunucu, oturum açma formundaki e-posta alanını önceden doldurarak veya uygun çoklu giriş oturumunu seçerek giriş akışını basitleştirmek için bu ipucunu kullanır.

Parametre değerini kullanıcının Google kimliğiyle eşdeğer olan bir e-posta adresi veya sub tanımlayıcı olarak ayarlayın.
prompt İsteğe bağlı

Kullanıcıya sunulmak üzere boşlukla sınırlandırılmış, büyük/küçük harfe duyarlı bir istek listesi. Bu parametreyi belirtmezseniz kullanıcıdan yalnızca projeniz ilk kez erişim isteğinde bulunduğunda istenir. Daha fazla bilgi için Yeniden izin isteme konusuna bakın.

Olası değerler:

none Kimlik doğrulama veya kullanıcı rızası ekranlarını görüntüleme. Diğer değerlerle belirtilmemelidir.
consent Kullanıcıdan izin isteyin.
select_account Kullanıcıdan hesap seçmesini isteyin.

Google yetkilendirme sunucusuna örnek yönlendirme

Aşağıda, satır sonları ve okunabilir alanlar bulunan örnek bir URL gösterilmektedir.

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

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

JavaScript örnek kodu

Aşağıdaki JavaScript snippet'inde, JavaScript için Google API'leri İstemci Kitaplığı kullanılmadan JavaScript'te yetkilendirme akışının nasıl başlatılacağı gösterilmiştir. Bu OAuth 2.0 uç noktası, merkezler arası kaynak paylaşımını (CORS) desteklemediğinden snippet, söz konusu uç noktaya istek 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/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();
}

2. Adım: Google, kullanıcıdan izin ister

Bu adımda kullanıcı, uygulamanıza istenen erişim iznini verip vermemeye karar verir. Bu aşamada Google, uygulamanızın adını ve kullanıcının yetkilendirme kimlik bilgileri ile erişim izni isteyen Google API hizmetlerini gösteren bir izin penceresini ve verilecek erişim kapsamlarının özetini gösterir. Daha sonra kullanıcı, uygulamanız tarafından talep edilen bir veya daha fazla kapsama erişim izni verebilir ya da isteği reddedebilir.

Google'ın OAuth 2.0 sunucusundan alınan yanıtın erişim izni verip vermediğini belirten yanıtı beklediği için uygulamanızın bu aşamada herhangi bir işlem yapması gerekmez. Bu yanıt bir sonraki adımda açıklanmıştır.

Hatalar

Google'ın OAuth 2.0 yetkilendirme uç noktasına yapılan isteklerde, beklenen kimlik doğrulama ve yetkilendirme akışları yerine kullanıcılara yönelik hata mesajları gösterilebilir. Yaygın hata kodları ve önerilen çözünürlükler aşağıda listelenmiştir.

admin_policy_enforced

Google Hesabı, Google Workspace yöneticisinin politikaları nedeniyle, istenen bir veya daha fazla kapsamı yetkilendiremiyor. Yöneticinin, OAuth istemci kimliğinize açıkça erişim izni verilene kadar tüm kapsamlara veya hassas ve kısıtlanmış kapsamlara erişimi nasıl kısıtlayabileceği hakkında daha fazla bilgi için Google Workspace verilerine hangi üçüncü taraf uygulamalar ve dahili uygulamaların erişebileceğini yönetme başlıklı Google Workspace Yöneticisi yardım makalesine göz atın.

disallowed_useragent

Yetkilendirme uç noktası, Google'ın OAuth 2.0 Politikaları tarafından izin verilmeyen yerleştirilmiş bir kullanıcı aracısının içinde görüntülenir.

Android

Android geliştiricileri, android.webkit.WebView'te yetkilendirme isteklerini açarken bu hata mesajıyla karşılaşabilir. Geliştiriciler bunun yerine Android için Google ile Oturum Açma veya OpenID Foundation'ın Android için AppAuth gibi Android kitaplıklarını kullanmalıdır.

Bir Android uygulaması, yerleştirilmiş bir kullanıcı aracısında genel web bağlantısı açtığında bir kullanıcı, sitenizden Google'ın OAuth 2.0 yetkilendirme uç noktasına gittiğinde web geliştiricileri bu hatayla karşılaşabilir. Geliştiriciler, genel bağlantıların, işletim sisteminin varsayılan bağlantı işleyicisinde açılmasına izin vermelidir. Bu işleyici, hem Android App Links işleyicilerini hem de varsayılan tarayıcı uygulamasını içerir. Android Özel Sekmeleri kitaplığı da desteklenen bir seçenektir.

iOS

iOS ve macOS geliştiricileri, WKWebView'te yetkilendirme isteklerini açarken bu hatayla karşılaşabilir. Geliştiriciler bunun yerine iOS için Google ile Oturum Açma veya OpenID Foundation'ın iOS için AppAuth gibi iOS kitaplıklarını kullanmalıdır.

Bir iOS veya macOS uygulaması, yerleştirilmiş bir kullanıcı aracısında genel bir web bağlantısı açtığında bir kullanıcı, sitenizden Google'ın OAuth 2.0 yetkilendirme uç noktasına gittiğinde web geliştiricileri bu hatayla karşılaşabilir. Geliştiriciler, genel bağlantıların işletim sisteminin varsayılan bağlantı işleyicisinde açılmasına izin vermelidir. Bu bağlantı hem Geçiş Bağlantıları işleyicilerini hem de varsayılan tarayıcı uygulamasını içerir. SFSafariViewController kitaplığı da desteklenen bir seçenektir.
org_internal

İstekteki OAuth istemci kimliği, belirli bir Google Cloud kuruluşunda Google hesaplarına erişimi sınırlayan bir proje kapsamındadır. Bu yapılandırma seçeneği hakkında daha fazla bilgi için OAuth izin ekranını ayarlama yardım makalesindeki Kullanıcı türü bölümüne bakın.

invalid_client

İstekte bulunulan kaynak, bu istemci için yetkilendirilmemiş. origin_mismatch göz atın.

invalid_grant

Artımlı yetkilendirme kullanılırken jetonun süresi dolmuş veya jetonu geçersiz kılınmış olabilir. Kullanıcının kimliğini yeniden doğrulayın ve yeni jetonlar almak için kullanıcıdan izin isteyin. Bu hatayı görmeye devam ediyorsanız uygulamanızın doğru yapılandırıldığından ve isteğinizde doğru jetonları ve parametreleri kullandığınızdan emin olun. Aksi takdirde, kullanıcı hesabı silinmiş veya devre dışı bırakılmış olabilir.

origin_mismatch

Yetkilendirme isteğini oluşturan JavaScript'in şeması, alanı ve/veya bağlantı noktası, OAuth istemci kimliği için kayıtlı yetkili bir JavaScript kaynak URI'siyle eşleşmeyebilir. Credentials pagealanındaki yetkili JavaScript kaynaklarını Google API Console inceleyin.

redirect_uri_mismatch

Yetkilendirme isteğinde geçirilen redirect_uri, OAuth istemci kimliği için yetkili bir yönlendirme URI'si ile eşleşmiyor. Google API Console Credentials pageadresindeki yetkili yönlendirme URI'lerini inceleyin.

Yetkilendirme isteğini oluşturan JavaScript'in şeması, alanı ve/veya bağlantı noktası, OAuth istemci kimliği için kayıtlı yetkili bir JavaScript kaynak URI'siyle eşleşmeyebilir. Google API Console Credentials pagesitesindeki yetkili JavaScript kaynaklarını inceleyin.

redirect_uri parametresi, kullanımdan kaldırılan ve artık desteklenmeyen OAuth bant dışı (OOB) akışını ifade edebilir. Entegrasyonunuzu güncellemek için taşıma rehberine bakın.

3. Adım: OAuth 2.0 sunucu yanıtını işleme

OAuth 2.0 Uç Noktaları

OAuth 2.0 sunucusu, erişim jetonu isteğinizde belirtilen redirect_uri öğesine yanıt gönderir.

Kullanıcı isteği onaylarsa yanıt bir erişim jetonu içerir. Kullanıcı isteği onaylamazsa bir hata mesajı alırsınız. Erişim jetonu veya hata mesajı, aşağıda gösterildiği gibi yönlendirme URI'sının 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 ayarlanan 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 değeri parametreye yanıtta da eklenir.

  • Hata yanıtı: 
    https://oauth2.example.com/callback#error=access_denied

Örnek OAuth 2.0 sunucu yanıtı

Bu akışı, 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 test edebilirsiniz: 

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

OAuth 2.0 akışını tamamladıktan sonra http://localhost/oauth2callback adresine yönlendirileceksiniz. Yerel makineniz bu adreste bir dosya sunmazsa bu URL bir 404 NOT FOUND hatası verir. Bir sonraki adımda, kullanıcı uygulamanıza tekrar yönlendirildiğinde URI'da döndürülen bilgiler hakkında daha fazla ayrıntı sağlanmaktadır.

Google API'lerini çağırma

OAuth 2.0 Uç Noktaları

Uygulamanız bir erişim jetonu aldıktan sonra, API'nin gerektirdiği erişim izinlerinin verildiği belirli bir kullanıcı hesabı adına Google API'sine çağrı yapmak için bu jetonu kullanabilirsiniz. Bunun için erişim jetonunu access_token sorgu parametresi veya Authorization HTTP üst bilgisi Bearer değeri ekleyerek API isteğine ekleyin. Mümkün olduğunda HTTP üst bilgisi, sorgu dizeleri sunucu günlüklerinde görünür olduğu için tercih edilir. Çoğu durumda, Google API'lerine çağrılarınızı ayarlamak için bir istemci kitaplığı kullanabilirsiniz (örneğin, Drive Files API'yi çağırırken).

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

HTTP GET örnekleri

Authorization: Bearer HTTP üst bilgisini kullanarak drive.files uç noktasına (Drive Files API) yapılan çağrı aşağıdaki gibi görünebilir. Kendi erişim jetonunuzu belirtmeniz gerektiğini unutmayın:

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

access_token sorgu dizesi parametresini kullanarak kimliği doğrulanmış kullanıcının aynı API'ye yaptığı çağrıyı burada görebilirsiniz:

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

curl örnekleri

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

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

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

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

JavaScript örnek kodu

Aşağıdaki kod snippet'i, bir Google API'sine istek göndermek için CORS'nin (çapraz kaynak kaynağı paylaşımı) nasıl kullanılacağını göstermektedir. Bu örnekte, JavaScript için Google API'leri İstemci Kitaplığı kullanılmamaktadır. Ancak istemci kitaplığı kullanmıyorsanız bile ilgili kitaplığın dokümanlarındaki 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 isteğinde bulunmak için aldığınız jetonu temsil eder. Tam örnekte, bu jetonun tarayıcının yerel depolama alanında nasıl depolanacağı ve bir API isteğinde bulunurken bu jetonun nasıl alınacağı gösterilmektedir.

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

Tam örnek

OAuth 2.0 Uç Noktaları

Bu kod örneği, JavaScript'te OAuth 2.0 akışını, JavaScript için Google API'leri İstemci Kitaplığı'nı kullanmadan nasıl tamamlayacağınızı gösterir. Kod, API isteğini denemek için bir düğme görüntüleyen HTML sayfasına yöneliktir. 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. Öyleyse API isteğini yürütür. Aksi takdirde OAuth 2.0 akışını başlatır.

OAuth 2.0 akışı için sayfa aşağıdaki adımları izleyin:

  1. Kullanıcıyı, Google'ın https://www.googleapis.com/auth/drive.metadata.readonly kapsamına erişim isteyen OAuth 2.0 sunucusuna yönlendirir.
  2. İstenen kapsamlardan birine veya daha fazlasına erişim izni verdikten ya da reddettikten sonra, kullanıcı, erişim jetonunu parça tanımlayıcısı dizesinden ayrıştıran orijinal sayfaya yönlendirilir.

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

    API isteği, yetkili kullanıcının Google Drive hesabı hakkında bilgi almak için Drive API'nin about.get 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 için yetkilendirme kimlik bilgilerinize karşılık gelen YOUR_CLIENT_ID ve YOUR_REDIRECT_URI değişkenlerinin değerlerini ayarlamanız gerekir. YOUR_REDIRECT_URI değişkeni, sayfanın yayınlandığı URL'ye ayarlanmalıdır. Bu değerin, API Console Credentials pageiçinde yapılandırdığınız OAuth 2.0 istemcisine ait yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmesi gerekir. 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 etkinleştirmiş olması da gerekir.

<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>

JavaScript kaynak doğrulama kuralları

Google, geliştiricilerin uygulamalarını güvende tutmalarına yardımcı olmak için JavaScript kaynaklarına aşağıdaki doğrulama kurallarını uygular. JavaScript kaynaklarınız bu kurallara uygun olmalıdır. Alan, ana makine ve şemanın tanımı için aşağıda belirtilen RFC 3986 3. bölüme bakın.

Doğrulama kuralları
Şema

JavaScript kaynaklarında düz HTTP değil, HTTPS şeması kullanılmalıdır. Localhost URI'ları (localhost IP adresi URI'leri dahil) bu kuraldan muaftır.
Düzenleyen

Ana makineler, ham IP adresleri olamaz. Localhost IP adresleri bu kuraldan muaftır.
Alan
  • Ana makine TLD'leri (Üst Düzey Alanlar) herkese açık son ek listesine ait olmalıdır.
  • Ana makine alanları “googleusercontent.com” olamaz.
  • Uygulamanın sahibi alan olmadığı sürece JavaScript kaynakları URL kısaltıcı alan adları (ör. goo.gl) içeremez.
    		•
    Kullanıcı Bilgileri

    JavaScript kaynakları, userinfo alt bileşenini içeremez.
    Yol

    JavaScript kaynakları, yol bileşenini içeremez.
    Sorgu

    JavaScript kaynakları, sorgu bileşenini içeremez.
    Parça

    JavaScript kaynakları, parça bileşenini içeremez.
    Karakterler JavaScript kaynakları, aşağıdakiler dahil olmak üzere belirli karakterleri içeremez:
    • Joker karakter karakterleri ('*')
    • Yazdırılamayan ASCII karakterler
    • Geçersiz yüzde kodlamaları (yüzde işaretinden sonra gelen on altılık basamaktan oluşan URL kodlama biçimine uymayan tüm yüzde kodlaması)
    • Boş karakterler (kodlanmış NULL karakter, ör. %00, %C0%80)

    Artımlı yetkilendirme

    OAuth 2.0 protokolünde, uygulamanız kapsamlar tarafından belirlenen kaynaklara erişim için yetkilendirme ister. Kaynaklar için ihtiyaç duyduğunuzda yetkilendirme istemek en iyi kullanıcı deneyimi uygulaması olarak kabul edilir. Google'ın yetkilendirme sunucusu, bu uygulamayı etkinleştirmek için artımlı yetkilendirmeyi destekler. Bu özellik, gerektiğinde kapsamları istemenizi sağlar ve kullanıcı yeni kapsam için izin verirse kullanıcının projeye verdiği tüm kapsamları içeren bir jetonla değiştirilebilecek bir yetkilendirme kodu döndürür.

    Örneğin, kullanıcıların müzik parçalarını örneklemesine ve mix oluşturmalarına olanak tanıyan bir uygulama, oturum açma sırasında çok az sayıda kaynağa, belki de oturum açan kişinin adından başka hiçbir şeye ihtiyaç duymayabilir. Ancak tamamlanmış bir karışımın kaydedilmesi için ilgili kullanıcının Google Drive'ına erişmesi gerekir. Çoğu kullanıcı, yalnızca uygulamanın gerçekten ihtiyaç duyduğu anda Google Drive'a erişmeleri istendiğinde doğal olarak görür.

    Bu durumda uygulama, oturum açma sırasında temel oturum açma işlemini gerçekleştirmek için openid ve profile kapsamlarını isteyebilir. Daha sonra, bunların bir karışımını kaydetmek için ilk istek sırasında https://www.googleapis.com/auth/drive.file kapsamını talep edebilir.

    Aşağıdaki kurallar, ek yetkilendirmeden elde edilen bir erişim jetonu için geçerlidir:

    • Jeton, yeni ve birleştirilmiş yetkilendirmede toplanan kapsamlardan herhangi birine karşılık gelen kaynaklara erişmek için kullanılabilir.
    • Bir erişim jetonu almak için birleştirilmiş yetkilendirmeye ait yenileme jetonunu kullandığınızda, erişim jetonu birleştirilmiş yetkilendirmeyi temsil eder ve yanıta dahil edilen scope değerlerinden herhangi biri için kullanılabilir.
    • Birleştirilmiş yetkilendirme, bağışlar farklı istemcilerden istenmiş olsa bile kullanıcının API projesine verdiği tüm kapsamları içerir. Örneğin, bir kullanıcı bir uygulamanın masaüstü istemcisini kullanarak bir kapsam için erişim ve ardından mobil istemci üzerinden aynı uygulamaya başka bir kapsam verirse, birleştirilmiş yetki her iki kapsamı da içerir.
    • Birleştirilmiş yetkilendirmeyi temsil eden bir jetonu iptal ederseniz ilişkili kullanıcı adına o yetkilendirmenin tüm kapsamlarına erişim eşzamanlı olarak iptal edilir.

    Aşağıdaki kod örnekleri, mevcut bir erişim jetonuna nasıl kapsam ekleyeceğinizi gösterir. Bu yaklaşım, uygulamanızın birden fazla erişim jetonu yönetmek zorunda kalmamasını sağlar.

    OAuth 2.0 Uç Noktaları

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

    Aşağıdaki kod snippet'i bunun nasıl yapılacağını göstermektedir. Bu snippet, erişim jetonunuzun geçerli olduğu kapsamları tarayıcının yerel depolama alanında sakladığınızı varsayar. (Tam örnek kodu, tarayıcının yerel depolama alanında oauth2-test-params.scope özelliğini ayarlayarak erişim jetonunun geçerli olduğu kapsamların listesini depolar.)

    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ı kapsamazsa OAuth 2.0 akışı başlar. Burada oauth2SignIn işlevi, 2. adımda sağlanan işlevle (ve daha sonra tam örnekte sağlanan) aynıdır.

    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.
}

    Jeton iptal ediliyor

    Bazı durumlarda, kullanıcı bir uygulamaya verilen erişimi iptal etmek isteyebilir. Kullanıcı, Hesap Ayarları'na giderek erişimi iptal edebilir. Daha fazla bilgi için Hesabınıza erişimi olan üçüncü taraf site ve uygulamaların Site veya uygulama erişimi bölümünü kaldırma destek dokümanına bakın.

    Bir uygulamanın, verilen erişimi programlı olarak iptal etmesi de mümkündür. Kullanıcının abonelikten çıktığı, bir uygulamayı kaldırdığı veya bir uygulamanın gerektirdiği API kaynaklarının önemli ölçüde değiştiği durumlarda programatik iptal önemlidir. Diğer bir deyişle, kaldırma sürecinin bir parçası, daha önce uygulamaya verilen izinlerin kaldırılmasını sağlamak için bir API isteği içerebilir.

    OAuth 2.0 Uç Noktaları

    Uygulamanız, bir jetonu programatik olarak iptal etmek için https://oauth2.googleapis.com/revoke özelliğine bir 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}

    Jeton, 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 işlemi başarılı bir şekilde işlenirse yanıtın HTTP durum kodu 200 olur. Hata koşulları için 400 hata durumu ile birlikte bir 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 etmek için kullandığı OAuth 2.0 uç noktası, merkezler arası kaynak paylaşımını (CORS) desteklemediğinden kod, istek yayınlamak için XMLHttpRequest() yöntemini kullanmak yerine bir form oluşturur ve 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();
}