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

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

Bu OAuth 2.0 akışına örtük izin akışı adı verilir. Yalnızca kullanıcı uygulamadayken API'lere erişen uygulamalar için tasarlanmıştır. Bu uygulamalar, gizli bilgileri depolayamaz.

Uygulamanız bu akışta, uygulamanızı ve uygulamanın gerektirdiği API erişimi türünü tanımlamak için sorgu parametrelerini kullanan bir Google URL'si açar. URL'yi geçerli tarayıcı penceresinde veya bir pop-up'ta açabilirsiniz. Kullanıcı, Google ile kimlik doğrulaması gerçekleştirip istenen izinleri verebilir. 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 üzere JavaScript için Google API'leri istemci kitaplığını kullanıyorsanız OAuth 2.0 akışını işlemek için Google Kimlik Hizmetleri JavaScript kitaplığını kullanmanız gerekir. Lütfen Google kimlik Hizmetleri'nin OAuth 2.0 örtük izin akışını temel alan jeton modelini inceleyin.

Ön koşullar

Projeniz için API'leri etkinleştirin

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

Projeniz için bir API'yi etkinleştirmek üzere:

  1. Google API ConsoleiçindeOpen the API Library .
  2. If prompted, select a project, or create a new one.
  3. API Library sayfasında, ürün ailesine ve popülerliğe göre gruplandırılmış tüm API'ler listelenir. Etkinleştirmek istediğiniz API listede görünmüyorsa bulmak için arama özelliğini kullanın veya ait olduğu ürün ailesinde Tümünü Göster'i tıklayın.
  4. Etkinleştirmek istediğiniz API'yi seçin, ardından 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 nasıl kimlik bilgisi oluşturacağınız açıklanmaktadır. Daha sonra uygulamalarınız bu proje için etkinleştirdiğiniz API'lere erişmek için 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, yetkilendirilmiş JavaScript kaynaklarını belirtmelidir. Kaynaklar, uygulamanızın OAuth 2.0 sunucusuna istek gönderebileceği alan adlarını 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 istemesine olanak tanırken kullanıcıların uygulamanıza da verdikleri erişim miktarını kontrol etmesini sağlar. Bu nedenle, istenen kapsam sayısı ile kullanıcıdan izin alma olasılığı arasında ters bir ilişki olabilir.

OAuth 2.0 yetkilendirmesini uygulamaya başlamadan önce, uygulamanızın erişmesi için izin alması gereken kapsamları belirlemenizi öneririz.

OAuth 2.0 API Kapsamları belgesi, Google API'lerine erişmek için kullanabileceğiniz kapsamların tam listesini içerir.

OAuth 2.0 erişim jetonları edinme

Aşağıdaki adımlarda, uygulamanızın kullanıcı adına API isteği gerçekleştirmek için kullanıcıdan izin almak üzere Google'ın OAuth 2.0 sunucusuyla nasıl etkileşimde bulunduğu gösterilmektedir. Uygulamanızın, kullanıcı yetkilendirmesi gerektiren bir Google API isteğini yürütebilmesi için önce bu izni alması gerekir.

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

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

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:

Parametreler
client_id Zorunlu

Uygulamanızın istemci kimliği. Bu değeri API Console Credentials pageiçinde bulabilirsiniz.
redirect_uri Zorunlu

Kullanıcı, yetkilendirme akışını tamamladıktan sonra API sunucusunun kullanıcıyı nereye yönlendirdiğini belirler. Değer, istemcinizin API Console Credentials pageiçinde yapılandırdığınız OAuth 2.0 istemcisi için yetkilendirilmiş yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir. Bu değer, sağlanan client_id için yetkili 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 kullanımı ve sondaki eğik çizginin ("/") eşleşmesi gerektiğini unutmayın.
response_type Zorunlu

JavaScript uygulamalarının parametre değerini token olarak ayarlaması gerekir. Bu değer Google Yetkilendirme Sunucusu'na, erişim jetonunu, 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 döndürmesini bildirir.
scope Zorunlu

Uygulamanızın kullanıcı adına erişebileceği kaynakları tanımlayan alanla sınırlı bir kapsam listesidir. Bu değerler, Google'ın kullanıcıya gösterdiği izin ekranını bilgilendirir.

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

