OAuth2 adalah protokol standar industri untuk otorisasi. Protokol ini menyediakan mekanisme bagi pengguna untuk memberikan akses aplikasi web dan desktop 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 menetapkan cookie, ekstensi mengandalkan Chrome Identity API untuk menggunakan OAuth2.
Mulai
Mulailah dengan membuat direktori dan file starter 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
Kemasi direktori ekstensi ke dalam file .zip dan upload ke Chrome
Dasbor Developer
tanpa memublikasikannya:
- Di Dasbor Developer, klik Add new item.
- Klik Browse files, pilih file zip ekstensi, lalu upload.
- Buka tab Package , lalu klik View public key.
Saat dialog terbuka, ikuti langkah-langkah berikut:
- Salin kode di antara
-----BEGIN PUBLIC KEY-----dan-----END PUBLIC KEY-----. - Hapus baris baru agar menjadi satu baris teks.
Tambahkan kode ke manifest.json di 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 Developer mode diaktifkan, lalu upload direktori ekstensi yang belum dikemas. Bandingkan ID ekstensi di halaman pengelolaan ekstensi dengan ID Item di Dasbor Developer. ID tersebut harus sama.
Membuat client ID OAuth
Setiap aplikasi yang menggunakan OAuth 2.0 untuk mengakses Google API harus memiliki kredensial otorisasi yang mengidentifikasi aplikasi ke server OAuth 2.0 Google. Langkah-langkah berikut menjelaskan cara membuat kredensial untuk project Anda. Aplikasi Anda kemudian dapat menggunakan kredensial untuk mengakses API yang telah Anda aktifkan untuk project tersebut.
Mulailah dengan membuka konsol Google API untuk membuat project baru jika Anda belum memilikinya. Ikuti petunjuk ini untuk membuat Klien OAuth dan mendapatkan Client ID.
- Buka halaman Klien.
- Klik Buat Klien.
- Pilih jenis aplikasi Ekstensi Chrome.
- Masukkan nama untuk klien OAuth. Nama ini ditampilkan di halaman Klien project Anda untuk mengidentifikasi klien.
- Masukkan ID ekstensi di kolom ID Item.
- Klik Buat.
Mendaftarkan OAuth dalam manifes
Sertakan kolom "oauth2" dalam manifes ekstensi. Tempatkan client ID OAuth yang dibuat di bagian
"client_id". Untuk mendapatkan akses ke informasi akun pengguna, kita perlu meminta
yang relevan "scope", "https://www.googleapis.com/auth/userinfo.email".
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":["https://www.googleapis.com/auth/userinfo.email"]
},
...
}
Memulai alur OAuth pertama
Daftarkan izin identity dalam manifes.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
Buat file untuk mengelola alur OAuth bernama 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 bagian 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 Google API dan pilih Library dari sidebar. Cari "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 "Buat kredensial" dan pilih "Kunci API" dari dropdown.
Simpan kunci API yang dibuat untuk digunakan nanti.
Membuat permintaan API pertama
Setelah memiliki izin dan kredensial yang tepat, serta dapat mengotorisasi pengguna Google, ekstensi kini dapat meminta data melalui People API. Perbarui kode di oauth.js agar sesuai 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 tada! Nikmati wajah kontak dalam blok.
