Autentikasi Pengguna

Protokol autentikasi web menggunakan fitur HTTP, tetapi Aplikasi Chrome berjalan di dalam penampung aplikasi. Protokol tersebut tidak dimuat melalui HTTP dan tidak dapat melakukan pengalihan atau menyetel cookie.

Gunakan Chrome Identity API untuk mengautentikasi pengguna: getAuthToken untuk pengguna yang login ke Akun Google mereka dan launchWebAuthFlow untuk pengguna yang login ke akun non-Google. Jika aplikasi menggunakan servernya sendiri untuk mengautentikasi pengguna, Anda harus menggunakan yang terakhir.

Cara kerjanya

Pengguna Aplikasi Chrome memiliki Akun Google yang terkait dengan profil mereka. Aplikasi dapat mendapatkan token OAuth2 untuk pengguna ini menggunakan getAuthToken API.

Aplikasi yang ingin melakukan autentikasi dengan penyedia identitas non-Google harus memanggil launchWebAuthFlow. Metode ini menggunakan pop-up browser untuk menampilkan halaman penyedia dan menangkap pengalihan ke pola URL tertentu. URL alihan diteruskan ke aplikasi dan aplikasi akan mengekstrak token dari URL.

Autentikasi akun Google

Berikut lima langkah yang perlu Anda selesaikan:

  1. Tambahkan izin ke manifes dan upload aplikasi Anda.
  2. Salin kunci dalam manifest.json yang diinstal ke manifes sumber Anda, sehingga ID aplikasi akan tetap konstan selama pengembangan.
  3. Dapatkan client ID OAuth2 untuk Aplikasi Chrome Anda.
  4. Update manifes Anda untuk menyertakan client ID dan cakupan.
  5. Dapatkan token autentikasi.

Menambahkan izin dan mengupload aplikasi

Anda harus memastikan izin identitas ada dalam manifes Anda. Anda kemudian dapat mengupload aplikasi ke halaman pengelolaan aplikasi dan ekstensi (lihat Memublikasikan).

"permissions": [
  "identity"
]

Menyalin kunci ke manifes

Saat mendaftarkan aplikasi di konsol Google OAuth, Anda akan memberikan ID aplikasi, yang akan diperiksa selama permintaan token. Oleh karena itu, penting untuk memiliki ID aplikasi yang konsisten selama pengembangan.

Agar ID aplikasi tetap konstan, Anda perlu menyalin kunci di manifest.json yang diinstal ke manifes sumber. Ini bukan tugas yang paling mudah, tetapi berikut cara melakukannya:

  1. Buka direktori data pengguna. Contoh di MacOs: ~/Library/Application\ Support/Google/Chrome/Default/Extensions
  2. Cantumkan aplikasi dan ekstensi yang diinstal, lalu cocokkan ID aplikasi Anda di halaman pengelolaan aplikasi dan ekstensi dengan ID yang sama di sini.
  3. Buka direktori aplikasi yang diinstal (ini akan menjadi versi dalam ID aplikasi). Buka manifest.json yang terinstal (pico adalah cara cepat untuk membuka file).
  4. Salin "kunci" di manifest.json yang diinstal dan tempelkan ke file manifes sumber aplikasi Anda.

Mendapatkan client ID OAuth2

Anda harus mendaftarkan aplikasi di Konsol API Google untuk mendapatkan client ID:

  1. Login ke Konsol API Google menggunakan Akun Google yang sama dengan yang digunakan untuk mengupload aplikasi Anda ke Chrome Web Store.
  2. Buat project baru dengan meluaskan menu drop-down di sudut kiri atas dan memilih item menu Create....
  3. Setelah dibuat dan diberi nama, buka item menu navigasi "Layanan" dan aktifkan layanan Google apa pun yang diperlukan aplikasi Anda.
  4. Buka item menu navigasi "API Access", lalu klik tombol biru Create an OAuth 2.0 client ID....
  5. Masukkan informasi branding yang diminta, pilih jenis Aplikasi terinstal.
  6. Pilih Aplikasi Chrome dan masukkan ID aplikasi Anda (ID yang sama dengan yang ditampilkan di halaman pengelolaan aplikasi dan ekstensi).

Perbarui manifes Anda dengan client ID dan cakupan OAuth2

Anda perlu memperbarui manifes untuk menyertakan client ID dan cakupan. Berikut adalah contoh "oauth2" untuk contoh gdrive:

"oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  }

Mendapatkan token akses

Sekarang Anda siap untuk mendapatkan token autentikasi dengan memanggil identity.getAuthToken.

chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
  // Use the token.
});

Interaksi pengguna

Saat memanggil getAuthToken, Anda dapat meneruskan flag ('interactive': true dalam contoh di atas) yang menunjukkan apakah Anda ingin API dipanggil dalam mode interaktif atau mode senyap. Jika Anda memanggil API dalam mode interaktif, pengguna akan melihat UI login dan/atau persetujuan jika diperlukan, seperti yang ditunjukkan dalam screenshot di bawah:

screenshot yang menampilkan UI saat aplikasi menggunakan Identity API untuk mengautentikasi Akun Google

Jika Anda memanggil API dalam mode senyap, API hanya akan menampilkan token jika memungkinkan untuk menghasilkannya tanpa menampilkan UI apa pun. Hal ini berguna jika aplikasi melakukan alur saat aplikasi dimulai, misalnya, atau secara umum jika tidak ada gestur pengguna yang terlibat.