Uygulamanızın, mümkün olduğunda bağlam içinde yetkilendirme kapsamlarına erişim istemesini öneririz. Artımlı yetkilendirme üzerinden kullanıcı verilerine bağlam içinde erişim isteğinde bulunarak 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ındaki durumu korumak için kullandığı tüm dize değerlerini belirtir. Kullanıcı, uygulamanızın erişim isteğini kabul ettikten veya reddettikten sonra sunucu, redirect_uri öğesinin URL parçası tanımlayıcısında (#) name=value çifti olarak gönderdiğiniz tam değeri döndürür.

Bu parametreyi, kullanıcıyı uygulamanızdaki doğru kaynağa yönlendirmek, tek seferlik rastgele sayılar göndermek ve siteler arası istek sahtekarlığını azaltmak gibi çeşitli amaçlar için kullanabilirsiniz. redirect_uri tahmin edilebileceğinden, state değeri kullanmak, gelen bağlantının kimlik doğrulama isteği sonucunda gerçekleştiğine dair güvencenizi artırabilir. Rastgele bir dize oluşturur veya bir çerezin ya da 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. Bu sayede, siteler arası istek sahtekarlığı gibi saldırılara karşı koruma sağlar. state jetonunun nasıl oluşturulacağı ve onaylanacağı ile ilgili bir örnek için OpenID Connect dokümanlarını inceleyin.
include_granted_scopes İsteğe bağlı

Uygulamaların, bağlam içinde ek kapsamlara erişim istemek için artımlı yetkilendirme kullanmasına olanak tanır. Bu parametrenin değerini true olarak ayarlarsanız ve yetkilendirme isteği verilirse yeni erişim jetonu, kullanıcının daha önce uygulamaya erişim izni verdiği tüm kapsamları da kapsar. Örnekler için artımlı yetkilendirme bölümüne bakın.
login_hint İsteğe bağlı

Uygulamanız hangi kullanıcının kimliğini doğrulamaya çalıştığını bilirse bu parametreyi, Google Kimlik Doğrulama Sunucusu'na ipucu sağlamak için 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 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ısı olarak ayarlayın.
prompt İsteğe bağlı

Kullanıcıya sunmak için boşlukla sınırlandırılmış, büyük/küçük harfe duyarlı bir istem listesi. Bu parametreyi belirtmezseniz yalnızca projeniz ilk kez erişim istediğinde kullanıcıya istem gösterilir. Daha fazla bilgi için Yeniden izin isteme bölümüne bakın.

Olası değerler:

none Kimlik doğrulama veya izin ekranı göstermeyin. Diğer değerlerle belirtilmemelidir.
consent Kullanıcıdan izin vermesini isteyin.
select_account Kullanıcıdan bir hesap seçmesini isteyin.

Google'ın yetkilendirme sunucusuna yönlendirme örneği

Aşağıda, okunabilirlik için satır sonları ve boşluklar içeren ö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ı bu 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österilmektedir. Bu OAuth 2.0 uç noktası, merkezler arası kaynak paylaşımını (CORS) desteklemediğinden snippet, isteği söz konusu 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/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 vermeyeceğine karar verir. Bu aşamada Google, uygulamanızın adını ve kullanıcının yetkilendirme kimlik bilgileriyle, erişim izni istediği Google API hizmetlerini ve verilecek erişim kapsamlarının özetini gösteren bir izin penceresi görüntüler. Böylece kullanıcı, uygulamanız tarafından istenen bir veya daha fazla kapsama erişim izni verebilir ya da isteği reddedebilir.

Google'ın OAuth 2.0 sunucusundan herhangi bir erişim verilip verilmediğini belirten yanıtı beklediği için uygulamanızın bu aşamada herhangi bir işlem yapmasına gerek yoktur. Bu yanıt, aşağıdaki adımda açıklanmıştır.

Hatalar

Google'ın OAuth 2.0 yetkilendirme uç noktasına gönderilen istekler, beklenen kimlik doğrulama ve yetkilendirme akışları yerine kullanıcılara yönelik hata mesajları gösterebilir. Yaygın hata kodları ve önerilen çözümler 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österilir.

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 tarafından sunulan Android için AppAuth gibi Android kitaplıklarını kullanmalıdır.

Bir Android uygulaması, yerleştirilmiş bir kullanıcı aracısında genel bir web bağlantısı açtığında ve 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 hem Android Uygulama Bağlantıları işleyicilerini hem de varsayılan tarayıcı uygulamasını içeren işletim sisteminin varsayılan bağlantı işleyicisinde açılmasına izin vermelidir. Android Özel Sekmeler 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 tarafından sunulan 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 ve 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 hem Geçiş Bağlantıları işleyicilerini hem de varsayılan tarayıcı uygulamasını içeren işletim sisteminin varsayılan bağlantı işleyicisinde açılmasına izin vermelidir. SFSafariViewController kitaplığı da desteklenen bir seçenektir.
org_internal

İstekteki OAuth istemci kimliği, belirli bir Google Cloud Kuruluşu'ndaki Google Hesaplarına erişimi sınırlayan bir projenin parçasıdır. Bu yapılandırma seçeneği hakkında daha fazla bilgi için OAuth izin ekranınızı ayarlamayla ilgili yardım makalesinin Kullanıcı türü bölümüne göz atın.

invalid_client

İsteğin yapıldığı kaynak, bu istemci için yetkilendirilmedi. Şu sayfaya göz atın: origin_mismatch.

invalid_grant

Artımlı yetkilendirme kullanılırken jetonun süresi dolmuş veya jetonun geçersiz kılınmış olabilir. Kullanıcının kimliğini tekrar 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ı yetkilendirilmiş bir JavaScript kaynak URI'sıyla eşleşmeyebilir. Şuradaki yetkili JavaScript kaynaklarını inceleyin: Google API Console Credentials page.

redirect_uri_mismatch

Yetkilendirme isteğinde iletilen redirect_uri, OAuth istemci kimliğine ait yetkili yönlendirme URI'siyle eşleşmiyor. Google API Console Credentials pageiçindeki 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ı yetkilendirilmiş bir JavaScript kaynak URI'sıyla eşleşmeyebilir. Yetkili JavaScript kaynaklarını Google API Console Credentials pagesayfasında inceleyin.

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

invalid_request

Gönderdiğiniz istekle ilgili bir sorun var. Bunun birkaç nedeni olabilir:

  • İstek düzgün şekilde biçimlendirilmemiş
  • İstekte gerekli parametreler eksikti
  • İstek, Google'ın desteklemediği bir yetkilendirme yöntemi kullanıyor. OAuth entegrasyonunuzda önerilen entegrasyon yönteminin kullanıldığını doğrulama

3. Adım: OAuth 2.0 sunucu yanıtını ele alın

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

    access_token parametresine ek olarak, parça dizesi her zaman Bearer olarak ayarlanan token_type parametresini ve jetonun kullanım ömrünü saniye cinsinden belirten expires_in parametresini de içerir. Erişim jetonu isteğinde state parametresi belirtilmişse bu parametrenin değeri de yanıta dahil edilir.

  • 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 sayfasına yönlendirilirsiniz. Yerel makineniz bu adreste bir dosya sunmazsa bu URL bir 404 NOT FOUND hatası verir. Bir sonraki adım, kullanıcı uygulamanıza geri yönlendirildiğinde URI'da döndürülen bilgiler hakkında daha fazla ayrıntı sağlar.

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 kapsamları verilmişse bu jetonu belirli bir kullanıcı hesabı adına Google API'ye çağrı yapmak için kullanabilirsiniz. Bunu yapmak için access_token sorgu parametresi veya Authorization HTTP üst bilgisi Bearer değeri ekleyerek API'ye yapılan bir isteğe erişim jetonunu dahil edin. Sorgu dizeleri sunucu günlüklerinde görünür olduğundan mümkün olduğunda HTTP üst bilgisi tercih edilir. Çoğu durumda, Google API'lerine yönelik ç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 kullanan drive.files uç noktasına (Drive Files API) yapılan bir ç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

Burada, access_token sorgu dizesi parametresi kullanılarak kimliği doğrulanmış kullanıcı için aynı API'ye yapılan bir çağrı gösterilmektedir:

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 başlığı seçeneğinin kullanıldığı bir örneği burada bulabilirsiniz (tercih edilen):

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

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

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

JavaScript örnek kodu

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

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 örnekte, bu jetonun tarayıcının yerel depolama alanında nasıl depolanacağı ve API isteği yapılırken 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);

