Jeton modelini kullanma

google.accounts.oauth2 JavaScript kitaplığı, kullanıcı izni istemenize ve kullanıcı verileriyle çalışmak için bir erişim jetonu almanıza yardımcı olur. OAuth 2.0 dolaylı hibe akışına dayanır ve Google API'lerini doğrudan REST ve CORS ile çağırmanıza veya daha karmaşık API'lerimize basit ve esnek bir erişim için JavaScript için Google API'leri istemci kitaplığımızı (gapi.client olarak da bilinir) kullanmanıza olanak tanıyacak şekilde tasarlanmıştır.

Sitenizdeki korumalı kullanıcılar verilerine erişmeden önce, sitenizdeki kullanıcılar Google'ın web tabanlı hesap seçici, oturum açma ve izin işlemlerini tetikler ve son olarak, Google'ın OAuth sunucuları sorun giderir ve web uygulamanıza bir erişim jetonu döndürür.

Jeton tabanlı yetkilendirme modelinde, arka uç sunucunuzda kullanıcı başına yenileme jetonlarını depolamaya gerek yoktur.

Eski İstemci Tarafı Web Uygulamaları için OAuth 2.0 kılavuzunun kapsadığı teknikler yerine burada belirtilen yaklaşıma uymanız önerilir.

Kurulum

Google API istemci kimliğinizi alma kılavuzunda açıklanan adımları uygulayarak bir istemci kimliği bulun veya oluşturun. Ardından, sitenizdeki Google API'lerini çağıracak sayfalara istemci kitaplığını ekleyin. Son olarak jeton istemcisini başlatın. Bu işlem genellikle istemci kitaplığının onload işleyicisinde gerçekleştirilir.

Jeton istemcisini ilk kullanıma hazırlama

Web uygulamanızın istemci kimliğiyle yeni bir jeton istemcisi başlatmak için initTokenClient() çağırın. İsteğe bağlı olarak, kullanıcının erişmesi gereken bir veya daha fazla kapsamın listesini ekleyebilirsiniz:

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ı tetikleme

Jeton kullanıcı deneyimi akışını tetiklemek ve erişim jetonu almak için requestAccessToken() yöntemini kullanın. Google, kullanıcıdan şunları ister:

  • Kullanıcının hesabını seçin,
  • Henüz yapmadıysanız Google Hesabında oturum açın,
  • Web uygulamanızın istenen her kapsama erişmesine izin verin.

Bir kullanıcı hareketi jeton akışını tetikler: <button onclick="client.requestAccessToken();">Authorize me</button>

Ardından Google, kullanıcının geri çağırma işleyicinize erişim veya hata verdiği kapsamların listesini ve bir erişim jetonunu içeren bir TokenResponse döndürür.

Kullanıcılar hesap seçiciyi veya oturum açma pencerelerini kapatabilir ve bu durumda geri çağırma işleviniz çağırmaz.

Uygulamanızın tasarımı ve kullanıcı deneyimi yalnızca Google'ın OAuth 2.0 Politikaları'nın ayrıntılı bir incelemesinden sonra uygulanmalıdır. Bu politikalar birden fazla kapsamla, kullanıcı rızasının ne zaman ve nasıl işleneceğini ve daha fazlasını içerir.

Artımlı yetkilendirme, önden ve tümü aynı anda değil, yalnızca gerektiğinde kapsamları kullanarak kaynaklara erişim isteğinde bulunmak için kullanılan bir politika ve uygulama tasarım metodolojisidir. Kullanıcılar, uygulamanızın istediği bağımsız kaynakların paylaşımını onaylayabilir veya reddedebilir. Bu, ayrıntılı izinler olarak bilinir.

Bu işlemde Google, istenen her kapsamı ayrı ayrı listeleyerek kullanıcı izni ister. Kullanıcılar uygulamanızla paylaşılacak kaynakları seçer ve son olarak Google, bir Erişim jetonu ve kullanıcı onaylı kapsamları döndürmek için geri çağırma işlevinizi çağırır. Ardından uygulamanız, birçok farklı sonucu ayrıntılı izinlerle güvenli bir şekilde işler.

Artımlı yetkilendirme

Web uygulamaları için aşağıdaki iki üst düzey senaryoda şunlar kullanılarak artımlı yetkilendirme gösterilmektedir:

  • Kaynaklara dinamik erişim sağlayan ve genellikle XMLHttpRequest kullanan tek sayfalık Ajax uygulaması.
  • Birden fazla web sayfası, kaynak ayrı tutulur ve her sayfa için ayrı olarak yönetilir.

Bu iki senaryo, tasarımla ilgili dikkat edilmesi gereken noktaları ve metodolojileri göstermek amacıyla sunulur ancak uygulamanızda nasıl kullanıcı rızası alacağınıza dair kapsamlı öneriler olarak tasarlanmamıştır. Gerçek dünyadaki uygulamalarda bu tekniklerin bir varyasyonu veya kombinasyonu kullanılabilir.

Ajax

