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
แอปพลิเคชันใดก็ตามที่ใช้ OAuth 2.0 เพื่อเข้าถึง Google APIs ต้องมี ข้อมูลเข้าสู่ระบบการให้สิทธิ์ที่ระบุแอปพลิเคชันไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google ขั้นตอนต่อไปนี้จะอธิบายวิธีสร้างข้อมูลเข้าสู่ระบบสำหรับโปรเจ็กต์ จากนั้นแอปพลิเคชันจะใช้ข้อมูลเข้าสู่ระบบเพื่อเข้าถึง API ที่คุณเปิดใช้สำหรับโปรเจ็กต์นั้นได้
เริ่มต้นด้วยการไปที่คอนโซล Google API เพื่อสร้างโปรเจ็กต์ใหม่หากยังไม่มี ทำตามวิธีการต่อไปนี้เพื่อสร้าง ไคลเอ็นต์ OAuth และรับรหัสไคลเอ็นต์
- Go to the Clients page.
- คลิกสร้างไคลเอ็นต์
- เลือกประเภทแอปพลิเคชันส่วนขยาย Chrome
- ป้อนชื่อสำหรับไคลเอ็นต์ OAuth ชื่อนี้จะแสดงในหน้าไคลเอ็นต์ของโปรเจ็กต์ เพื่อระบุไคลเอ็นต์
- ป้อนรหัสส่วนขยายในช่องรหัสสินค้า
- คลิกสร้าง
ลงทะเบียน OAuth ในไฟล์ Manifest
ใส่ฟิลด์ "oauth2" ในไฟล์ Manifest ของส่วนขยาย วางรหัสไคลเอ็นต์ OAuth ที่สร้างขึ้นไว้ใต้
"client_id" หากต้องการเข้าถึงข้อมูลบัญชีของผู้ใช้ เราต้องขอ"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"]
},
...
}
เริ่มขั้นตอน 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 Contacts" โทเค็น 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);
});
};
});
});
});
};
โหลดซ้ำและกลับไปที่ส่วนขยาย คลิกปุ่ม FriendBlock แล้วก็เสร็จเรียบร้อย เพลิดเพลินกับใบหน้าของรายชื่อติดต่อใน บล็อก
