google.accounts.oauth2
JavaScript kitaplığı, kullanıcıları
ve kullanıcı verileriyle çalışmak için bir erişim jetonu alın. Bu,
OAuth 2.0 dolaylı izin akışı ve Google Cloud'u doğrudan
API'leri doğrudan REST ve CORS kullanarak veya Google API'leri istemci kitaplığımızı kullanarak
JavaScript (gapi.client
olarak da bilinir)
daha karmaşık API'ler.
Korunan kullanıcı verilerine bir tarayıcıdan erişmeden önce sitenizdeki kullanıcılar Google'ın web tabanlı hesap seçicisi, oturum açma ve izin süreçleri ve son olarak da Google'ın OAuth sunucuları sorunu çözülür ve web uygulamanıza erişim jetonu döndürür.
Jeton tabanlı yetkilendirme modelinde, kullanıcı başına depolamaya gerek yoktur. arka uç sunucunuzdaki jetonları yenileyin.
İstemci Tarafı Web Uygulamaları için OAuth 2.0 rehberini inceleyin.
Kurulum
Google API istemci kimliği kılavuzu. Ardından, sayfalara istemci kitaplığını ekleyin
çağrılır. Son olarak, jetonu başlatın
gerekir. Bu işlem genellikle istemci kitaplığının onload
işleyicisi içinde yapılır.
Jeton istemcisini başlatma
Web uygulamanızıninitTokenClient()
istemci kimliğini kullanıyorsanız isteğe bağlı olarak kullanıcı kapsamının bir veya daha fazlasının listesini ekleyebilirsiniz.
şunlara erişmesi gerekir:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (response) => {
...
},
});
OAuth 2.0 jeton akışını tetikleyin
Jeton kullanıcı deneyimi akışını tetiklemek verequestAccessToken()
erişim jetonu. Google, kullanıcıdan şunları yapmasını ister:
- Çocuğunuzun hesabını seçin,
- daha önce oturum açmadıysanız Google Hesabı'nda oturum açabilir,
- web uygulamanızın istenen her kapsama erişmesine izin verin.
Kullanıcı hareketi jeton akışını tetikliyor: <button onclick="client.requestAccessToken();">Authorize me</button>
Google, daha sonra erişim jetonunu veTokenResponse
kullanıcının geri çağırma işleyicinize erişim izni verdiği kapsamlar veya hata oluştu.
Kullanıcılar hesap seçiciyi veya oturum açma pencerelerini kapatabilir. Bu durumda, geri çağırma işlevi çağrılmaz.
İzin konusunu yönetme
Uygulamanızın tasarım ve kullanıcı deneyimi, yalnızca Google'ın OAuth 2.0 Politikaları'nın ayrıntılı incelemesi. Bu politikalar, kullanıcı izninin ne zaman ve nasıl ele alınacağı gibi konular hakkında daha fazla bilgi edinebilirsiniz.
Artımlı yetkilendirme, şunları yapmak için kullanılan bir politika ve uygulama tasarımı yöntemidir: kapsamları kullanarak önceden değil, yalnızca gerektiğinde ve hem de aynı anda. Kullanıcılar, kaynakların paylaşılmasını tek tek onaylayabilir veya reddedebilir Bu, ayrıntılı izinler olarak bilinir.
Bu işlem sırasında Google, kullanıcıdan izin ister ve kullanıcılar uygulamanızla paylaşılacak kaynakları seçer ve Son olarak Google, bir Erişim jetonu ve kullanıcı adı döndürmek için geri çağırma işlevinizi onaylandığına dikkat edin. Uygulamanız bu farklı sonuçları güvenli bir şekilde işler daha verimli hale getirebileceksiniz.
Artımlı yetkilendirme
Web uygulamaları için aşağıdaki iki üst düzey senaryoda, aşağıdakileri kullanarak yetkilendirme:
- Genellikle
XMLHttpRequest
kullanan ve şunlara dinamik erişimli tek sayfalık Ajax uygulaması: kaynaklar. - Birden çok web sayfası, kaynaklar birbirinden ayrılır ve sayfa bazında yönetilir.
Bu iki senaryo, tasarımla ilgili dikkat edilmesi gereken noktaları göstermek ve metodolojilerinden faydalanırlar. Ancak bu uygulamaların amacı, izin modunu kullanmaya başlayabilirsiniz. Gerçek dünya uygulamaları bir varyasyon veya birlikte değerlendirebiliriz.
Ajax
Birden fazla arama yaparak uygulamanıza artımlı yetkilendirme için destek ekleyin
requestAccessToken()
öğesine ve OverridableTokenClientConfig
nesnesinin
Kapsamları ihtiyaç duydukları anda tek tek istemek için scope
parametresinden yararlanabilirsiniz.
yalnızca gerekli olduğunda. Bu örnekte kaynaklar istenir ve
Yalnızca kullanıcı hareketi daraltılmış içerik bölümünü genişlettikten sonra.
Ajax uygulaması |
---|
Sayfa yüklemede jeton istemcisini başlatın:
const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", }); Okunacak dokümanlarSon dokümanları göster client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/documents.readonly' }) ); Yaklaşan etkinliklerTakvim bilgilerini göster client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/calendar.readonly' }) ); Fotoğraf bandıFotoğrafları görüntüle client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/photoslibrary.readonly' }) ); |
requestAccessToken
çağrısına yapılan her çağrı bir kullanıcı izni anı tetikler.
Yalnızca kullanıcının seçtiği bölümün gerektirdiği kaynaklara
Böylece kullanıcı seçimi aracılığıyla kaynak paylaşımı sınırlanabilir.
Birden çok web sayfası
Artımlı yetkilendirme için tasarım yapılırken, istekte bulunmak için birden fazla sayfa kullanılır. yalnızca sayfayı yüklemek için gereken kapsamları kullanarak karmaşıklığı ve Kullanıcı izni almak ve erişim jetonu almak için birden fazla arama yapın.
Çok sayfalı uygulama | ||||||||
---|---|---|---|---|---|---|---|---|
|
Her sayfa gerekli kapsamı ister ve
Yükleme zamanında initTokenClient()
ve requestAccessToken()
. Bu senaryoda
bağımsız web sayfaları, kullanıcı işlevselliğini ve işlevselliğini net bir şekilde ayırmak için kullanılır.
kaynakları nasıl işleteceğinizi
öğreneceğiz. Gerçek dünyada, her bir sayfa için
birden fazla kapsamı vardır.
Ayrıntılı izinler
Ayrıntılı izinler tüm senaryolarda aynı şekilde ele alınır; sonrasında
requestAccessToken()
, geri çağırma işlevinizi ve bir erişim jetonunu çağırır
kullanıcının istekte bulunulan kapsamları onaylayıp onaylamadığını kontrol etmek için
hasGrantedAllScopes()
veya hasGrantedAnyScope()
. Örneğin:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/documents.readonly \
https://www.googleapis.com/auth/photoslibrary.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
'https://www.googleapis.com/auth/photoslibrary.readonly')) {
// Look at pictures
...
}
if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
'https://www.googleapis.com/auth/calendar.readonly',
'https://www.googleapis.com/auth/documents.readonly')) {
// Meeting planning and review documents
...
}
}
},
});
Önceki oturumlardan veya isteklerden alınan daha önce kabul edilen tüm bağışlar da
bu yanıta dahil edilir. Kullanıcı izninin bir kaydı her kullanıcı için tutulur ve
Client-ID ve initTokenClient()
veya
requestAccessToken()
. Varsayılan olarak kullanıcı izni yalnızca ilk
Kullanıcının web sitenizi ziyaret edip yeni bir kapsam istemesi ancak şu tarihte istenebilir:
Token Client yapılandırma nesnelerinde prompt=consent
kullanarak her sayfa yüklemesinde.
Jetonlarla çalışma
Jeton modelinde, erişim jetonu işletim sistemi veya tarayıcı tarafından depolanmaz; bunun yerine
sayfa yüklenme zamanında veya daha sonra bir kodu tetikleyerek
requestAccessToken()
için düğmeye basma gibi bir kullanıcı hareketiyle çağrı.
Google API'leriyle REST ve CORS'yi kullanma
Erişim jetonu, aşağıdakileri kullanarak Google API'lerine kimliği doğrulanmış isteklerde bulunmak için kullanılabilir: REST ve CORS. Bu, kullanıcıların oturum açmasına, izin vermesine, Google'ın erişim jetonunu ve sitenizi, kullanıcının verileriyle çalışacak şekilde ayarlayın.
Bu örnekte, oturum açmış kullanıcıların yaklaşan takvim etkinliklerini görüntülemek için
tokenRequest()
tarafından döndürülen erişim jetonu:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();
Daha fazla bilgi için Google API'lerine erişmek için CORS'yi kullanma bölümüne bakın.
Bir sonraki bölümde, daha karmaşık API'lerle nasıl kolayca entegrasyon sağlanacağı açıklanmaktadır.
Google API'leri JavaScript kitaplığıyla çalışma
Jeton istemcisi JavaScript için Google API İstemci Kitaplığı ile çalışır. Aşağıdaki kod snippet'ini inceleyin.
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
gapi.client.setApiKey('YOUR_API_KEY');
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
},
});
function listUpcomingEvents() {
gapi.client.calendar.events.list(...);
}
Jetonun son kullanma tarihi
Erişim jetonlarının ömrü kısadır. Erişim jetonunun süresi dolarsa
oturumu sona ermeden önce,
Düğmeye basma gibi kullanıcı odaklı bir etkinlikten requestAccessToken()
.
İzni iptal etmek için erişim jetonu kullanma
Kullanıcı iznini kaldırma ve erişim izinlerini kaldırma için google.accounts.oauth2.revoke
uygulamanıza izin verilen tüm kapsamların kaynaklarına erişim izni verir. Geçerli bir erişim
bu izni iptal etmek için jeton gereklidir:
google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
console.log(done);
console.log(done.successful);
console.log(done.error);
console.log(done.error_description);
});