OAuth2 เป็นโปรโตคอลมาตรฐานอุตสาหกรรมสำหรับการให้สิทธิ์ ซึ่งจะเป็นกลไกให้ผู้ใช้อนุญาตให้แอปพลิเคชันบนเว็บและเดสก์ท็อปเข้าถึงข้อมูลส่วนตัวได้โดยไม่ต้องแชร์ชื่อผู้ใช้ รหัสผ่าน และข้อมูลเข้าสู่ระบบส่วนตัวอื่นๆ
บทแนะนํานี้จะสร้างส่วนขยายที่เข้าถึงรายชื่อติดต่อ Google ของผู้ใช้โดยใช้ Google People API และ Chrome Identity API เนื่องจากส่วนขยายไม่โหลดผ่าน HTTPS, ทำการเปลี่ยนเส้นทางหรือตั้งค่าคุกกี้ไม่ได้ จึงต้องใช้ Chrome Identity API เพื่อใช้ OAuth2
เริ่มต้นใช้งาน
เริ่มต้นด้วยการสร้างไดเรกทอรีและไฟล์เริ่มต้นต่อไปนี้
manifest.json
เพิ่มไฟล์ Manifest โดยสร้างไฟล์ชื่อ manifest.json และใส่โค้ดต่อไปนี้
{
"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
เพิ่ม Service Worker ของส่วนขยายโดยสร้างไฟล์ชื่อ service-worker.js และใส่โค้ดต่อไปนี้
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
เพิ่มไฟล์ HTML ชื่อ index.html และใส่โค้ดต่อไปนี้
<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>
ใช้รหัสส่วนขยายที่สอดคล้องกัน
การคงรหัสเดียวไว้เป็นสิ่งจําเป็นในระหว่างการพัฒนา ทําตามขั้นตอนต่อไปนี้เพื่อให้รหัสสอดคล้องกัน
อัปโหลดส่วนขยายไปยังหน้าแดชบอร์ดสำหรับนักพัฒนาแอป
แพ็กเกจไดเรกทอรีส่วนขยายเป็นไฟล์ .zip แล้วอัปโหลดไปยังแดชบอร์ดนักพัฒนาซอฟต์แวร์ Chrome โดยไม่ต้องเผยแพร่
- ในแดชบอร์ดของนักพัฒนาแอป ให้คลิกเพิ่มรายการใหม่
- คลิกเรียกดูไฟล์ เลือกไฟล์ ZIP ของส่วนขยาย แล้วอัปโหลด
- ไปที่แท็บแพ็กเกจ แล้วคลิกดูคีย์สาธารณะ
เมื่อกล่องโต้ตอบเปิดขึ้น ให้ทำตามขั้นตอนต่อไปนี้
- คัดลอกโค้ดระหว่าง
-----BEGIN PUBLIC KEY-----กับ-----END PUBLIC KEY----- - นำบรรทัดใหม่ออกเพื่อให้เป็นข้อความบรรทัดเดียว
เพิ่มโค้ดลงใน manifest.json ใต้ช่อง "key"
วิธีนี้จะทำให้ส่วนขยายใช้รหัสเดียวกัน
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
เปรียบเทียบบัตรประจำตัว
เปิดหน้าการจัดการส่วนขยายที่ chrome://extensions ตรวจสอบว่าได้เปิดใช้โหมดนักพัฒนาซอฟต์แวร์ และอัปโหลดไดเรกทอรีส่วนขยายที่ยังไม่ได้แพ็กเกจ เปรียบเทียบรหัสส่วนขยายในหน้าการจัดการส่วนขยายกับรหัสสินค้าในหน้าแดชบอร์ดสำหรับนักพัฒนาซอฟต์แวร์ โดยข้อมูลควรตรงกัน
สร้างรหัสไคลเอ็นต์ OAuth
ไปที่คอนโซล Google API แล้วสร้างโปรเจ็กต์ใหม่ เมื่อพร้อมแล้ว ให้เลือกข้อมูลเข้าสู่ระบบในแถบด้านข้าง คลิกสร้างข้อมูลเข้าสู่ระบบ แล้วเลือกรหัสไคลเอ็นต์ OAuth
ในหน้าสร้างรหัสไคลเอ็นต์ ให้เลือกส่วนขยาย Chrome กรอกชื่อส่วนขยายและใส่รหัสส่วนขยายที่ท้าย URL ในช่องรหัสแอปพลิเคชัน
เสร็จสิ้นโดยคลิกสร้าง คอนโซลจะระบุรหัสไคลเอ็นต์ OAuth
ลงทะเบียน OAuth ในไฟล์ Manifest
ใส่ฟิลด์ "oauth2" ในไฟล์ Manifest ของส่วนขยาย วางรหัสไคลเอ็นต์ OAuth ที่สร้างขึ้นใต้
"client_id" ใส่สตริงว่างใน "scopes" ไว้ก่อน
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
เริ่มขั้นตอนการดำเนินการ OAuth ครั้งแรก
ลงทะเบียนสิทธิ์ identity ในไฟล์ Manifest
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
สร้างไฟล์เพื่อจัดการขั้นตอน OAuth ชื่อ oauth.js และใส่โค้ดต่อไปนี้
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
วางแท็กสคริปต์สําหรับ oauth.js ในส่วนหัวของ index.html
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
โหลดส่วนขยายซ้ำ แล้วคลิกไอคอนเบราว์เซอร์เพื่อเปิด index.html เปิดคอนโซลแล้วคลิกปุ่ม "รายชื่อติดต่อของ FriendBlock" โทเค็น OAuth จะปรากฏในคอนโซล
เปิดใช้ Google People API
กลับไปที่คอนโซล Google API แล้วเลือกคลังจากแถบด้านข้าง ค้นหา "Google People API" แล้วคลิกผลการค้นหาที่ถูกต้องเพื่อเปิดใช้
เพิ่มไลบรารีของไคลเอ็นต์ Google People API ลงใน "scopes" ในไฟล์ Manifest ของส่วนขยาย
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
กลับไปที่คอนโซล Google API แล้วกลับไปที่ข้อมูลเข้าสู่ระบบ คลิก "สร้างข้อมูลเข้าสู่ระบบ" แล้วเลือก "คีย์ API" จากเมนูแบบเลื่อนลง
เก็บคีย์ API ที่สร้างขึ้นไว้ใช้ภายหลัง
สร้างคําขอ API รายการแรก
เมื่อส่วนขยายมีสิทธิ์ ข้อมูลเข้าสู่ระบบ และสามารถให้สิทธิ์ผู้ใช้ Google ได้แล้ว ก็จะขอข้อมูลผ่าน People API ได้ อัปเดตโค้ดใน oauth.js ให้ตรงกับด้านล่าง
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)
});
});
});
};
แทนที่ API_KEY ด้วยคีย์ API ที่สร้างขึ้นจากคอนโซล Google API ส่วนขยายควรบันทึกออบเจ็กต์ JSON ที่มีอาร์เรย์ของ people/account_id ใต้ช่อง memberResourceNames
บล็อกใบหน้า
เมื่อส่วนขยายแสดงรายการรายชื่อติดต่อของผู้ใช้แล้ว ก็จะส่งคำขอเพิ่มเติมเพื่อเรียกข้อมูลโปรไฟล์และข้อมูลของผู้ติดต่อเหล่านั้นได้ ส่วนขยายจะใช้ memberResourceNames เพื่อดึงข้อมูลรูปภาพของรายชื่อติดต่อของผู้ใช้ อัปเดต oauth.js ให้รวมโค้ดต่อไปนี้
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);
});
};
});
});
});
};
โหลดซ้ำแล้วกลับไปที่ส่วนขยาย คลิกปุ่ม "บล็อกเพื่อน" แล้วเสร็จ ดูใบหน้าของรายชื่อติดต่อในบล็อก
