Bu dokümanda, erişim için OAuth 2.0 yetkilendirmesinin nasıl uygulanacağı açıklanmaktadır JavaScript web uygulamasından alınan Google API'leri. OAuth 2.0, kullanıcıların Bir uygulamayla, kullanıcı adlarını, şifrelerini ve diğer bilgilerini muhafaza ederken belirli verileri paylaşabilir. gizlidir. Örneğin, bir uygulama OAuth 2.0'ı kullanarak şuradan izin alabilir: kullanıcıların Google Drive'larında dosya depolamasına izin verir.
Bu OAuth 2.0 akışı, dolaylı izin akışı olarak adlandırılır. Birlikte çalıştığım API'lere yalnızca kullanıcı uygulamadayken erişen uygulamalar. Bu uygulamalarının gizli bilgileri saklaması mümkün değildir.
Bu akışta, uygulamanız uygulamanızı tanımlamak için sorgu parametreleri kullanan bir Google URL'si açar. ve uygulamanın gerektirdiği API erişimi türünü içerir. URL'yi geçerli tarayıcıda açabilirsiniz bir pencere veya pop-up. Kullanıcı, Google ile kimlik doğrulaması yapabilir ve istenen izinleri verebilir. Ardından Google, kullanıcıyı uygulamanıza geri yönlendirir. Yönlendirme, uygulamanızı doğrular ve ardından API isteklerinde bulunmak için kullanır.
Google API'leri İstemci Kitaplığı ve Google Kimlik Hizmetleri
JavaScript için Google API'leri istemci kitaplığı kullanıyorsanız Google'a yetkili aramalar yapmak için OAuth 2.0 akışını yönetmek için Google Kimlik Hizmetleri'nin JavaScript kitaplığı. Lütfen Google'a bakın "Kimlik Hizmetleri" jeton modeli, ve OAuth 2.0 dolaylı izin akışını temel almaktadır.
Ön koşullar
Projeniz için API'leri etkinleştirin
Google API'lerini çağıran herhangi bir uygulamanın, bu API'ları API Console
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.
- API Library , mevcut tüm API'leri ürüne göre gruplandırılmış olarak listeler. ve ne kadar popüler olduğunu öğreneceğiz. Etkinleştirmek istediğiniz API listede görünmüyorsa aramayı kullanarak öğesini bulabilir veya ait olduğu ürün ailesinde Tümünü Göster'i tıklayabilirsiniz.
- Etkinleştirmek istediğiniz API'yi seçin ve Etkinleştir düğmesini tıklayın.
- If prompted, enable billing.
- 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ın yetkilendirme kimlik bilgilerine sahip olması gerekir kimliği tanımlayabileceksiniz. Aşağıdaki adımlarda, projenizin kimlik bilgilerini oluşturmalarını sağlar. Böylece uygulamalarınız kimlik bilgilerini kullanarak API'lere erişebilir bilgileri görürsünüz.
- 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 bir kod snippet'i ekleyin. Bu kaynaklar şunlara uymalıdır: Google'ın doğrulama kurallarına göre ayarlayın.
Erişim kapsamlarını tanımlama
Kapsamlar, uygulamanızın yalnızca ihtiyaç duyduğu kaynaklara erişim istemesini sağlarken aynı zamanda da Böylece kullanıcılar, uygulamanıza izin verdikleri erişim miktarını kontrol edebilir. Böylece, talep edilen kapsamların sayısı ile gerçekleşme olasılığı arasında ters bir ilişki Kullanıcı izni alma.
OAuth 2.0 yetkilendirmesini uygulamaya başlamadan önce kapsamları tanımlamanızı öneririz. uygulamanızın erişim izni olması gerekir.
OAuth 2.0 API Kapsamları dokümanı, Google API'lerine erişmek için kullanabileceğiniz kapsamların listesini görebilirsiniz.
OAuth 2.0 erişim jetonları alma
Aşağıdaki adımlarda uygulamanızın, Google OAuth 2.0 sunucusuyla nasıl etkileşimde bulunduğunu Kullanıcı adına API isteği gerçekleştirmek için kullanıcının izni. Uygulamanızda bu özellik bulunmalıdır kullanıcı yetkilendirmesi gerektiren bir Google API isteğini yürütmeden önce izin vermesi gerekir.
1. Adım: Google'ın OAuth 2.0 sunucusuna yönlendirin
Kullanıcının verilerine erişim izni istemek için kullanıcıyı Google'ın OAuth 2.0'a yönlendirin sunucu.
OAuth 2.0 Uç Noktaları
Şu adresteki Google OAuth 2.0 uç noktasından erişim istemek için bir URL oluşturun:
https://accounts.google.com/o/oauth2/v2/auth Bu uç noktaya HTTPS üzerinden erişilebilir;
düz HTTP bağlantıları reddedilir.
Google yetkilendirme sunucusu, web için aşağıdaki sorgu dizesi parametrelerini destekler sunucu uygulamaları:
| Parametreler | |||||||
|---|---|---|---|---|---|---|---|
client_id |
Zorunlu
Uygulamanızın istemci kimliği. Bu değeri API Console. Credentials page. |
||||||
redirect_uri |
Zorunlu
Kullanıcı şunu tamamladıktan sonra API sunucusunun kullanıcıyı nereye yönlendireceğini belirler:
yetkilendirme akışı. Değer,
İstemcinizin
API Console.
Credentials page. Bu değer
Sağlanan
|
||||||
response_type |
Zorunlu
JavaScript uygulamalarının parametrenin değerini |
||||||
scope |
Zorunlu
CEVAP boşlukla ayrılmış uygulamanızın erişebileceği kaynakları tanımlayan temsil eder. Bu değerler, Google'ın belirtir. Kapsamlar, uygulamanızın yalnızca ihtiyaç duyduğu kaynaklara erişim istemesini sağlar aynı zamanda kullanıcıların, uygulamanıza erişebilecekleri erişim miktarını kontrol etmelerine de bir uygulamadır. Dolayısıyla, talep edilen kapsamların sayısı arasında ters bir ilişki vardır ve kullanıcının izin alma olasılığı bulunur. Uygulamanızın yetkilendirme kapsamlarına bağlam içinde erişim isteğinde bulunmasını öneririz kullanmanızı öneririz. Kullanıcı verilerine bağlam içinde erişim isteğinde bulunarak ek yetkilendirme gibi ek özelliklerden yararlanarak kullanıcıların uygulamanızın istediği erişime neden ihtiyaç duyduğunu iyi anlayabilirsiniz. |
||||||
state |
Önerilen
Uygulamanızın,
yetkilendirme sunucusunun yanıtıyla birlikte çalışır.
Sunucu, Bu parametreyi, kullanıcıyı web sitesine yönlendirmek gibi çeşitli amaçlar için kullanabilirsiniz.
uygulamanızda doğru kaynağı kullanma, nonce gönderme ve siteler arası isteği azaltma
Sahtekarlık. |
||||||
include_granted_scopes |
İsteğe bağlı
Uygulamaların ek erişim istemek için artımlı yetkilendirme kullanmasını sağlar
irdeleyelim. Bu parametrenin değerini |
||||||
enable_granular_consent |
İsteğe bağlı
Varsayılan olarak Google bir uygulama için ayrıntılı izinler sağladığında bu parametre, artık geçerli değil. |
||||||
login_hint |
İsteğe bağlı
Uygulamanız hangi kullanıcının kimlik doğrulaması yapmaya çalıştığını biliyorsa bu parametreyi kullanabilir Google Kimlik Doğrulama Sunucusu'na bir ipucu sağlamak için kullanılır. Sunucu, bu ipucunu oturum açma formundaki e-posta alanını önceden doldurarak veya uygun çoklu giriş oturumunu seçin. Parametre değerini bir e-posta adresi veya |
||||||
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. Şunu yapmazsanız: bu parametreyi belirtirseniz kullanıcıdan yalnızca projenizde ilk erişim izni ister. Bkz. Daha fazla bilgi için yeniden izin isteniyor. Olası değerler:
|
||||||
Google'ın yetkilendirme sunucusuna örnek yönlendirme
Aşağıda, okunabilirlik için satır sonları ve boşluklar içeren örnek bir URL gösterilmiştir.
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'i, JavaScript için Google API'leri İstemci Kitaplığı kullanmadan JavaScript. Bu OAuth sürümünden itibaren 2.0 uç noktası, Kaynaklar Arası Kaynak Paylaşımı'nı (CORS) desteklemez. Snippet, bir formunu doldurun.
/*
* 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şimi verip vermeyeceğini belirler. Burada aşamasında, Google, uygulamanızın adını ve Google API'sini gösteren bir izin penceresi ve hizmetlerin kullanılabilmesi için gereken izinleri . İlgili içeriği oluşturmak için kullanılan daha sonra kullanıcı, uygulamanız tarafından istenen bir veya daha fazla kapsama erişim izni verebilir ya da isteği reddetmelidir.
Başvurunuzun sizden yanıt almayı beklediği için bu aşamada herhangi bir işlem yapması gerekmez. Google'ın, herhangi bir erişim izni verilip verilmediğini gösteren OAuth 2.0 sunucusu. Bu yanıtın açıklaması adım adım anlatacağız.
Hatalar
Google'ın OAuth 2.0 yetkilendirme uç noktasına gönderilen istekler, kullanıcılara yönelik hata mesajları gösterebilir. ile başlar. Sık karşılaşılan hata kodları ve önerilenler aşağıda listelenmiştir.
admin_policy_enforced
Google Hesabı, şu politikaları nedeniyle istenen bir veya daha fazla kapsamı yetkilendiremedi: Google Workspace yöneticilerine ulaşın. Google Workspace Yöneticisi yardım makalesine göz atın Hangi üçüncü taraf ve üçüncü taraf Dahili uygulamaların Google Workspace verilerine erişmesi veya bir yöneticinin tüm kapsamlara ya da hassas ve gizli erişim OAuth istemci kimliğinize açıkça erişim verilene kadar kısıtlanan kapsamları kısıtlamayın.
disallowed_useragent
Yetkilendirme uç noktası, Google'ın OAuth 2.0 Politikaları.
Android
Android geliştiricileri,
android.webkit.WebView.
Geliştiriciler bunun yerine
Android için Google ile Oturum Açma veya COPPA Vakfı'nın
Android için AppAuth
Bir Android uygulaması genel bir web bağlantısını açtığında, web geliştiricileri bu hatayla karşılaşabilir. Bir kullanıcı Google'ın OAuth 2.0 yetkilendirme uç noktasına tıkladığında, sitenizi ziyaret edin. Geliştiriciler, genel bağlantıların her iki türü de içeren işletim sistemi Android Uygulama Bağlantıları işleyicileri veya varsayılan tarayıcı uygulamasını kullanabilirsiniz. İlgili içeriği oluşturmak için kullanılan Android Özel Sekmeleri desteklenen bir seçenektir.
iOS
iOS ve macOS geliştiricileri, şurada yetkilendirme isteklerini açarken bu hatayla karşılaşabilir:
WKWebView.
Geliştiriciler bunun yerine şunun gibi iOS kitaplıklarını kullanmalıdır:
iOS için Google ile Oturum Açma veya COPPA Vakfı'nın
iOS için AppAuth
Web geliştiricileri, iOS veya macOS uygulaması
Google'ın OAuth 2.0 yetkilendirme uç noktasına giden bir kullanıcı otomatik olarak
sitenizi ziyaret edin. Geliştiriciler, genel bağlantıların
her iki türü de içeren işletim sistemi
Geçiş Bağlantıları
işleyicileri veya varsayılan tarayıcı uygulamasını kullanabilirsiniz. İlgili içeriği oluşturmak için kullanılan
SFSafariViewController
desteklenen bir seçenektir.
org_internal
İstekteki OAuth istemci kimliği, belirli Google Cloud Kuruluşu. Bu yapılandırma seçeneği hakkında daha fazla bilgi için Kullanıcı türü "OAuth izin ekranınızı ayarlama başlıklı yardım makalesini inceleyebilirsiniz.
invalid_client
İsteğin yapıldığı kaynak, bu istemci için yetkilendirilmemiş. Görüntüleyin
origin_mismatch
invalid_grant
Ekli yetkilendirme kullanılırken jetonun süresi dolmuş olabilir veya geçersiz kılındıysa. Kullanıcının kimliğini tekrar doğrulayın ve yeni jetonlar almak için kullanıcıdan izin isteyin. Devam ediyorsanız görmek için uygulamanızın doğru yapılandırıldığından ve kullanarak istekte bulunabilirsiniz. Aksi takdirde, kullanıcı hesabında silinmiş veya devre dışı bırakılmış olabilir.
origin_mismatch
Yetkilendirme isteğini gönderen JavaScript'in şeması, alan adı ve/veya bağlantı noktası; OAuth istemci kimliği için kayıtlı yetkili bir JavaScript kaynak URI'siyle eşleşmelidir. İncelemeye yetki verildi Google API Consoleiçindeki JavaScript kaynakları Credentials page.
redirect_uri_mismatch
Yetkilendirme isteğinde iletilen redirect_uri, yetkili bir kuruluşla eşleşmiyor
OAuth istemci kimliğinin yönlendirme URI'si. Şuradaki yetkili yönlendirme URI'lerini inceleyin:
Google API Console Credentials page
Yetkilendirme isteğini gönderen JavaScript'in şeması, alan adı ve/veya bağlantı noktası; OAuth istemci kimliği için kayıtlı yetkili bir JavaScript kaynak URI'siyle eşleşmelidir. İnceleyin yetkili JavaScript kaynaklarını Google API Console Credentials page
redirect_uri parametresi,
desteği sonlandırıldı ve artık desteklenmiyor. Daha fazla bilgi için
taşıma rehberi
inceleyebilirsiniz.
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'unuzu doğrulayın entegrasyonun önerilen bir entegrasyon yöntemi kullanması
3. Adım: OAuth 2.0 sunucu yanıtını yönetin
OAuth 2.0 Uç Noktaları
OAuth 2.0 sunucusu,redirect_uri
erişim jetonu isteği.
Kullanıcı isteği onaylarsa yanıt bir erişim jetonu içerir. Kullanıcı isteği onaylamazsa yanıtta hata mesajı gösterilir. 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_tokenparametresine ek olarak parça dizesi de her zaman şuna ayarlıtoken_typeparametresini içerir:Bearerveexpires_inparametresi, jetonun kullanım süresi (saniye cinsinden).stateparametresi belirtildiyse isteğine dahil edilirse bu koşulun 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ı
Aşağıdaki örnek URL'yi tıklayarak bu akışı test edebilirsiniz. URL'de Google Drive'ınızdaki dosyaların meta verilerini görüntülemek için salt okuma erişimi:
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 şuraya yönlendirileceksiniz:
http://localhost/oauth2callback Bu URL,
404 NOT FOUND hatası yalnızca yerel makineniz bir dosyayı
bu adrese gidin. Bir sonraki adım,
Kullanıcı tekrar uygulamanıza yönlendirildiğinde gösterilecek URI.
Google API'lerini çağırma
OAuth 2.0 Uç Noktaları
Uygulamanız bir erişim jetonu aldıktan sonra, bu jetonu kullanarak bir Google
Belirli bir kullanıcı adına API
kullanıcı hesabı(API'nin gerektirdiği erişim kapsamları verildiyse) ile birlikte çalışır. Bunu yapmak için
API'ye yapılan bir istekte, access_token sorgusu ekleyerek erişim jetonunu
parametresi veya Authorization HTTP başlığı Bearer değeri olabilir. Mümkünse
HTTP üstbilgisi tercih edilir, çünkü sorgu dizeleri sunucu günlüklerinde görünür olma eğilimindedir. Çoğu zaman
Google API'lerine yapılan çağrılarınızı ayarlamak için bir istemci kitaplığı kullanabilirsiniz (örneğin,
Drive Files API'yi çağırma).
Tüm Google API'lerini deneyebilir ve kapsamlarını şuradan görüntüleyebilirsiniz: OAuth 2.0 Playground (OAuth 2.0 Oyun Alanı).
HTTP GET örnekleri
Bir
drive.files
Authorization: Bearer HTTP kullanan uç nokta (Drive Files API)
başlık 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
Aşağıda, kimliği doğrulanmış kullanıcı için aynı API'ye access_token kullanılarak yapılan bir çağrı verilmiştir.
sorgu dizesi parametresi:
GET https://www.googleapis.com/drive/v2/files?access_token=access_token
curl örnek
Bu komutları curl komut satırı uygulamasıyla test edebilirsiniz. Bir
HTTP üstbilgisi seçeneğini kullanan bir örnek (tercih edilen):
curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files
Alternatif olarak, sorgu dizesi parametre seçeneği şu şekildedir:
curl https://www.googleapis.com/drive/v2/files?access_token=access_token
JavaScript örnek kodu
Aşağıdaki kod snippet'i, bir isteği gönderin. Bu örnekte, JavaScript için Google API'leri İstemci Kitaplığı kullanılmaz. Ancak, istemci kitaplığını kullanmıyor olsanız bile Bu kütüphanenin belgelerindeki CORS destek rehberi size yardımcı olacaktır göz atabilirsiniz.
Bu kod snippet'inde access_token değişkeni, sahip olduğunuz jetonu temsil eder
yetkili kullanıcı adına API isteklerinde bulunmak için. Tamamlanan
example, tarayıcının yerel depolama alanında bu jetonun nasıl depolanacağını ve jetonun nasıl alınacağını gösterir
lütfen unutmayın.
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ğinde, JavaScript için Google API'leri İstemci Kitaplığı. Bu kod, bir düğmenin yer aldığı bir HTML sayfası için bir API isteği gönderin. Düğmeyi tıklarsanız kod, sayfada bir Tarayıcınızın yerel depolama alanındaki API erişim jetonu. Bu durumda, API isteğini yürütür. Aksi halde 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. Bu sunucu,
https://www.googleapis.com/auth/drive.metadata.readonlykapsamı. - İstenen bir veya daha fazla kapsama erişim izni verdikten (veya reddettikten) sonra kullanıcı şuraya yönlendirilir: parça tanımlayıcısı dizesinden erişim jetonunu ayrıştıran orijinal sayfa.
Sayfa, örnek API isteğinde bulunmak için erişim jetonunu kullanır.
API isteği, verileri geri almak için Drive API'nin
about.getyöntemini çağırır Yetkili kullanıcının Google Drive hesabıyla ilgili bilgiler.- İstek başarıyla yürütülürse API yanıtı, tarayıcının hata ayıklama sayfasına kaydedilir konsolu.
Uygulamaya erişimi şuradan iptal edebilirsiniz: İzinler sayfası: Google Hesabı. Uygulama, Google API Dokümanları için OAuth 2.0 Demo olarak listelenir.
Bu kodu yerel olarak çalıştırmak istiyorsanız YOUR_CLIENT_ID ve
YOUR_REDIRECT_URI sizin
yetkilendirme kimlik bilgileri. YOUR_REDIRECT_URI değişkeni
sayfanın sunulduğu URL'ye ayarlanmalıdır. Değer, şunlardan biriyle tam olarak eşleşmelidir:
OAuth 2.0 istemcisi için,
API Console Credentials pageEğer
bu değer yetkili bir URI ile eşleşmezse bir redirect_uri_mismatch alırsınız
hatası. Projeniz ayrıca
Bu istek için uygun API'yi etkinleştirdiğinizden emin olun.
<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/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() {
// 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',
'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, yardımcı olmak için JavaScript kaynaklarına aşağıdaki doğrulama kurallarını uygular uygulamalarını güvende tutmasını sağlar. JavaScript kaynaklarınız bu kurallara uygun olmalıdır. Şu ayrıntılar için RFC 3986 bölüm 3'e bakın: aşağıda açıklanmıştır.
| Doğrulama kuralları | |
|---|---|
| Şema |
JavaScript kaynakları, düz HTTP değil, 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)
(alanın sahibi değilse) |
| 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 kaynaklara erişim için yetkilendirme ister. kapsamlarla belirlenir. Yetkilendirme isteğinde bulunmak en iyi kullanıcı deneyimi uygulaması olarak kabul edilir. ihtiyaç duyduğunuz anda bulmanız gerekir. Bu uygulamayı etkinleştirmek için Google'ın yetkilendirme sunucusu, artımlı yetkilendirmeyi destekler. Bu özellik, gerektiğinde kapsamları istemenize olanak sağlar. kullanıcı yeni kapsam için izin verirse gerekebilecek bir yetkilendirme kodu kullanıcının projeye verdiği tüm kapsamları içeren bir jetonla takas edildi.
Örneğin, kullanıcıların müzik parçalarından kesitler alıp mix oluşturmalarına olanak tanıyan bir uygulama için kaynaklarda oturum açan kişinin adı olabilir. Ancak, Tamamlanan bir mix'i kaydetmek, kullanıcının Google Drive'ına erişmeyi gerektirir. Çoğu kişi bunu bulur uygulama aslında yalnızca o sırada Google Drive'larına erişmeleri istense bile doğal olarak ihtiyaç duydu.
Bu durumda, oturum açma sırasında uygulama openid ve
profile kapsamlarını kullanın ve ardından
İlk istek sırasında https://www.googleapis.com/auth/drive.file kapsamı
mix'i de kullanabilirsiniz.
Aşağıdaki kurallar, artımlı yetkilendirmeden elde edilen bir erişim jetonu için geçerlidir:
- Bu jeton, yeni ve birleştirilmiş yetkilendirmeyi kullanabilirsiniz.
- 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
scopedeğer dahil edildi. - Birleştirilmiş yetkilendirme, kullanıcının API projesine verdiği tüm kapsamları ve ve bu bilgilerin farklı istemcilerden talep edilip edilmediğini kontrol edebilirsiniz. Örneğin, bir kullanıcı uygulamanın masaüstü istemcisini kullanarak bir kapsam ve ardından aynı kullanıcıya başka bir kapsam verildi uygulanması durumunda, birleştirilmiş yetkilendirme her iki kapsamı da kapsar.
- Birleşik bir yetkilendirmeyi temsil eden bir jetonu iptal ederseniz tüm bunlara erişim ilişkilendirilmiş kullanıcı adına yetkilendirmenin kapsamları eşzamanlı olarak 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ı kullanmanızı öneririz.
OAuth 2.0 Uç Noktaları
Mevcut bir erişim jetonuna kapsam eklemek için include_granted_scopes dahil edin
Google'ın OAuth 2.0 sunucusuna gönderilen isteğinizde parametresini içermelidir.
Aşağıdaki kod snippet'i bunun nasıl yapılacağını göstermektedir. Snippet, büyük resmi depoladığınızı varsayar
Tarayıcının yerel depolama alanında erişim jetonunuzun geçerli olduğu kapsamlar. (
complete example kodu, erişim jetonunun geldiği kapsamların bir listesini depolar
tarayıcının yerel ayarında oauth2-test-params.scope özelliği ayarlanarak geçerli olur.
storage.)
Snippet, erişim jetonunun geçerli olduğu kapsamları kullanmak istediğiniz kapsamla karşılaştırır
geçiş yapabilirsiniz. Erişim jetonu bu kapsamı içermiyorsa OAuth 2.0 akışı başlar.
Burada, oauth2SignIn işlevi
2. Adım (ve bu adım tamamlanan
örneğine bakın).
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, bir kullanıcı bir uygulamaya verilen erişimi iptal etmek isteyebilir. Kullanıcı erişimi iptal edebilir adresini ziyaret ederek Hesap Ayarları. Bkz. Kaldır Üçüncü taraf sitelerin site veya uygulama erişimi bölümü ve hesabınıza erişimi olan uygulamalar destek dokümanına bakın.
Bir uygulamanın, kendisine verilen erişimi programlı olarak iptal etmesi de mümkündür. Programlı iptal etme, bir kullanıcının e-posta listesinden çıktığı, bir veya sonraki bir veya bir uygulamanın gerektirdiği API kaynakları önemli ölçüde değişmiştir. Başka bir deyişle, Kaldırma sürecinin bir bölümü, izinleri önceden sağlamak için bir API isteği içerebilir. kaldırılır.
OAuth 2.0 Uç Noktaları
Uygulamanız, bir jetonu programlı bir şekilde iptal etmek için
https://oauth2.googleapis.com/revoke 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 bir yenileme jetonu varsa yenileme jetonu da iptal edilir.
İptal işlemi başarıyla tamamlanırsa yanıtın HTTP durum kodu
200 Hata koşulları için 400 ile birlikte HTTP durum kodu döndürülür
hata kodu içerir.
Aşağıdaki JavaScript snippet'i,
JavaScript için Google API'leri İstemci Kitaplığı. İptal işlemi için Google'ın OAuth 2.0 uç noktasından itibaren
jetonlar Arası Kaynak Paylaşımı'nı (CORS) desteklemiyorsa, kod bir form oluşturur ve
göndermek için XMLHttpRequest() yöntemini kullanmak yerine formu uç noktaya
isteğinde bulunabilirsiniz.
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ı Korumayı Uygulama
Kullanıcılarınızın güvenliğini korumak için atmanız gereken ek bir adım Hesaplar Arası Google'ın Hesaplar Arası Koruma Hizmeti'ni kullanarak koruma. Bu hizmet sayesinde şunları yapabilirsiniz: uygulamanıza aşağıdaki konularda bilgi sağlayan güvenlik işlemi bildirimlerine abone olun: kullanıcı hesabında önemli değişiklikler yapabilir. Daha sonra bu bilgileri kullanarak karar verdiğinizden emin olun.
Google'ın Hesaplar Arası Koruma Hizmeti tarafından uygulamanıza gönderilen etkinlik türlerine örnek olarak aşağıdakiler 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
Bkz. Kullanıcı hesaplarını Hesaplar Arası Koruma ile koruma 'nı inceleyin. inceleyin.