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 sayesinde kullanıcılar, bir uygulamayla belirli verileri paylaşırken kullanıcı adlarını, şifrelerini ve diğer bilgilerini gizli tutabilir. Ö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ı izin akışı denir. Yalnızca kullanıcı uygulamadayken API'lere erişen uygulamalar için tasarlanmıştır. Bu uygulamalar gizli bilgileri saklayamaz.
Bu akışta uygulamanız, uygulamanızı ve uygulamanın gerektirdiği API erişim türünü tanımlamak için sorgu parametrelerini kullanan bir Google URL'si açar. URL'yi geçerli tarayıcı penceresinde veya 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. Bu yönlendirme, uygulamanızın doğrulayıp API isteği yapmak için kullandığı bir erişim jetonu içerir.
Google API'ler İstemci Kitaplığı ve Google Kimlik Hizmetleri
Google'a yetkili çağrılar yapmak için 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 OAuth 2.0 dolaylı izin akışına dayalı Google Kimlik Hizmetleri'nin jeton modeline bakın.
Ön koşullar
Projeniz için API'leri etkinleştirme
Google API'lerini çağıran tüm uygulamaların bu API'leri 'te etkinleştirmesi gerekir.
Projeniz için bir API'yi etkinleştirmek üzere:
- ,
- Bu sayfada, ürün ailesine ve popülerliğe göre gruplandırılmış tüm mevcut API'ler listelenir. Etkinleştirmek istediğiniz API listede görünmüyorsa arama yaparak bulabilir veya ait olduğu ürün ailesinde Tümünü Görüntüle'yi tıklayabilirsiniz.
- Etkinleştirmek istediğiniz API'yi seçin ve ardından Etkinleştir düğmesini tıklayın.
Yetkilendirme kimlik bilgileri oluşturma
Google API'lerine erişmek için OAuth 2.0 kullanan tüm uygulamaların, Google'ın OAuth 2.0 sunucusunda uygulamayı tanımlayan yetkilendirme kimlik bilgilerine sahip olması gerekir. Aşağıdaki adımlarda, projeniz için kimlik bilgilerinin nasıl oluşturulacağı açıklanmaktadır. Ardından, uygulamalarınız bu proje için etkinleştirdiğiniz API'lere erişmek üzere kimlik bilgilerini kullanabilir.
- Kimlik bilgisi oluştur > OAuth istemci kimliği seçeneğini tıklayın.
- Web uygulaması uygulama türünü seçin.
- Formu doldurun. Yetkili 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 alanları tanımlar. Bu kaynaklar Google'ın doğrulama kurallarına uymalıdır.
Erişim kapsamlarını belirleme
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 etmelerini sağlar. Bu nedenle, istenen kapsamların 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 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ı alma
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. Kullanıcı yetkilendirmesi gerektiren bir Google API isteğini yürütebilmesi için uygulamanızın bu izne sahip olması gerekir.
1. adım: Google'ın OAuth 2.0 sunucusuna yönlendirme
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ı
Google'ın OAuth 2.0 uç noktasından (https://accounts.google.com/o/oauth2/v2/auth) erişim isteğinde bulunmak için bir URL oluşturun. Bu uç noktaya HTTPS üzerinden erişilebilir; sıradan 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 şu adreste 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 yetkili yönlendirme URI'lerinden biriyle tam olarak eşleşmelidir. Bu URI'yi istemcinizin
bölümünde yapılandırdınız. 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 ayrı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ını sağlar. Ayrıca kullanıcıların, uygulamanıza verdikleri erişim miktarını kontrol etmelerini de sağlar. Bu nedenle, istenen kapsamların sayısı ile kullanıcı izni alma olasılığı arasında ters bir ilişki vardır. Uygulamanızın, mümkün olduğunda bağlama göre yetkilendirme kapsamlarına erişim isteğinde bulunmasını öneririz. Artımlı yetkilendirme aracılığıyla 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ında durumu korumak için kullandığı tüm dize değerlerini belirtir.
Sunucu, kullanıcı uygulamanızın erişim isteğini onayladıktan veya reddettikten sonra Bu parametreyi, kullanıcıyı uygulamanızdaki doğru kaynağa yönlendirme, tek seferlik kimlikler gönderme ve siteler arası istek sahteciliğini azaltma gibi çeşitli amaçlar için kullanabilirsiniz. |
||||||
include_granted_scopes |
İsteğe bağlı
Uygulamaların, bağlamda ek kapsamlara erişim isteğinde bulunmak için artımlı yetkilendirmeyi kullanmasına olanak tanır. 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 etkisi olmaz. |
||||||
login_hint |
İsteğe bağlı
Uygulamanız hangi kullanıcının kimliğini doğrulamaya çalıştığını biliyorsa Google Kimlik Doğrulama Sunucusu'na ipucu vermek için bu parametreyi kullanabilir. Sunucu, oturum açma formundaki e-posta alanını önceden doldurarak veya uygun çoklu oturum oturumunu seçerek oturum açma akışını basitleştirmek için ipucunu kullanır. Parametre değerini, kullanıcının Google kimliğine eşdeğer olan bir e-posta adresine veya |
||||||
prompt |
İsteğe bağlı
Kullanıcıya gösterilecek istemlerin boşlukla ayrılmış, büyük/küçük harfe duyarlı listesi. Bu parametreyi belirtmezseniz kullanıcıdan yalnızca projeniz ilk kez erişim istediğinde izin istenir. Daha fazla bilgi için Yeniden izin isteğinde bulunma başlıklı makaleyi inceleyin. Olası değerler:
|
||||||
Google'ın yetkilendirme sunucusuna yönlendirme örneği
Aşağıda, okunabilirlik için satır araları ve boşluklar içeren bir örnek URL gösterilmektedir.
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly%20https%3A//www.googleapis.com/auth/calendar.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 istemci kitaplığı kullanılmadan JavaScript'de 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 bu 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 https://www.googleapis.com/auth/calendar.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şimi 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 gösteren bir izin penceresi ile birlikte, verilecek erişim kapsamlarının bir özetini gösterir. Kullanıcı, uygulamanız tarafından istenen bir veya daha fazla kapsama erişim izni vermeyi kabul edebilir ya da isteği reddedebilir.
Google'ın OAuth 2.0 sunucusundan erişim izni verilip verilmediğini belirten yanıtı beklerken uygulamanızın bu aşamada herhangi bir işlem yapması gerekmez. Bu yanıt, aşağıdaki adımda açıklanmıştır.
Hatalar
Google'ın OAuth 2.0 yetkilendirme uç noktasına yapılan istekler, beklenen kimlik doğrulama ve yetkilendirme akışları yerine kullanıcılara yönelik hata mesajları gösterebilir. Sık karşılaşılan 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. Bir 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 Yöneticisi yardım makalesini Google Workspace verilerine hangi üçüncü taraf uygulamalarının ve dahili uygulamaların erişebileceğini yönetme inceleyin.
disallowed_useragent
Yetkilendirme uç noktası, Google'ın OAuth 2.0 Politikaları tarafından izin verilmeyen yerleşik bir kullanıcı aracısı içinde gösteriliyor.
Yapay Zeka
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.
Web geliştiricileri, bir Android uygulaması yerleşik 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 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şleyiciler hem Android Uygulama Bağlantıları işleyicilerini hem de varsayılan tarayıcı uygulamasını içerir. 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'ın iOS için AppAuth gibi iOS kitaplıklarını kullanmalıdır.
Web geliştiricileri, bir iOS veya macOS uygulaması yerleşik 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 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şleyiciler hem Evrensel Bağlantılar işleyicilerini hem de varsayılan tarayıcı uygulamasını içerir. SFSafariViewController kitaplığı da desteklenen bir seçenektir.
org_internal
İstekte bulunan OAuth istemci kimliği, belirli bir Google Cloud kuruluşunda 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 edinmek için OAuth izin ekranınızı ayarlama yardım makalesindeki Kullanıcı türü bölümüne bakın.
invalid_client
İsteğin gönderildiği kaynak, bu istemci için yetkili değil. origin_mismatch başlıklı makaleyi inceleyin.
invalid_grant
Artımlı yetkilendirme kullanılırken jetonun süresi dolmuş veya jeton geçersiz kılınmış olabilir. Kullanıcının kimliğini tekrar doğrulayın ve yeni jeton 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 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ğinin kaynağı olan JavaScript'in şeması, alanı ve/veya bağlantı noktası, OAuth istemci kimliği için kayıtlı bir yetkili JavaScript kaynak URI'siyle eşleşmeyebilir. bölümündeki yetkili JavaScript kaynaklarını inceleyin.
redirect_uri_mismatch
Yetkilendirme isteğinde iletilen redirect_uri, OAuth istemci kimliği için yetkili bir yönlendirme URI'siyle eşleşmiyor. bölümündeki yetkili yönlendirme URI'lerini inceleyin.
Yetkilendirme isteğinin kaynağı olan JavaScript'in şeması, alanı ve/veya bağlantı noktası, OAuth istemci kimliği için kayıtlı bir yetkili JavaScript kaynak URI'siyle eşleşmeyebilir. bölümündeki yetkili JavaScript kaynaklarını inceleyin.
redirect_uri parametresi, kullanımdan kaldırılmış ve artık desteklenmeyen OAuth bant dışı (OOB) akışını referans alabilir. Entegrasyonunuzu güncellemek için taşıma kılavuzunu inceleyin.
invalid_request
Gönderdiğiniz istekte bir sorun vardı. Bunun birkaç nedeni olabilir:
- İstek doğru şekilde biçimlendirilmemiş
- İstekte gerekli parametreler eksik
- İstek, Google'ın desteklemediği bir yetkilendirme yöntemi kullanıyor. OAuth entegrasyonunuzun önerilen bir entegrasyon yöntemini kullandığından emin olun
3. Adım: OAuth 2.0 sunucu yanıtını işleyin
OAuth 2.0 uç noktaları
OAuth 2.0 sunucusu, erişim jetonu isteğinizde belirtilen redirect_uri adresine bir yanıt gönderir.
Kullanıcı isteği onaylarsa yanıtta bir erişim jetonu bulunur. Kullanıcı isteği onaylamıyorsa yanıtta bir hata mesajı yer alır. Erişim jetonu veya hata mesajı, aşağıdaki gibi yönlendirme URI'sinin karma oluşturma 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_tokenparametresine ek olarak her zamanBearerolarak ayarlanantoken_typeparametresini ve jetonun geçerlilik süresini saniye cinsinden belirtenexpires_inparametresini de içerir. Erişim jetonu isteğindestateparametresi 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ı
Aşağıdaki örnek URL'yi tıklayarak bu akışı test edebilirsiniz. Bu URL, Google Drive'ınızdaki dosyaların meta verilerini görüntülemek için salt okunur erişim ve Google Takvim etkinliklerinizi görüntülemek için salt okunur erişim ister:
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly%20https%3A//www.googleapis.com/auth/calendar.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önlendirilirsiniz. Yerel makineniz bu adreste bir dosya sunmadığı sürece bu URL, 404 NOT FOUND hatası verir. Sonraki adımda, kullanıcı uygulamanıza geri yönlendirildiğinde URI'de döndürülen bilgiler hakkında daha fazla bilgi verilmektedir.
4. Adım: Kullanıcıların hangi kapsamları verdiğini kontrol edin
Kullanıcılar, tek seferde birden fazla kapsam isteğinde bulunduğunuzda uygulamanızın istediği tüm kapsamları vermeyebilir. Uygulamanız, kullanıcı tarafından hangi kapsamların verildiğini her zaman kontrol etmeli ve ilgili özellikleri devre dışı bırakarak kapsam reddi durumlarını ele almalıdır. Daha fazla bilgi için Ayrıntılı izinleri yönetme başlıklı makaleyi inceleyin.
OAuth 2.0 uç noktaları
Kullanıcının uygulamanıza belirli bir kapsama erişim izni verip vermediğini kontrol etmek için erişim jetonu yanıtındaki scope alanını inceleyin. access_token tarafından verilen erişim kapsamları, boşlukla ayrılmış, büyük/küçük harf duyarlı dizelerin listesi olarak ifade edilir.
Örneğin, aşağıdaki örnek erişim jetonu yanıtı, kullanıcının uygulamanıza salt okunur Drive etkinliği ve Takvim etkinlikleri izinlerine erişim izni verdiğini gösterir:
{ "access_token": "1/fFAGRNJru1FTz70BzhT3Zg", "expires_in": 3920, "token_type": "Bearer", "scope": "https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/calendar.readonly", "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI" }
Google API'lerini çağırma
OAuth 2.0 uç noktaları
Uygulamanız bir erişim jetonu aldıktan sonra, API tarafından istenen erişim kapsamları verilmişse belirli bir kullanıcı hesabı adına bir Google API'sine çağrı yapmak için jetonu kullanabilirsiniz. Bunu yapmak için access_token sorgu parametresi veya Authorization HTTP üst bilgisi Bearer değeri ekleyerek erişim jetonunu API'ye gönderilen bir isteğe ekleyin. Sorgu dizeleri sunucu günlüklerinde görünmeye eğilimli 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).
Tüm Google API'lerini deneyebilir ve kapsamlarını OAuth 2.0 Playground'da görüntüleyebilirsiniz.
HTTP GET örnekleri
Authorization: Bearer HTTP üst bilgisi kullanılarak
drive.files
uç noktasına (Drive Dosyalar API'si) 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
Kimliği doğrulanmış kullanıcı için access_token
sorgu dizesi parametresini kullanan aynı API'ye yapılan bir çağrı aşağıda verilmiştir:
GET https://www.googleapis.com/drive/v2/files?access_token=access_token
curl örnek
Bu komutları curl komut satırı uygulamasıyla test edebilirsiniz. HTTP üst bilgisi seçeneğini kullanan bir örneği aşağıda bulabilirsiniz (tercih edilir):
curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files
Alternatif olarak sorgu dizesi parametresi seçeneğini de kullanabilirsiniz:
curl https://www.googleapis.com/drive/v2/files?access_token=access_token
JavaScript örnek kodu
Aşağıdaki kod snippet'inde, bir 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 istemci kitaplığı kullanılmamaktadır. Ancak istemci kitaplığını kullanmıyor olsanız bile söz konusu kitaplığın dokümanlarında yer alan CORS desteği 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 göndermek için edindiğiniz jetonu temsil eder. Tam örnekte, bu jetonun tarayıcı 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);
Tam örnek
OAuth 2.0 uç noktaları
Bu kod örneği, JavaScript için Google API'leri istemci kitaplığı kullanılmadan JavaScript'te OAuth 2.0 akışının nasıl tamamlanacağını gösterir. Kod, API isteğini denemek için bir düğme gösteren bir HTML sayfası içindir. Düğmeyi tıklarsanız kod, sayfanın tarayıcınızın yerel depolama alanında API erişim jetonu depolayıp depolamadığını kontrol eder. Bu durumda API isteği yürütülür. Aksi takdirde OAuth 2.0 akışı başlatılır.
OAuth 2.0 akışında sayfa şu adımları izler:
- Kullanıcıyı,
https://www.googleapis.com/auth/drive.metadata.readonlyvehttps://www.googleapis.com/auth/calendar.readonlykapsamlarına erişim isteğinde bulunan Google'ın OAuth 2.0 sunucusuna yönlendirir. - İstekte bulunulan bir veya daha fazla kapsama erişim izni verildikten (veya reddedildikten) sonra kullanıcı, parça tanımlayıcısı dizesinden erişim jetonunu ayrıştıran orijinal sayfaya yönlendirilir.
- Sayfa, kullanıcının uygulamaya hangi kapsamlarda erişim izni verdiğini kontrol eder.
Kullanıcı istenen kapsamlara erişim izni verdiyse 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.getyö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 için YOUR_CLIENT_ID ve YOUR_REDIRECT_URI değişkenleri için yetkilendirme kimlik bilgilerinize karşılık gelen değerleri ayarlamanız gerekir. YOUR_REDIRECT_URI değişkeni, sayfanın yayınlandığı URL ile aynı URL'ye ayarlanmalıdır. Değer, 'te 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. Projenizde bu istek için uygun API'nin de etkinleştirilmiş 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']) {
// User authorized the request. Now, check which scopes were granted.
if (params['scope'].includes('https://www.googleapis.com/auth/drive.metadata.readonly')) {
// User authorized read-only Drive activity permission.
// Calling the APIs, etc.
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 {
// User didn't authorize read-only Drive activity permission.
// Update UX and application accordingly
console.log('User did not authorize read-only Drive activity permission.');
}
// Check if user authorized Calendar read permission.
if (params['scope'].includes('https://www.googleapis.com/auth/calendar.readonly')) {
// User authorized Calendar read permission.
// Calling the APIs, etc.
console.log('User authorized Calendar read permission.');
}
else {
// User didn't authorize Calendar read permission.
// Update UX and application accordingly
console.log('User did not authorize Calendar read permission.');
}
} 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/drive.metadata.readonly https://www.googleapis.com/auth/calendar.readonly',
'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 tutmasına yardımcı olmak için JavaScript kaynaklarına aşağıdaki doğrulama kurallarını uygular. JavaScript kaynaklarınızın bu kurallara uyması gerekir. Alan, ana makine ve şemanın tanımı için aşağıda belirtilen RFC 3986 bölüm 3'e bakın.
| Doğrulama kuralları | |
|---|---|
| Şema |
JavaScript kaynakları, HTTP yerine HTTPS şemasını kullanmalıdır. Yerel ana makine URI'leri (yerel ana makine 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. |
| Userinfo |
JavaScript kaynakları, userinfo alt bileşenini içeremez. |
| Yol |
JavaScript kaynakları, yol bileşenini içeremez. |
| Sorgu |
JavaScript kaynakları sorgu bileşenini içeremez. |
| Fragment |
JavaScript kaynakları, fragman bileşenini içeremez. |
| Karakterler |
JavaScript kaynakları aşağıdakiler dahil olmak üzere belirli karakterler içeremez:
|
Artımlı yetkilendirme
OAuth 2.0 protokolünde uygulamanız, kapsamlarla tanımlanan kaynaklara erişmek için yetkilendirme ister. Kaynaklar için yetkilendirmeyi ihtiyaç duyduğunuz anda istemek, en iyi kullanıcı deneyimi uygulamalarından biri olarak kabul edilir. Bu uygulamayı etkinleştirmek için Google'ın yetkilendirme sunucusu artan yetkilendirmeyi destekler. Bu özellik, ihtiyaç duyduğunuz 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 jetonla değiştirilebilecek bir yetkilendirme kodu döndürür.
Örneğin, kullanıcıların müzik parçalarından kesit almasına ve remiks oluşturmasına olanak tanıyan bir uygulamanın oturum açma sırasında çok az kaynağa (belki de oturum açan kişinin adından başka bir şeye) ihtiyacı olabilir. Ancak, tamamlanmış bir miksi kaydetmek için Google Drive'a erişmesi gerekir. Çoğu kullanıcı, Google Drive'larına yalnızca uygulamanın gerçekten ihtiyaç duyduğu sırada erişim izni verilmesini doğal karşılar.
Bu durumda, uygulama oturum açma sırasında temel oturum açmak için openid ve profile kapsamlarını isteyebilir, ardından bir miksaj kaydetmek için ilk istek sırasında https://www.googleapis.com/auth/drive.file kapsamını isteyebilir.
Artımlı yetkilendirmeden elde edilen erişim jetonları için aşağıdaki kurallar geçerlidir:
- Jeton, yeni, birleştirilmiş yetkilendirmeye dahil edilen kapsamlardan herhangi birine karşılık gelen kaynaklara erişmek için kullanılabilir.
- Erişim jetonu almak için birleştirilmiş yetkilendirme için yenileme jetonunu kullandığınızda erişim jetonu, birleştirilmiş yetkilendirmeyi temsil eder ve yanıtta yer alan
scopedeğerlerinden herhangi biri için kullanılabilir. - Birleştirilmiş yetkilendirme, kullanıcının API projesine verdiği tüm kapsamları içerir. Bu kapsamlar farklı istemcilerden istenmiş olsa bile geçerlidir. Örneğin, bir kullanıcı bir uygulamanın masaüstü istemcisini kullanarak bir kapsama erişim izni verdiyse ve ardından mobil istemci aracılığıyla aynı uygulamaya başka bir kapsam için erişim izni verdiyse birleştirilmiş yetkilendirme her iki kapsamı da içerir.
- Birleştirilmiş yetkilendirmeyi temsil eden bir jetonu iptal ederseniz ilişkili kullanıcı adına bu yetkilendirmenin tüm kapsamlarına erişim de aynı anda iptal edilir.
Aşağıdaki kod örneklerinde, mevcut bir erişim jetonuna nasıl kapsam ekleneceği gösterilmektedir. Bu yaklaşım, uygulamanızın birden fazla erişim jetonu yönetmek zorunda kalmasını önler.
OAuth 2.0 uç noktaları
Mevcut bir erişim jetonuna kapsam eklemek için Google'ın OAuth 2.0 sunucusuna gönderdiğiniz isteğe include_granted_scopes parametresini ekleyin.
Aşağıdaki kod snippet'inde bunun nasıl yapılacağı gösterilmektedir. Kod snippet'i, erişim jetonunuzun geçerli olduğu kapsamları tarayıcının yerel depolama alanında depoladığınızı varsayar. (Tam örnek kodu, oauth2-test-params.scope mülkünü tarayıcının yerel depolama alanında ayarlayarak erişim jetonunun geçerli olduğu kapsamların listesini depolar.)
Kod snippet'i, 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ı kapsamıyorsa OAuth 2.0 akışı başlar.
Buradaki oauth2SignIn işlevi, 2. adımda sağlanan işlevle (ve tam örnekte daha sonra 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ılar, bir uygulamaya verilen erişimi iptal etmek isteyebilir. Kullanıcılar Hesap Ayarları'nı ziyaret ederek 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 bölümünü inceleyin.
Bir uygulamanın kendisine verilen erişimi programatik olarak iptal etmesi de mümkündür. Programatik iptal, kullanıcının aboneliğini iptal ettiği, bir uygulamayı kaldırdığı veya bir uygulamanın ihtiyaç duyduğu API kaynaklarının önemli ölçüde değiştiği durumlarda önemlidir. Diğer bir deyişle, kaldırma işleminin bir kısmı, daha önce uygulamaya verilen izinlerin kaldırılmasını sağlamak için bir API isteği içerebilir.
OAuth 2.0 uç noktaları
Bir jetonu programatik olarak iptal etmek için uygulamanız https://oauth2.googleapis.com/revoke adresine 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ıyla işlenirse yanıtın HTTP durum kodu 200 olur. Hata durumlarında, hata koduyla birlikte bir HTTP durum kodu 400 döndürülür.
Aşağıdaki JavaScript snippet'inde, JavaScript için Google API'leri istemci 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ı kaynakta çapraz kaynak paylaşımını (CORS) desteklemediğinden kod, isteği yayınlamak için XMLHttpRequest() yöntemini kullanmak yerine bir form oluşturup 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(); }
Hesaplar Arası Koruma'yı uygulama
Kullanıcılarınızın hesaplarını korumak için atmanız gereken bir diğer adım da Google'ın Hesaplar Arası Koruma Hizmeti'ni kullanarak Hesaplar Arası Koruma'yı uygulamaktır. Bu hizmet, kullanıcı hesabında yapılan önemli değişikliklerle ilgili olarak uygulamanıza bilgi sağlayan güvenlik etkinliği bildirimlerine abone olmanızı sağlar. Ardından, etkinliklere nasıl yanıt vermeye karar verdiğiniz doğrultusunda işlem yapmak için bu bilgileri kullanabilirsiniz.
Google'ın Hesaplar Arası Koruma Hizmeti tarafından uygulamanıza gönderilen etkinlik türlerine örnek olarak şunlar verilebilir:
-
https://schemas.openid.net/secevent/risc/event-type/sessions-revoked -
https://schemas.openid.net/secevent/oauth/event-type/token-revoked -
https://schemas.openid.net/secevent/risc/event-type/account-disabled
Hesaplar Arası Koruma'nın nasıl uygulanacağı ve mevcut etkinliklerin tam listesi hakkında daha fazla bilgi için Hesaplar Arası Koruma ile kullanıcı hesaplarını koruma sayfasına bakabilirsiniz.