Jeton modelini kullanma

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.

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",
        });
Kullanıcı hareketleriyle izin isteme ve erişim jetonları alma açmak için "+" işaretini 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ö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
Web sayfası Kod
1. Sayfa. Okunacak belgeler 
  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. Fotoğraf rulosu 
  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(). 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().

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);
  });