Praktik terbaik yang kami sarankan adalah menggunakan mode senyap saat tidak ada gestur pengguna yang terlibat dan menggunakan mode interaktif jika ada gestur pengguna (misalnya, pengguna mengklik tombol Login di aplikasi Anda). Perhatikan bahwa kami tidak menerapkan persyaratan gestur apa pun.

Menyimpan ke cache

Chrome memiliki cache token akses dalam memori, sehingga Anda dapat memanggil getAuthToken kapan saja Anda perlu menggunakan token. Masa berlaku token ditangani secara otomatis oleh cache.

Anda dapat melihat status cache token saat ini di chrome://identity-internals.

Ada beberapa kasus, seperti ketika pengguna mengubah sandinya, saat token akses yang masih berlaku akan berhenti berfungsi. Panggilan API yang menggunakan token akan mulai ditampilkan dengan kode status HTTP 401. Jika mendeteksi bahwa hal ini telah terjadi, Anda dapat menghapus token yang tidak valid dari cache Chrome dengan memanggil identity.removeCachedAuthToken.

Contoh penggunaan removeCachedAuthToken:

// callback = function (error, httpStatus, responseText);
function authenticatedXhr(method, url, callback) {
  var retry = true;
  function getTokenAndXhr() {
    chrome.identity.getAuthToken({/* details */},
                                 function (access_token) {
      if (chrome.runtime.lastError) {
        callback(chrome.runtime.lastError);
        return;
      }

      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.setRequestHeader('Authorization',
                           'Bearer ' + access_token);

      xhr.onload = function () {
        if (this.status === 401 && retry) {
          // This status may indicate that the cached
          // access token was invalid. Retry once with
          // a fresh token.
          retry = false;
          chrome.identity.removeCachedAuthToken(
              { 'token': access_token },
              getTokenAndXhr);
          return;
        }

        callback(null, this.status, this.responseText);
      }
    });
  }
}

Autentikasi akun non-Google

Berikut tiga langkah yang perlu Anda selesaikan:

  1. Daftar ke penyedia.
  2. Tambahkan izin untuk resource penyedia yang akan diakses aplikasi Anda.
  3. Dapatkan token autentikasi.

Mendaftar ke penyedia

Anda harus mendaftarkan client ID OAuth2 ke penyedia dan mengonfigurasi client ID sebagai situs. Agar URI alihan dimasukkan selama pendaftaran, gunakan URL dalam bentuk: https://<extension-id>.chromiumapp.org/<anything-here>

Misalnya, jika ID aplikasi Anda adalah abcdefghijklmnopqrstuvwxyzabcdef dan Anda ingin provider_cb menjadi jalur, untuk membedakannya dengan URI pengalihan dari penyedia lain, Anda harus menggunakan: https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb

Menambahkan izin untuk penyedia

Untuk membuat XHR lintas asal ke endpoint API penyedia, Anda harus menambahkan pola yang sesuai ke daftar yang diizinkan dalam izin:

"permissions": [
  ...
  "https://www.website-of-provider-with-user-photos.com/photos/*"
]

Mendapatkan token

Untuk mendapatkan token:

chrome.identity.launchWebAuthFlow(
  {'url': '<url-to-do-auth>', 'interactive': true},
  function(redirect_url) { /* Extract token from redirect_url */ });

<url-to-do-auth> adalah URL apa pun untuk melakukan autentikasi ke penyedia dari situs. Misalnya, misalnya Anda melakukan alur OAuth2 dengan penyedia dan telah mendaftarkan aplikasi dengan client ID 123456789012345 dan Anda ingin mengakses foto pengguna di situs penyedia: https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345& redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos

Penyedia akan melakukan autentikasi dan jika sesuai, akan menampilkan UI login dan/atau persetujuan kepada pengguna. Kemudian, link tersebut akan dialihkan ke https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>

Chrome akan menangkapnya dan memanggil callback aplikasi dengan URL pengalihan lengkap. Aplikasi harus mengekstrak token dari URL.

Mode interaktif versus mode senyap

Saat memanggil launchWebAuthFlow, Anda dapat meneruskan flag ('interactive': true dalam contoh di atas) yang menunjukkan apakah Anda ingin API dipanggil dalam mode interaktif atau tidak (alias mode senyap). Jika Anda memanggil API dalam mode interaktif, pengguna akan melihat UI, jika perlu, untuk mendapatkan token (UI login dan/atau UI persetujuan; atau untuk masalah tersebut, UI khusus penyedia).

Jika Anda memanggil API dalam mode senyap, API hanya akan menampilkan token jika penyedia dapat memberikan token tanpa menampilkan UI apa pun. Hal ini berguna jika aplikasi melakukan alur saat aplikasi diluncurkan, misalnya, atau secara umum jika tidak ada gestur pengguna yang terlibat.

Praktik terbaik yang kami sarankan adalah menggunakan mode senyap jika tidak ada gestur pengguna yang terlibat dan menggunakan mode interaktif jika ada gestur pengguna (misalnya, pengguna mengklik tombol Login di aplikasi Anda). Perhatikan bahwa kami tidak menerapkan persyaratan gestur.