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.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
s ในช่อง 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 เพื่อเป็นแนวทาง เห็นหน้าของผู้ติดต่อได้ ในบล็อกเดียว