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 menetapkan 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 Anda menggunakan servernya sendiri untuk mengautentikasi pengguna, Anda harus menggunakan server yang kedua.

Cara kerjanya

Pengguna Aplikasi Chrome memiliki Akun Google yang terkait dengan profil mereka. Aplikasi bisa 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 mencatat pengalihan ke pola URL tertentu. URL alihan diteruskan ke aplikasi, lalu aplikasi akan mengekstrak token dari URL.

Autentikasi Akun Google

Berikut lima langkah yang perlu Anda selesaikan:

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

Tambahkan izin dan upload aplikasi

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

"permissions": [
  "identity"
]

Salin kunci ke manifes Anda

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 dalam manifest.json yang diinstal ke manifes sumber. Ini bukan tugas yang paling baik, tetapi beginilah caranya:

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

Mendapatkan client ID OAuth2

Anda harus mendaftarkan aplikasi Anda 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, lalu pilih item menu Buat....
  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 "Akses API" dan klik tombol biru Create an OAuth 2.0 client ID....
  5. Masukkan informasi merek yang diminta, pilih jenis Aplikasi terinstal.
  6. Pilih Aplikasi Chrome, lalu masukkan ID aplikasi Anda (ID yang sama ditampilkan di halaman pengelolaan aplikasi dan ekstensi).

Mengupdate manifes dengan cakupan dan ID klien OAuth2

Anda harus mengupdate manifes untuk menyertakan cakupan dan ID klien. 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 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 pada 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 saat diperlukan, seperti yang ditunjukkan pada 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 membuatnya tanpa menampilkan UI apa pun. Hal ini berguna dalam kasus saat aplikasi melakukan alur saat memulai aplikasi, misalnya, atau secara umum dalam kasus yang tidak melibatkan gestur pengguna.

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 pun Anda perlu menggunakan token. Akhir masa berlaku token ditangani secara otomatis oleh cache.

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

Ada beberapa kasus, misalnya saat pengguna mengubah sandi, saat token akses yang masih berlaku akan berhenti berfungsi. Panggilan API yang menggunakan token tersebut akan mulai ditampilkan dengan kode status HTTP 401. Jika mendeteksi hal ini 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. Mendaftar ke penyedia.
  2. Tambahkan izin untuk resource penyedia yang akan diakses oleh aplikasi Anda.
  3. Mendapatkan token autentikasi.

Daftar ke penyedia

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

Misalnya, jika ID aplikasi 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

Tambahkan izin untuk penyedia

Untuk membuat XHR lintas asal ke endpoint API penyedia, Anda harus mengizinkan pola yang sesuai 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, misalkan 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, URL akan dialihkan ke https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>

Chrome akan merekamnya dan memanggil callback aplikasi dengan URL alihan lengkap. Aplikasi harus mengekstrak token dari URL.

Mode interaktif versus mode senyap

Saat memanggil launchWebAuthFlow, Anda dapat meneruskan flag ('interactive': true pada 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, UI yang akan ditampilkan kepada pengguna, jika perlu, adalah untuk mendapatkan token (UI login dan/atau UI persetujuan; atau dalam hal ini UI khusus penyedia).

Jika Anda memanggil API dalam mode senyap, API hanya akan menampilkan token jika penyedia dapat menyediakan token tanpa menampilkan UI apa pun. Hal ini berguna misalnya, saat aplikasi melakukan alur saat memulai aplikasi, atau secara umum dalam kasus saat 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.