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 menetapkan cookie, ekstensi tersebut mengandalkan Chrome Identity API untuk menggunakan OAuth2.
Mulai
Mulailah dengan membuat direktori dan file awal berikut.
Ekstensi lengkap yang telah selesai dapat didownload di sini.
manifest.json
Tambahkan manifes dengan membuat file bernama manifest.json dan sertakan kode berikut. Atau, download filenya di sini.
{
"name": "OAuth Tutorial FriendBlock",
"version": "1.0",
"description": "Uses OAuth to connect to Google's People API and display contacts photos.",
"manifest_version": 2,
"browser_action": {
"default_title": "FriendBlock, friends face's in a block."
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
}
}
background.js
Tambahkan skrip latar belakang dengan membuat file bernama background.js dan sertakan kode berikut.
Atau download filenya di sini.
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Tambahkan file HTML bernama index.html dan sertakan kode berikut. Atau download filenya di sini.
<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>
Mengupload 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 Pilih file dan pilih direktori ekstensi
.zip, lalu upload. - Tanpa mengisi kolom tambahan, pilih Simpan Draf dan kembali ke dasbor.
Temukan ekstensi di bagian Your Listings, lalu klik more info. Dari pop-up, salin kunci publik dan tambahkan ke manifes di dalam direktori yang diekstrak di kolom "key".
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
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.
Ekstensi akan mempertahankan ID yang sama dengan menyertakan kolom "key" dalam manifes. Mempertahankan
satu ID sangat penting untuk pendaftaran API.
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 Aplikasi 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 dalam 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 FaceBlcok",
...
"permissions": [
"identity"
],
...
}
Buat file untuk mengelola alur OAuth yang diberi nama oauth.js dan sertakan kode berikut. Atau download
di sini.
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 FaceBlcok",
...
"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.
Buat 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.
