OAuth2 adalah protokol standar industri untuk otorisasi. API ini menyediakan mekanisme bagi pengguna untuk memberikan akses ke informasi pribadi kepada aplikasi web dan desktop tanpa membagikan nama pengguna, sandi, dan kredensial pribadi lainnya.
Tutorial ini membuat ekstensi yang mengakses kontak Google pengguna menggunakan Google People API dan Chrome Identity API. Karena ekstensi tidak dimuat melalui HTTPS, tidak dapat melakukan pengalihan atau menetapkan cookie, ekstensi mengandalkan Chrome Identity API untuk menggunakan OAuth2.
Mulai
Mulailah dengan membuat direktori dan file awal berikut.
manifest.json
Tambahkan manifes dengan membuat file bernama manifest.json dan sertakan kode berikut.
{
"name": "OAuth Tutorial FriendBlock",
"version": "1.0",
"description": "Uses OAuth to connect to Google's People API and display contacts photos.",
"manifest_version": 3,
"action": {
"default_title": "FriendBlock, friends face's in a block."
},
"background": {
"service_worker": "service-worker.js"
}
}
service-worker.js
Tambahkan pekerja layanan ekstensi dengan membuat file bernama service-worker.js dan sertakan kode berikut.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Tambahkan file HTML bernama index.html dan sertakan kode berikut.
<html>
<head>
<title>FriendBlock</title>
<style>
button {
padding: 10px;
background-color: #3C79F8;
display: inline-block;
}
</style>
</head>
<body>
<button>FriendBlock Contacts</button>
<div id="friendDiv"></div>
</body>
</html>
Mempertahankan ID ekstensi yang konsisten
Mempertahankan satu ID sangat penting selama pengembangan. Untuk mempertahankan ID yang konsisten, ikuti langkah-langkah berikut:
Mengupload ekstensi ke dasbor developer
Paketkan direktori ekstensi ke dalam file .zip dan upload ke Dasbor Developer
Chrome tanpa memublikasikannya:
- Di Dasbor Developer, klik Tambahkan item baru.
- Klik Jelajahi file, pilih file zip ekstensi, lalu upload.
- Buka tab Paket, lalu klik Lihat kunci publik.
Saat dialog terbuka, ikuti langkah-langkah berikut:
- Salin kode di antara
-----BEGIN PUBLIC KEY-----dan-----END PUBLIC KEY-----. - Hapus baris baru untuk menjadikannya satu baris teks.
Tambahkan kode ke manifest.json di bagian kolom "key".
Dengan cara ini, ekstensi akan menggunakan ID yang sama.
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
Membandingkan ID
Buka halaman Pengelolaan Ekstensi di chrome://extensions, pastikan Mode developer diaktifkan,
dan upload direktori ekstensi yang di-unpackage. Bandingkan ID ekstensi di halaman pengelolaan ekstensi dengan ID Item di Dasbor Developer. Keduanya harus cocok.
Membuat client ID OAuth
Buka Konsol API Google dan buat project baru. Setelah siap, pilih Kredensial di sidebar, klik Buat kredensial, lalu pilih ID klien OAuth.
Di halaman Buat client ID, pilih Ekstensi Chrome. Isi nama ekstensi dan tempatkan ID ekstensi di akhir URL di kolom ID Aplikasi.
Selesaikan dengan mengklik buat. Konsol akan memberikan client ID OAuth.
Mendaftarkan OAuth dalam manifes
Sertakan kolom "oauth2" dalam manifes ekstensi. Tempatkan client ID OAuth yang dihasilkan di bagian
"client_id". Untuk saat ini, sertakan string kosong di "scopes".
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
Memulai alur OAuth pertama
Daftarkan izin identity dalam manifes.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
Buat file untuk mengelola alur OAuth yang disebut oauth.js dan sertakan kode berikut.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
Tempatkan tag skrip untuk oauth.js di head index.html.
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Muat ulang ekstensi dan klik ikon browser untuk membuka index.html. Buka konsol, lalu klik tombol "Kontak FriendBlock". Token OAuth akan muncul di konsol.
Mengaktifkan Google People API
Kembali ke konsol Google API dan pilih Library dari sidebar. Telusuri "Google People API", klik hasil yang benar, lalu aktifkan.
Tambahkan library klien Google People API ke "scopes" dalam manifes ekstensi.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Kembali ke konsol Google API dan kembali ke kredensial. Klik "Create credentials", lalu pilih "API key" dari dropdown.
Simpan kunci API yang dibuat untuk digunakan nanti.
Membuat permintaan API pertama
Setelah memiliki izin, kredensial, dan dapat memberikan otorisasi kepada pengguna Google yang sesuai, ekstensi ini dapat
meminta data melalui People API. Perbarui kode di oauth.js agar cocok dengan kode di bawah.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
let init = {
method: 'GET',
async: true,
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
'contentType': 'json'
};
fetch(
'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
init)
.then((response) => response.json())
.then(function(data) {
console.log(data)
});
});
});
};
Ganti API_KEY dengan kunci API yang dibuat dari konsol Google API. Ekstensi harus mencatat objek JSON yang menyertakan array people/account_id di kolom memberResourceNames.
Memblokir wajah
Setelah menampilkan daftar kontak pengguna, ekstensi dapat membuat permintaan tambahan untuk mengambil profil dan informasi kontak tersebut . Ekstensi akan menggunakan
memberResourceNames untuk mengambil informasi foto kontak pengguna. Perbarui oauth.js untuk
menyertakan kode berikut.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
let init = {
method: 'GET',
async: true,
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
'contentType': 'json'
};
fetch(
'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
init)
.then((response) => response.json())
.then(function(data) {
let photoDiv = document.querySelector('#friendDiv');
let returnedContacts = data.memberResourceNames;
for (let i = 0; i < returnedContacts.length; i++) {
fetch(
'https://people.googleapis.com/v1/' + returnedContacts[i] +
'?personFields=photos&key=API_KEY',
init)
.then((response) => response.json())
.then(function(data) {
let profileImg = document.createElement('img');
profileImg.src = data.photos[0].url;
photoDiv.appendChild(profileImg);
});
};
});
});
});
};
Muat ulang dan kembali ke ekstensi. Klik tombol FriendBlock dan selesai. Nikmati wajah kontak dalam blok.
