Bu dokümanda, bir JavaScript web uygulamasından YouTube Data API'ye erişmek için OAuth 2.0 yetkilendirmesinin nasıl uygulanacağı açıklanmaktadır. OAuth 2.0; kullanıcı adlarını, şifrelerini ve diğer bilgilerini gizli tutarken kullanıcıların belirli bir uygulamayla belirli verileri paylaşmasına olanak tanır. Örneğin, bir uygulama, kullanıcının YouTube kanalına video yükleme izni almak için OAuth 2.0'ı kullanabilir.
Bu OAuth 2.0 akışı, dolaylı izin akışı olarak adlandırılır. 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, 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ı yapabilir ve istenen izinleri verebilir. Google, daha sonra kullanıcıyı tekrar uygulamanıza yönlendirir. Yönlendirme, uygulamanızın doğrulayıp API isteklerinde bulunmak 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ı yönetmek için Google Kimlik Hizmetleri JavaScript kitaplığını kullanmanız gerekir. Lütfen Google Identity Services'ın OAuth 2.0 dolaylı izin akışını temel alan jeton modelini inceleyin.
Ön koşullar
Projeniz için API'leri etkinleştirin
Google API'lerini çağıran uygulamaların, bu API'leri API Consoleuygulamasında etkinleştirmesi gerekir.
Projenizde bir API'yi etkinleştirmek için:
- Open the API Library Google API Console.
- If prompted, select a project, or create a new one.
- YouTube Data API'yi bulup etkinleştirmek için Kitaplık sayfasını kullanın. Uygulamanızın kullanacağı diğer API'leri bulun ve bunları da etkinleştirin.
Yetkilendirme kimlik bilgileri oluşturma
Google API'lerine erişmek için OAuth 2.0 kullanan tüm uygulamaların, uygulamayı Google'ın OAuth 2.0 sunucusuna tanımlayan yetkilendirme kimlik bilgilerine sahip olması gerekir. Aşağıdaki adımlarda, projeniz için nasıl kimlik bilgileri oluşturacağınız açıklanmaktadır. Ardından uygulamalarınız bu projede etkinleştirdiğiniz API'lere erişmek için kimlik bilgilerini kullanabilir.
- Go to the Credentials page.
- Kimlik bilgisi oluştur > OAuth istemci kimliği seçeneğini tıklayın.
- Web uygulaması uygulama türünü seçin.
- Formu doldurun. Yetkilendirilmiş Google API istekleri yapmak için JavaScript kullanan uygulamalar, yetkili 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ı tanımlama
Kapsamlar, uygulamanızın yalnızca ihtiyaç duyduğu kaynaklara erişim isteğinde bulunmasını sağlarken kullanıcıların da uygulamanıza verdikleri erişim miktarını kontrol etmesine olanak tanır. Dolayısıyla, talep edilen 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şmek için izne ihtiyaç duyacağı kapsamları belirlemenizi öneririz.
YouTube Data API v3'te aşağıdaki kapsamlar kullanılır:
Nişan dürbünleri | |
---|---|
https://www.googleapis.com/auth/youtube | YouTube hesabınızı yönetin |
https://www.googleapis.com/auth/youtube.channel-memberships.creator | Mevcut etkin kanal üyelerinizin listesini, geçerli düzeylerini ve ne zaman üye olduklarını görme |
https://www.googleapis.com/auth/youtube.force-ssl | YouTube videolarınızı, derecelendirmelerinizi, yorumlarınızı ve altyazılarınızı görün, düzenleyin ve kalıcı olarak silin |
https://www.googleapis.com/auth/youtube.readonly | YouTube hesabınızı görüntüleyin |
https://www.googleapis.com/auth/youtube.upload | YouTube videolarınızı yönetin |
https://www.googleapis.com/auth/youtubepartner | YouTube'daki varlıklarınızı ve ilişkili içeriği görüntüleyin ve yönetin |
https://www.googleapis.com/auth/youtubepartner-channel-audit | Bir YouTube iş ortağı ile denetim süreci sırasında alakalı olan, YouTube kanalınıza ait gizli bilgileri görüntüleyin |
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ı alma
Aşağıdaki adımlarda uygulamanızın, kullanıcı adına API isteği gerçekleştirme izni almak için 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ütmesi için önce bu izni almış olması 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önlendireceğini
belirler. Değer, OAuth 2.0 istemcisi için istemcinizin API Console
Credentials pageiçinde yapılandırdığınız yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir. Bu değer, sağlanan
|
||||||||||||||||
response_type |
Zorunlu
JavaScript uygulamalarının parametrenin değerini |
||||||||||||||||
scope |
Zorunlu
Uygulamanızın kullanıcı adına erişebileceği kaynakları tanımlayan, boşlukla sınırlandırılmış bir kapsam listesi. 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 isteğinde bulunmasına ve kullanıcıların uygulamanıza verdikleri erişim miktarını kontrol etmesine olanak tanır. Dolayısıyla, talep edilen kapsam sayısı ile kullanıcı izni alma olasılığı arasında ters bir ilişki vardır. YouTube Data API v3'te aşağıdaki kapsamlar kullanılır:
OAuth 2.0 API Kapsamları belgesi, Google API'lerine erişmek için kullanabileceğiniz kapsamların tam listesini sağlar. Uygulamanızın, mümkün olduğunda yetkilendirme kapsamlarına bağlam içinde erişim isteğinde bulunmasını öneririz. Artımlı yetkilendirme ile bir bağlam içinde kullanıcı verilerine erişim isteğinde bulunarak kullanıcıların, uygulamanızın istediği erişime neden ihtiyaç duyduğunu daha kolay anlamasına yardımcı olursunuz. |
||||||||||||||||
state |
Önerilen
Uygulamanızın yetkilendirme isteğiniz ile yetkilendirme sunucusunun yanıtı arasındaki durumu korumak için kullandığı herhangi bir dize değerini belirtir.
Sunucu, kullanıcı uygulamanızın erişim isteğini kabul ettikten veya reddettikten sonra Bu parametreyi, kullanıcıyı uygulamanızdaki doğru kaynağa yönlendirmek, nonce göndermek ve siteler arası istek sahtekarlığını azaltmak gibi çeşitli amaçlarla kullanabilirsiniz. |
||||||||||||||||
include_granted_scopes |
İsteğe bağlı
Uygulamaların bağlam içinde ek kapsamlara erişim istemek için artımlı yetkilendirme kullanmasını sağlar. Bu parametrenin değerini |
||||||||||||||||
enable_granular_consent |
İsteğe bağlı
Varsayılan olarak Google bir uygulama için ayrıntılı izinleri etkinleştirdiğinde bu parametrenin artık herhangi bir etkisi olmaz. |
||||||||||||||||
login_hint |
İsteğe bağlı
Uygulamanız hangi kullanıcının kimlik doğrulaması yapmaya çalıştığını biliyorsa Google Kimlik Doğrulama Sunucusu'na ipucu sağlamak 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 ipucunu kullanır. Parametre değerini, bir e-posta adresi veya kullanıcının Google kimliğine eşdeğer olan bir |
||||||||||||||||
prompt |
İsteğe bağlı
Kullanıcıya sunmak için kullanılan, boşlukla ayrılmış, büyük/küçük harfe duyarlı bir istem listesi. Bu parametreyi belirtmezseniz kullanıcıdan yalnızca projeniz ilk kez erişim istediğinde istenir. Daha fazla bilgi için Yeniden izin isteme başlıklı makaleye göz atın. Olası değerler:
|
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(); }
2. adım: Google, kullanıcıdan izin ister
Bu adımda kullanıcı, uygulamanıza istenen erişimi verip vermeyeceğini belirler. Google, bu aşamada uygulamanızın adını ve kullanıcının yetkilendirme kimlik bilgileriyle erişim izni istediği Google API hizmetlerini gösteren bir izin penceresi ve verilecek erişim kapsamlarının bir özetini gösterir. Daha sonra kullanıcı, uygulamanız tarafından istenen bir veya daha fazla kapsama erişim izni verebilir veya isteği reddedebilir.
Google'ın OAuth 2.0 sunucusundan, herhangi bir erişim izni verilip verilmediğini belirten bir yanıt beklediği için uygulamanızın bu aşamada herhangi bir şey yapması gerekmez. Bu yanıt aşağıdaki adımda açıklanmaktadı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ı yetkilendiremedi. OAuth istemci kimliğinize açıkça erişim verilene kadar bir yöneticinin tüm kapsamlara ya da hassas ve kısıtlanmış kapsamlara erişimi nasıl kısıtlayabileceği hakkında daha fazla bilgi için Hangi üçüncü taraf uygulamalarının ve dahili uygulamaların Google Workspace verilerine erişebileceğini kontrol etme konulu 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şik bir kullanıcı aracısının içinde görüntülenir.
Android
Android geliştiricileri, android.webkit.WebView
ürününde yetkilendirme isteklerini açarken bu hata mesajıyla karşılaşabilir.
Geliştiriciler bunun yerine Android için Google ile Oturum Açma veya RFC Foundation'ın AppAuth for Android gibi Android kitaplıklarını kullanmalıdır.
Bir Android uygulaması yerleşik 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, işletim sisteminin varsayılan bağlantı işleyicisinde (hem Android App Links işleyicilerini hem de varsayılan tarayıcı uygulamasını içeren) genel bağlantıların açılmasına izin vermelidir. Android Özel Sekmeleri kitaplığı da desteklenen bir seçenektir.
iOS
iOS ve macOS geliştiricileri, WKWebView
ürününde yetkilendirme isteklerini açarken bu hatayla karşılaşabilir.
Geliştiriciler bunun yerine iOS için Google ile Oturum Açma gibi iOS kitaplıklarını veya COPPA Vakfı'nın iOS için AppAuth dosyasını kullanmalıdır.
Bir iOS veya macOS uygulaması, yerleştirilmiş kullanıcı aracısında genel bir web bağlantısı açıp 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şleyicileri 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şundaki Google Hesaplarına erişimi sınırlayan bir projenin parçası. Bu yapılandırma seçeneği hakkında daha fazla bilgi için OAuth izin ekranınızı ayarlama yardım makalesinin Kullanıcı türü bölümüne bakın.
invalid_client
İsteğin yapıldığı kaynak, bu istemci için yetkilendirilmemiş. origin_mismatch
inceleyin.
invalid_grant
Ekli yetkilendirme kullanılırken jetonun süresi dolmuş veya 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 şekilde yapılandırıldığından ve isteğinizde doğru jeton 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 JavaScript kaynak URI'siyle eşleşmeyebilir. Credentials pageiçindeki yetkili JavaScript kaynaklarını Google API Console inceleyin.
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ı yetkili JavaScript kaynak URI'siyle eşleşmeyebilir. Google API Console Credentials pageiçindeki yetkili JavaScript kaynaklarını 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 rehberine bakın.
invalid_request
Talebinizle ilgili bir sorun oluştu. Bunun birkaç nedeni olabilir:
- İstek düzgün biçimlendirilmemiş
- İstekte gerekli parametreler eksikti
- İstek, Google'ın desteklemediği bir yetkilendirme yöntemi kullanıyor. OAuth entegrasyonunuzun önerilen bir entegrasyon yöntemini kullandığını doğrulama
3. Adım: OAuth 2.0 sunucu yanıtını yönetin
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 zamanBearer
olarak ayarlanmıştoken_type
parametresini ve jetonun kullanım süresini saniye cinsinden belirtenexpires_in
parametresini de içerir. Erişim jetonu isteğindestate
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.
Google API'lerini çağırma
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);
Tam ö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üğ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:
- 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. - 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.
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.- İ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>
JavaScript kaynak doğrulama kuralları
Google, geliştiricilerin uygulamalarını güvende tutmalarına yardımcı olmak amacıyla 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 açıklanan RFC 3986 bölüm 3'e bakın.
Doğrulama kuralları | |
---|---|
Şema |
JavaScript kaynakları, düz HTTP değil, HTTPS şemasını kullanmalıdır. Yerel ana makine URI'leri (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 |
“googleusercontent.com” olamaz.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şeni içeremez. |
Karakterler |
JavaScript kaynakları, şunlar da dahil olmak üzere belirli karakterleri içeremez:
|
Artımlı yetkilendirme
OAuth 2.0 protokolünde, uygulamanız kapsamlarla tanımlanan kaynaklara erişim yetkisi ister. İhtiyacınız olduğu anda kaynaklar için yetkilendirme istemek, en iyi kullanıcı deneyimi uygulamalarından biri olarak kabul edilir. Bu uygulamayı mümkün kılmak için Google'ın yetkilendirme sunucusu artımlı yetkilendirmeyi destekler. Bu özellik, gerektiğinde kapsamları istemenize olanak tanır ve kullanıcı yeni kapsam için izin verirse kullanıcının projeye verdiği tüm kapsamları içeren bir jeton karşılığında değiştirilebilecek bir yetkilendirme kodu döndürür.
Örneğin, bir uygulamanın kullanıcıların ilginç yerel etkinlikleri tanımasına yardımcı olduğunu varsayalım. Uygulama, kullanıcıların etkinliklerle ilgili videoları izlemesine, videoları derecelendirmesine ve videoları oynatma listelerine eklemesine olanak tanır. Kullanıcılar ayrıca uygulamayı Google Takvimlerine etkinlik eklemek için de kullanabilirler.
Bu durumda, uygulama oturum açma sırasında herhangi bir kapsama ihtiyaç duymayabilir veya erişim isteğinde bulunmayabilir. Ancak kullanıcı bir videoyu derecelendirmeye, oynatma listesine video eklemeye veya başka bir YouTube işlemi gerçekleştirmeye çalıştıysa uygulama https://www.googleapis.com/auth/youtube.force-ssl
kapsamına erişim isteğinde bulunabilir.
Benzer şekilde, kullanıcı bir takvim etkinliği eklemeye çalıştığında uygulama https://www.googleapis.com/auth/calendar
kapsamına erişim isteğinde bulunabilir.
Aşağıdaki kurallar, artımlı yetkilendirmeden elde edilen bir erişim jetonu için geçerlidir:
- Jeton, yeni ve birleştirilmiş yetkilendirmeye dahil edilen kapsamlardan herhangi birine karşılık gelen kaynaklara erişmek için kullanılabilir.
- 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ıtta yer alan
scope
değerlerinden herhangi biri için kullanılabilir. - Birleşik yetkilendirme, izinlerin 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 kapsama erişim izni verip daha sonra mobil istemci aracılığıyla aynı uygulamaya başka bir kapsam verdiyse birleştirilmiş yetkilendirme her iki kapsamı da içerir.
- Birleşik bir yetkilendirmeyi temsil eden bir jetonu iptal ederseniz ilişkilendirilmiş 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 sayesinde uygulamanız birden fazla erişim jetonunu yönetmek zorunda kalmaz.
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. }
Jetonu iptal etme
Bazı durumlarda, bir 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 destek dokümanında, Hesabınıza erişimi olan üçüncü taraf siteler ve uygulamaların site veya uygulama erişimini kaldırma bölümüne bakın.
Bir uygulamanın, kendisine 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 programlı iptal önemlidir. Diğer bir deyişle, kaldırma sürecinin bir bölümü, uygulamaya daha önce verilmiş izinlerin kaldırıldığından emin olmak için bir API isteğini içerebilir.
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(); }