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ı izin akışını temel alır ve Google API'lerini doğrudan REST ve CORS kullanarak ç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 ve son olarak da Google'ın OAuth sunucuları sorunu 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 açıklanan 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() öğesini çağırın. İsteğe bağlı olarak kullanıcının erişmesi gereken bir veya daha fazla kapsamın listesini de 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,
• Henüz yapmadıysanız Google Hesabı'nda oturum açabilirsiniz.
• Web uygulamanızın istenen her kapsama erişmesine izin vermelidir.

Bir kullanıcı hareketi jeton akışını 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çici veya oturum açma pencerelerini kapatabilir. Bu durumda, geri arama işleviniz çağrılmaz.

Kullanıcı rızasının nasıl ele alınacağı

Uygulamanızın tasarımı ve kullanıcı deneyimi yalnızca Google'ın OAuth 2.0 Politikaları'nın titizlikle incelenmesinden sonra uygulanmalıdır. Bu politikalar; birden çok kapsamla çalışma, kullanıcı izninin ne zaman ve nasıl işleneceği gibi konuları kapsar.

Artımlı yetkilendirme, kapsamları önceden ve bir kerede değil yalnızca gerektiğinde kullanarak 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 bağımsız kaynakların paylaşımını onaylayabilir veya reddedebilir. Bu, ayrıntılı izinler olarak bilinir.

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 bir 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.

Ek yetkilendirme

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

• Genellikle kaynaklara dinamik erişimle XMLHttpRequest kullanan tek sayfalık Ajax uygulaması.
• Birden fazla web sayfası ve kaynak, 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ız için izin verme konusunda kapsamlı öneriler sunmamaktadır. Gerçek uygulamalar, bu tekniklerin bir varyasyonunu veya kombinasyonunu kullanabilir.

Ajax

Gerektiğinde ve yalnızca gerektiğinde bağımsız kapsamlar istemek için requestAccessToken() öğesine birden fazla ç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.

        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
      

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

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

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

Her requestAccessToken çağrısı bir kullanıcı izni anını tetikler. Uygulamanız yalnızca kullanıcının genişletmeyi seçtiği bölümün gerektirdiği kaynaklara erişebilir. Bu nedenle, kullanıcı seçimine göre kaynak paylaşımı sınırlanır.

Birden çok web sayfası

Artımlı yetkilendirme tasarlarken yalnızca bir sayfanın yüklenmesi için gereken kapsamları istemek amacıyla birden fazla sayfa 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.

  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
          

  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
          

  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 zamanında 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 ayrı web sayfaları kullanılmaktadır. Gerçek dünyada, tek tek sayfalar birden çok alakalı 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 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 elde edilen 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() çağrılarında gösterilmeye devam eder. Varsayılan olarak kullanıcı izni, yalnızca bir kullanıcı web sitenizi ilk kez ziyaret ettiğinde ve yeni bir kapsam istediğinde gerekir ancak Token Client yapılandırma nesnelerinde prompt=consent kullanılarak her sayfa yüklemesinde kullanıcı izni istenebilir.

Jetonlarla çalışma

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

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 yayınlamasına ve sitenizin kullanıcı verileriyle çalışmak için sitenize erişmesine 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 başlıklı makaleyi inceleyin.

Sonraki bölümde, daha karmaşık API'lerle nasıl kolayca entegrasyon gerçekleştirileceği 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

Yapısı gereği erişim jetonlarının kullanım ömrü kısadır. Erişim jetonunun süresi kullanıcının oturumu sona ermeden önce dolarsa düğmeye basma gibi kullanıcı odaklı bir etkinlikten requestAccessToken() çağrısı yaparak yeni bir jeton alın.

İzni iptal etmek için erişim jetonu kullanma

Uygulamanıza verilen tüm kapsamlar için kullanıcı iznini ve kaynaklara erişimi kaldırmak için 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);
  });