Eksiksiz örnek

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üğmesi 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. Ö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 şu adımları izler:

  1. Kullanıcıyı, https://www.googleapis.com/auth/drive.metadata.readonly kapsamına erişim isteyen Google'ın OAuth 2.0 sunucusuna yönlendirir.
  2. İstenen bir veya daha fazla kapsama erişim izni verildikten (ya da reddedildikten) 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ğini yapmak için erişim jetonunu kullanır.

    API isteği, yetkili kullanıcının Google Drive hesabıyla ilgili bilgileri 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.

Uygulamaya erişimi Google Hesabınızın İzinler sayfasından 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 sunulduğu URL'ye ayarlanmalıdır. Değer, API Console Credentials pageiçinde yapılandırdığınız OAuth 2.0 istemcisi için 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';
  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üvenli 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. Aşağıda belirtilen alan, ana makine ve şema tanımı için RFC 3986 bölüm 3'e bakın.

Doğrulama kuralları
Şema

JavaScript kaynakları düz HTTP yerine HTTPS şemasını kullanmalıdır. Localhost URI'leri (localhost IP adresi URI'leri dahil) bu kuraldan muaftır.
Düzenleyen

Ana makineler ham IP adresi olamaz. Yerel ana makine 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 alan adları “googleusercontent.com” olamaz.
  • Alan adının sahibi uygulama olmadığı sürece JavaScript kaynakları, URL kısaltıcı alan adlarını (ör. goo.gl) içeremez.
    		•
    Kullanıcı Bilgileri

    JavaScript kaynakları, kullanıcı bilgileri 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 de dahil olmak üzere belirli karakterleri içeremez:
    • Joker karakterler ('*')
    • Yazdırılamayan ASCII karakterleri
    • Geçersiz yüzde kodlamaları (bir yüzde işaretinin ve ardından iki onaltılık hanenin URL kodlama biçimine uymayan herhangi bir yüzde kodlaması)
    • Boş karakterler (kodlanmış bir NULL karakteri, ör. %00, %C0%80)

    Artımlı yetkilendirme

    OAuth 2.0 protokolünde, uygulamanız kapsamlara göre tanımlanan kaynaklara erişim için yetkilendirme ister. Kaynaklar için ihtiyaç duyduğunuz anda yetkilendirme istemek bir en iyi kullanıcı deneyimi uygulaması olarak kabul edilir. Google'ın yetkilendirme sunucusu bu uygulamayı mümkün kılmak için artımlı yetkilendirmeyi destekler. Bu özellik, gerektiğinde kapsam istemenize olanak tanır. 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ı denemelerine ve mix'ler oluşturmasına olanak tanıyan bir uygulama, oturum açma işlemi sırasında çok az kaynağa ihtiyaç duyabilir. Yalnızca oturum açan kişinin adından başka bir kaynak yeterli olmayabilir. Ancak, tamamlanmış bir karışımı kaydetmek için kullanıcının Google Drive'ına erişim gerekir. Çoğu kullanıcı, yalnızca uygulamanın gerçekten ihtiyaç duyduğu sırada Google Drive'ına erişim izni isteseydi bunu doğal bulurdu.

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

    Aşağıdaki kurallar, artımlı yetkilendirmeden alınan bir erişim jetonu için geçerlidir:

    • Bu jeton, birleştirilmiş yeni yetkilendirmeye dahil edilen kapsamlardan herhangi birine karşılık gelen kaynaklara erişmek için kullanılabilir.
    • Bir erişim jetonu almak amacıyla birleştirilmiş yetkilendirme için 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şik yetkilendirme, farklı istemcilerden izin 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 kapsama erişim izni verirse ve daha sonra bir mobil istemci aracılığıyla aynı uygulamaya başka bir kapsam daha verdiyse birleştirilmiş yetkilendirme her iki kapsamı da içerir.
    • Birleşik yetkilendirmeyi temsil eden bir jetonu iptal ederseniz ilişkili kullanıcı adına bu yetkilendirmenin tüm kapsamlarına erişim aynı anda iptal edilir.

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

    OAuth 2.0 Uç Noktaları

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

    Bunun nasıl yapılacağı aşağıdaki kod snippet'inde gösterilmektedir. Snippet, erişim jetonunuzun geçerli olduğu kapsamları tarayıcının yerel depolama alanında depoladığınızı varsayar. (Tam örnek kod, 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 saklar.)

    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ı karşılamıyorsa OAuth 2.0 akışı başlar. Buradaki oauth2SignIn işlevi, 2. adımda sunulan (ve eksiksiz örnekte) sağlanan işlevle 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.
}

    Jetonu iptal etme

    Bazı durumlarda kullanıcı, bir uygulamaya verilen erişimi iptal etmek isteyebilir. Kullanıcı, Hesap Ayarları sayfası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şimini kaldırma başlıklı destek belgesine bakın.

    Bir uygulamanın, kendisine verilen erişimi programlı bir şekilde iptal etmesi de mümkündür. Programlı iptal; kullanıcının abonelikten çıktığı, uygulamayı kaldırdığı veya uygulamanın gerektirdiği API kaynaklarının önemli ölçüde değiştiği durumlarda önemlidir. Başka bir deyişle, kaldırma sürecinde uygulamaya daha önce verilmiş olan izinlerin kaldırılması için bir API isteği gönderilebilir.

    OAuth 2.0 Uç Noktaları

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

    Bu jeton bir erişim jetonu veya yenileme jetonu olabilir. Jeton bir erişim jetonuysa ve ilgili 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ında hata koduyla birlikte HTTP durum kodu 400 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ı, merkezler 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();
}