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:
- Tambahkan izin ke manifes lalu upload aplikasi Anda.
- Salin kunci dalam
manifest.json
yang diinstal ke manifes sumber Anda, sehingga ID aplikasi Anda akan tetap konstan selama pengembangan. - Dapatkan client ID OAuth2 untuk Aplikasi Chrome Anda.
- Update manifes Anda untuk menyertakan cakupan dan ID klien.
- 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:
- Buka direktori data pengguna. Contoh di MacO:
~/Library/Application\ Support/Google/Chrome/Default/Extensions
- Cantumkan aplikasi dan ekstensi terinstal, lalu cocokkan ID aplikasi Anda di halaman pengelolaan aplikasi dan ekstensi dengan ID yang sama di sini.
- Buka direktori aplikasi terinstal (ini akan menjadi versi dalam ID aplikasi). Buka
manifest.json
yang diinstal (pico adalah cara cepat untuk membuka file). - 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:
- Login ke Konsol API Google menggunakan Akun Google yang sama dengan yang digunakan untuk mengupload aplikasi Anda ke Chrome Web Store.
- Buat project baru dengan meluaskan menu drop-down di sudut kiri atas, lalu pilih item menu Buat....
- Setelah dibuat dan diberi nama, buka item menu navigasi "Layanan" dan aktifkan layanan Google apa pun yang diperlukan aplikasi Anda.
- Buka item menu navigasi "Akses API" dan klik tombol biru Create an OAuth 2.0 client ID....
- Masukkan informasi merek yang diminta, pilih jenis Aplikasi terinstal.
- 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:
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:
- Mendaftar ke penyedia.
- Tambahkan izin untuk resource penyedia yang akan diakses oleh aplikasi Anda.
- 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.