Menggunakan model token

Library JavaScript google.accounts.oauth2 membantu Anda meminta izin pengguna izin dan memperoleh token akses untuk bekerja dengan data pengguna. Hal ini didasarkan pada Alur pemberian implisit OAuth 2.0 dan dirancang untuk memungkinkan Anda memanggil Google API secara langsung menggunakan REST dan CORS, atau library klien Google API untuk JavaScript (juga dikenal sebagai gapi.client) untuk akses yang sederhana dan fleksibel ke API yang lebih kompleks.

Sebelum mengakses data pengguna yang dilindungi dari browser, pengguna di situs Anda terpicu Proses pemilih akun, login, dan izin berbasis web dari Google, dan terakhir Masalah server OAuth Google dan menampilkan token akses ke aplikasi web Anda.

Dalam model otorisasi berbasis token, tidak perlu menyimpan per pengguna token refresh di server backend.

Sebaiknya Anda mengikuti pendekatan yang diuraikan di sini, bukan teknik yang tercakup dalam OAuth 2.0 versi lama untuk Aplikasi Web Sisi Klien kami.

Penyiapan

Temukan atau buat client ID dengan mengikuti langkah-langkah yang dijelaskan dalam artikel Mendapatkan Panduan client ID Google API. Selanjutnya, tambahkan library klien ke halaman di situs Anda yang akan memanggil Google API. Terakhir, inisialisasi token dengan klien besar. Biasanya, hal ini dilakukan dalam pengendali onload library klien.

Melakukan inisialisasi klien token

Panggil initTokenClient() untuk menginisialisasi klien token baru dengan token client ID, secara opsional Anda dapat menyertakan daftar satu atau beberapa cakupan pengguna perlu mengakses:

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

Memicu alur token OAuth 2.0

Gunakan metode requestAccessToken() untuk memicu alur UX token dan mendapatkan token masing-masing. Google meminta pengguna untuk:

  • Pilih akun mereka,
  • login ke Akun Google jika belum login,
  • memberikan izin untuk aplikasi web Anda agar dapat mengakses setiap cakupan yang diminta.

Gestur pengguna memicu alur token: <button onclick="client.requestAccessToken();">Authorize me</button>

Google kemudian menampilkan TokenResponse yang berisi token akses dan daftar cakupan akses yang diberikan pengguna, atau error, ke handler callback Anda.

Pengguna dapat menutup pemilih akun atau jendela masuk, dalam hal ini fungsi callback tidak akan dipanggil.

Desain dan pengalaman pengguna untuk aplikasi Anda hanya boleh diimplementasikan setelah peninjauan menyeluruh Kebijakan OAuth 2.0 Google. Kebijakan ini mencakup bekerja dengan beberapa cakupan, kapan dan bagaimana cara menangani izin pengguna, dan banyak lagi.

Otorisasi inkremental adalah kebijakan dan metodologi desain aplikasi yang digunakan untuk meminta akses ke sumber daya, menggunakan cakupan, hanya sesuai kebutuhan, bukan di muka sekaligus. Pengguna dapat menyetujui atau menolak berbagi fasilitas individual diminta oleh aplikasi, hal ini dikenal sebagai izin terperinci.

Selama proses ini, Google akan meminta izin pengguna, mencantumkan setiap izin pengguna satu per satu cakupan yang diminta, pengguna memilih resource yang akan dibagikan ke aplikasi, dan Terakhir, Google memanggil fungsi callback Anda untuk menampilkan token Akses dan yang disetujui. Selanjutnya, aplikasi Anda akan menangani berbagai hasil dengan aman mungkin dengan izin terperinci.

Otorisasi inkremental

Untuk aplikasi web, dua skenario tingkat tinggi berikut menunjukkan peningkatan otorisasi menggunakan:

  • Aplikasi Ajax satu halaman, yang sering menggunakan XMLHttpRequest dengan akses dinamis ke Google Cloud Platform.
  • Di beberapa halaman web, resource dipisahkan dan dikelola per halaman.

Kedua skenario ini disajikan untuk menggambarkan pertimbangan desain dan metodologi, tetapi tidak dimaksudkan sebagai rekomendasi yang komprehensif tentang bagaimana untuk membangun persetujuan ke dalam aplikasi Anda. Aplikasi dunia nyata mungkin menggunakan variasi atau kombinasi teknik ini.

Ajax

