Jeton modelini kullanma

google.accounts.oauth2 JavaScript kitaplığı, kullanıcılardan izin istemenize ve kullanıcı verileriyle çalışmak için bir erişim jetonu almanıza yardımcı olur. OAuth 2.0 dolaylı izin akışını temel alır ve REST ve CORS kullanarak Google API'lerini doğrudan çağırmanıza veya daha karmaşık API'lerimize basit ve esnek 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 kullanıcılar, korunan kullanıcı verilerine bir tarayıcıdan erişmeden önce Google'ın web tabanlı hesap seçicisini, oturum açma ve izin süreçlerini, son olarak da Google'ın OAuth sunucularını tetikler ve web uygulamanıza bir erişim jetonu döndürür.

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

Eski İstemci Tarafı Web Uygulamaları için OAuth 2.0 kılavuzunda ele alınan teknikler yerine burada özetlenen yaklaşımı uygulamanız önerilir.

Kurulum

Google API istemci kimliğinizi alma kılavuzunda açıklanan adımları izleyerek bir istemci kimliği bulun veya oluşturun. Ardından, sitenizde 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şleyicisi içinde yapılır.

Jeton istemcisini başlatma

Web uygulamanızın istemci kimliğiyle yeni bir jeton istemcisini başlatmak için initTokenClient() çağrısı yapın. İsteğe bağlı olarak, kullanıcının erişmesi gereken bir veya daha fazla kapsamın bir 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ı tetikleyin

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

  • Çocuğunuzun hesabını seçin,
  • Google Hesabında oturum açın.
  • Web uygulamanızın istenen her kapsama erişmesi için izin verin.

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

Google, daha sonra geri çağırma işleyicinize erişim jetonu ve kullanıcının erişim izni verdiği kapsamların listesini veya bir hatayı içeren bir TokenResponse döndürür.

Kullanıcılar hesap seçiciyi veya oturum açma pencerelerini kapatabilir. Bu durumda geri arama işleviniz çağrılmaz.

Uygulamanızın tasarım ve kullanıcı deneyimi yalnızca Google'ın OAuth 2.0 Politikaları ayrıntılı bir şekilde incelendikten sonra uygulanmalıdır. Bu politikalar birden fazla kapsamla çalışma, kullanıcı rızasının ne zaman ve nasıl ele alınacağı gibi konuları kapsar.

Artımlı yetkilendirme, önceden ve aynı anda değil, kapsamları yalnızca gerektiğinde kaynaklara erişim isteğinde bulunmak için kullanılan bir politika ve uygulama tasarımı metodolojisidir. Kullanıcılar, uygulamanız tarafından istenen kaynakların paylaşımını onaylayabilir veya reddedebilir. Buna ayrıntılı izinler denir.

Bu işlem sırasında 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, Erişim jetonu ve kullanıcı onaylı kapsamları döndürmek için geri çağırma işlevinizi çağırır. Uygulamanız daha sonra ayrıntılı izinlerle mümkün olan çeşitli farklı sonuçları güvenli bir şekilde ele alır.

Artımlı yetkilendirme

Web uygulamaları için aşağıdaki iki üst düzey senaryo, aşağıdakileri kullanarak artımlı yetkilendirmeyi gösterir:

  • Genellikle kaynaklara dinamik erişimle XMLHttpRequest kullanan tek sayfalık bir Ajax uygulamasıdır.
  • Birden fazla web sayfası ve kaynaklar her sayfa için ayrı tutulur ve yönetilir.

Bu iki senaryo, tasarımla ilgili dikkat edilmesi gereken noktaları ve metodolojileri göstermek için sunulmuştur ancak uygulamanıza izin verme konusunda kapsamlı öneriler sunmamaktadır. Gerçek dünyadaki uygulamalar, bu tekniklerin bir varyasyonunu veya kombinasyonunu kullanabilir.

Ajax

İhtiyaç duyulduğu anda ve yalnızca gerektiğinde kapsamları tek tek istemek için requestAccessToken() öğesine birden çok çağrı yapıp OverridableTokenClientConfig nesnesinin scope parametresini kullanarak uygulamanıza artımlı yetkilendirme desteği ekleyin. Bu örnekte kaynaklar yalnızca bir kullanıcı hareketi daraltılmış içerik bölümünü genişlettikten sonra istenir ve görünür olur.

Ajax uygulaması
Sayfa yüklemede jeton istemcisini başlatın: 
        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
Kullanıcı hareketleriyle izin isteyin ve erişim jetonları alın. Açmak için "+" düğmesini 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ı izni anını tetikler ve uygulamanız yalnızca kullanıcının genişletmeyi seçtiği bölümün gerektirdiği kaynaklara erişebilecektir. Bu nedenle, kullanıcı seçimi nedeniyle kaynak paylaşımı sınırlanır.

Birden çok web sayfası

Artımlı yetkilendirme tasarımı yapılırken birden fazla sayfa yalnızca bir sayfanın yüklenmesi için gereken kapsamları istemek için kullanılır. Böylece karmaşıklığı ve kullanıcı izni almak ve erişim jetonu almak için birden fazla çağrı yapma ihtiyacı azalı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, yükleme zamanında gerekli kapsamı ister ve initTokenClient() ve requestAccessToken() çağırarak bir erişim jetonu alır. Bu senaryoda, kullanıcı işlevlerini ve kaynaklarını kapsama göre net bir şekilde ayırmak için her bir web sayfası kullanılır. Gerçek dünyada, tek tek sayfalar birden çok ilgili kapsam isteyebilir.

Ayrıntılı izinler

Ayrıntılı izinler tüm senaryolarda aynı şekilde işlenir. requestAccessToken(), geri çağırma işlevinizi çağırdıktan ve bir erişim jetonu döndürdükten sonra, kullanıcının hasGrantedAllScopes() veya hasGrantedAnyScope() kullanarak istenen kapsamları 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 oturumlardan veya isteklerden sağlanan, daha önce kabul edilen izinler de yanıta dahil edilir. Kullanıcı rızasının kaydı, her kullanıcı ve istemci kimliği için tutulur ve initTokenClient() veya requestAccessToken() numaralı telefona yapılan birden fazla çağrıda saklanır. Varsayılan olarak, kullanıcı izni yalnızca bir kullanıcı web sitenizi ilk kez ziyaret ettiğinde ve yeni bir kapsam istediğinde gereklidir. Ancak Token Client yapılandırma nesnelerinde prompt=consent kullanılarak her sayfa yüklemesinde kullanıcı izni istenebilir.

Jetonlarla çalışma

Jeton modelinde, erişim jetonu işletim sistemi veya tarayıcı tarafından depolanmaz. Bunun yerine, ilk olarak sayfa yükleme zamanında veya daha sonra düğmeye basma gibi bir kullanıcı hareketiyle requestAccessToken() çağrısı yapılarak yeni bir jeton elde edilir.

Google API'leriyle REST ve CORS'yi kullanma

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

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

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

Sonraki bölümde, daha karmaşık API'lerle nasıl kolayca 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'ine bakın.

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

Tasarım gereği erişim jetonlarının ömrü kısadır. Erişim jetonunun süresi kullanıcının oturumu sona ermeden dolarsa düğme basma gibi kullanıcı kaynaklı bir etkinlikten requestAccessToken() çağrısı yaparak 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 izni iptal etmek 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);
  });