Gerektiğinde ve yalnızca gerektiğinde ayrı kapsamlar istemek için requestAccessToken() nesnesine birden çok çağrı yaparak ve OverridableTokenClientConfig nesne scope parametresini kullanarak uygulamanıza artımlı yetkilendirme desteği ekleyin. Bu örnekte, kaynaklar yalnızca bir kullanıcı hareketinin daraltılmış içerik bölümünü genişletmesinden sonra istenecek ve görünür olacaktır.

Ajax uygulaması
Sayfa yüklendiğinde jeton istemcisini ilk kullanıma hazırla:
        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
      
İzin iste ve kullanıcı hareketleri aracılığıyla erişim jetonları al, açmak için "+" simgesini tıklayın:

Okunacak dokümanlar

Son dokümanları göster

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/documents.readonly'
             })
           );
        

Yaklaşan etkinlikler

Takvim bilgilerini göster

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/calendar.readonly'
             })
           );
        

Fotoğrafları göster

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/photoslibrary.readonly'
             })
           );
        

Her requestAccessToken çağrısı, bir kullanıcı izin anını tetikler. Uygulamanız, yalnızca kullanıcının genişletmeyi seçtiği bölüm için gerekli kaynaklara erişir. Bu nedenle, kullanıcının seçimi yoluyla kaynak paylaşımı sınırlandırılır.

Birden fazla web sayfası

Artımlı yetkilendirme için tasarım yaparken yalnızca bir sayfayı yüklemek için gereken kapsamları istemek üzere birden fazla sayfa kullanılır, karmaşıklığı azaltır ve kullanıcı izni almak ve erişim jetonu almak için birden fazla çağrı yapma ihtiyacını ortadan kaldırır.

Çok sayfalı uygulama
Web sayfası Kod
1. sayfa. Okunacak dokümanlar
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
          
2. Sayfa. Yaklaşan etkinlikler
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
          
3. Sayfa. Dönen fotoğraf
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/photoslibrary.readonly',
  });
  client.requestAccessToken();
          

Her sayfa gerekli kapsamı ister ve yükleme sırasında initTokenClient() ve requestAccessToken() değerlerini çağırarak bir erişim jetonu alır. Bu senaryoda, kullanıcı işlevlerini ve kaynaklarını kapsama göre açıkça ayırmak için bağımsız web sayfaları kullanılır. Gerçek hayatta, bağımsız sayfalar birden fazla kapsam isteyebilir.

Ayrıntılı izinler

Ayrıntılı izinler tüm senaryolarda aynı şekilde işlenir. requestAccessToken(), geri çağırma işlevinizi ve erişim jetonunu döndürdükten sonra, kullanıcının istenen kapsamları hasGrantedAllScopes() veya hasGrantedAnyScope() kullanarak onaylayıp onaylamadığını kontrol edin. Ö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 oturum veya isteklerden gelen ve önceden kabul edilmiş tüm izinler de yanıta dahil edilir. Kullanıcı ve istemci kimliği başına kullanıcı izni kaydı tutulur ve initTokenClient() ya da requestAccessToken() ile yapılan birden fazla çağrıya karşılık gelir. Varsayılan olarak, kullanıcı izni yalnızca bir kullanıcının web sitenizi ilk kez ziyaret edip yeni bir kapsam istemesi gerektiğinde gereklidir, ancak Jeton İstemcisi yapılandırma nesnelerinde prompt=consent kullanılarak her sayfa yüklemesinde istekte bulunulabilir.

Jetonlarla çalışma

Jeton modelinde, erişim jetonu OS veya tarayıcı tarafından depolanmaz. Bunun yerine, önce sayfa yükleme zamanında veya daha sonra, bir düğme hareketi gibi bir kullanıcı hareketiyle requestAccessToken() çağrısının tetiklendiği yeni bir jeton alınır.

Google API'leri ile REST ve CORS'u kullanma

Erişim jetonu, REST ve CORS kullanarak Google API'lerine kimliği doğrulanmış istekler göndermek için kullanılabilir. Bu, kullanıcıların oturum açmasına, izin vermesine, Google'ın erişim jetonu vermesine ve sitenizin kullanıcı verileriyle çalışmasına olanak sağlar.

Bu örnekte, tokenRequest() tarafından döndürülen erişim jetonunu kullanarak oturum açmış, yaklaşan takvim etkinliklerini görüntüleyin:

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'u kullanma konusuna bakın.

Sonraki bölümde, daha karmaşık API'lerle nasıl kolay entegrasyon yapılacağı ele alınmaktadı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(...);
}

Jeton geçerlilik bitiş tarihi

Tasarımı gereği, erişim jetonlarının kullanım ömrü kısadır. Erişim jetonunun süresi kullanıcı oturumunun bitiminden önce dolarsa düğme düğmesine basma gibi kullanıcı odaklı bir etkinlikten requestAccessToken() çağırarak yeni bir jeton alın.

Uygulamanıza verilen tüm kapsamlar için kullanıcı iznini ve kaynaklara erişimi kaldırmak üzere google.accounts.oauth2.revoke yöntemini çağırın. Bu iznin iptal edilmesi için geçerli bir erişim jetonu gerekir:

google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
    console.log(done);
    console.log(done.successful);
    console.log(done.error);
    console.log(done.error_description);
  });