OAuth2 adalah protokol standar industri untuk otorisasi. Layanan ini memberikan mekanisme bagi pengguna untuk memberi aplikasi web dan desktop akses ke informasi pribadi 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 menyetel cookie, ekstensi tersebut 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 menyertakan 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. Agar ID tetap konsisten, ikuti langkah-langkah berikut:
Upload ekstensi ke dasbor developer
Gabungkan direktori ekstensi menjadi file .zip dan upload ke Dasbor Developer
Chrome tanpa memublikasikannya:
- Di Dasbor Developer, klik Tambahkan item baru.
- Klik Cari file, pilih file zip ekstensi, lalu upload.
- Buka tab Package, lalu klik View public key.
Saat pop-up terbuka, ikuti langkah-langkah berikut:
- Salin kode antara
-----BEGIN PUBLIC KEY-----dan-----END PUBLIC KEY-----. - Hapus baris baru untuk menjadikannya satu baris teks.
Tambahkan kode ke manifest.json di bawah 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",
}
Bandingkan ID
Buka halaman Pengelolaan Ekstensi di chrome://extensions, pastikan Mode developer diaktifkan,
dan upload direktori ekstensi yang tidak dipaketkan. Bandingkan ID ekstensi di halaman pengelolaan ekstensi
dengan ID Item di Dasbor Developer. Nama tersebut harus cocok.
Membuat client ID OAuth
Buka konsol API Google dan buat project baru. Setelah siap, pilih Credentials di sidebar, klik Create credentials, lalu pilih OAuth client ID.
Di halaman Buat client ID, pilih Ekstensi Chrome. Isi nama ekstensi dan tempatkan ID ekstensi di akhir URL pada kolom ID Aplikasi.
Selesaikan dengan mengklik buat. Konsol akan menyediakan client ID OAuth.
Mendaftarkan OAuth di manifes
Sertakan kolom "oauth2" dalam manifes ekstensi. Tempatkan client ID OAuth yang dibuat di bagian
"client_id". Sertakan string kosong di "scopes" untuk saat ini.
{
"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 diberi nama 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 dan klik tombol "FriendBlock Contacts". Token OAuth akan muncul di konsol.
Mengaktifkan Google People API
Kembali ke konsol API Google dan pilih Library dari sidebar. Telusuri "Google People API", klik hasil yang benar lalu aktifkan.
Tambahkan library klien Google People API ke "scopes" di manifes ekstensi.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Kembali ke konsol API Google dan buka kembali kredensial. Klik "Create credentials" dan pilih "API key" dari menu dropdown.
Simpan kunci API yang dihasilkan untuk digunakan nanti.
Membuat permintaan API pertama
Setelah memiliki izin, kredensial, dan dapat memberikan otorisasi kepada pengguna Google, ekstensi dapat meminta data melalui People API. Perbarui kode di oauth.js agar sesuai 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 API Google. Ekstensi harus mencatat objek JSON yang menyertakan array people/account_id ke dalam log di kolom memberResourceNames.
Blokir wajah
Setelah ekstensi 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. Update 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 ta-da! Nikmati wajah kontak dalam satu blok.