Tambahkan dukungan untuk otorisasi tambahan ke aplikasi Anda dengan melakukan beberapa panggilan ke requestAccessToken() dan menggunakan OverridableTokenClientConfig objek scope untuk meminta cakupan individual pada saat cakupan tersebut diperlukan dan hanya jika diperlukan. Dalam contoh ini, resource akan diminta dan terlihat hanya setelah gestur pengguna memperluas bagian konten yang diciutkan.

Aplikasi Ajax
Lakukan inisialisasi klien token saat pemuatan halaman: 
        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
Meminta izin dan memperoleh token akses melalui gestur pengguna, klik `+` untuk membuka:

Dokumen untuk dibaca

Tampilkan dokumen terbaru

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

Acara mendatang

Tampilkan info kalender

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

Menampilkan foto

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

Setiap panggilan ke requestAccessToken memicu momen izin pengguna, aplikasi Anda akan memiliki akses hanya ke sumber daya yang diperlukan oleh bagian yang dipilih pengguna meluas, sehingga membatasi berbagi sumber daya melalui pilihan pengguna.

Beberapa halaman web

Saat mendesain untuk otorisasi tambahan, beberapa halaman digunakan untuk meminta hanya cakupan yang diperlukan untuk memuat halaman, mengurangi kompleksitas dan kebutuhan untuk melakukan beberapa panggilan untuk memperoleh izin pengguna dan mengambil token akses.

Aplikasi multi-halaman
Halaman web Kode
Halaman 1. Dokumen untuk dibaca 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
Halaman 2. Acara mendatang 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
Halaman 3. Carousel foto 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/photoslibrary.readonly',
  });
  client.requestAccessToken();

Setiap halaman meminta cakupan yang diperlukan dan memperoleh token akses dengan memanggil initTokenClient(), dan requestAccessToken() pada waktu pemuatan. Dalam skenario ini, halaman web individu digunakan untuk dengan jelas memisahkan fungsi pengguna dan sumber daya berdasarkan ruang lingkupnya. Dalam situasi nyata, setiap halaman mungkin meminta beberapa cakupan yang terkait.

Izin terperinci

Izin terperinci ditangani dengan cara yang sama di semua skenario; setelah requestAccessToken() memanggil fungsi callback dan token akses periksa apakah pengguna telah menyetujui cakupan yang diminta menggunakan hasGrantedAllScopes() atau hasGrantedAnyScope(). Contoh:

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

Pemberian yang sebelumnya diterima dari sesi atau permintaan sebelumnya juga akan disertakan dalam respons. Catatan izin pengguna dikelola per pengguna dan Client-ID, dan tetap ada di beberapa panggilan ke initTokenClient() atau requestAccessToken(). Secara default, izin pengguna hanya diperlukan waktu pengguna mengunjungi situs Anda dan meminta cakupan baru, tetapi mungkin diminta di setiap pemuatan halaman menggunakan prompt=consent dalam objek konfigurasi Klien Token.

Bekerja dengan token

Dalam model Token, token akses tidak disimpan oleh OS atau browser, tetapi token baru pertama kali diperoleh pada waktu muat halaman, atau setelah itu dengan memicu panggilan ke requestAccessToken() melalui gestur pengguna seperti menekan tombol.

Menggunakan REST dan CORS dengan Google API

Token akses dapat digunakan untuk membuat permintaan yang diautentikasi ke Google API menggunakan REST dan CORS. Hal ini memungkinkan pengguna untuk login, memberikan izin, dan Google mengeluarkan token akses dan situs Anda agar dapat mengolah data pengguna.

Dalam contoh ini, lihat acara kalender mendatang pengguna yang login menggunakan token akses yang ditampilkan oleh tokenRequest():

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

Lihat Cara menggunakan CORS untuk mengakses Google API untuk informasi lebih lanjut.

Bagian berikutnya membahas cara mudah mengintegrasikan dengan API yang lebih kompleks.

Menggunakan library JavaScript Google API

Klien token berfungsi dengan Library Klien Google API untuk JavaScript Lihat cuplikan kode di bawah.

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

Akhir masa berlaku token

Berdasarkan desainnya, token akses memiliki masa pakai yang singkat. Jika token akses sudah tidak berlaku sebelum akhir sesi pengguna, dapatkan token baru dengan memanggil requestAccessToken() dari peristiwa yang dijalankan pengguna seperti penekanan tombol.

Panggil metode google.accounts.oauth2.revoke untuk menghapus izin pengguna dan akses ke sumber daya untuk semua cakupan yang diberikan pada aplikasi Anda. Akses yang valid token diperlukan untuk mencabut izin ini:

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