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": 2,
"browser_action": {
"default_title": "FriendBlock, friends face's in a block."
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
}
}
background.js
เพิ่มสคริปต์พื้นหลังโดยสร้างไฟล์ชื่อ background.js และใส่โค้ดต่อไปนี้
หรือดาวน์โหลดไฟล์ที่นี่
chrome.browserAction.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แล้วอัปโหลด - เลือกบันทึกฉบับร่างและกลับไปที่หน้าแดชบอร์ดโดยไม่ต้องกรอกข้อมูลในช่องเพิ่มเติม
ค้นหาส่วนขยายในข้อมูลของคุณ แล้วคลิกข้อมูลเพิ่มเติม จากป๊อปอัป ให้คัดลอก
คีย์สาธารณะแล้วเพิ่มลงในไฟล์ Manifest ภายในไดเรกทอรีที่คลายการบีบอัดใต้ช่อง "key"
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
เปรียบเทียบรหัส
เปิดหน้าการจัดการส่วนขยายที่ chrome://extensions ตรวจสอบว่าโหมดนักพัฒนาซอฟต์แวร์เปิดใช้งานอยู่ และ
อัปโหลดไดเรกทอรีส่วนขยายที่ไม่ได้จัดแพ็กเกจ เปรียบเทียบรหัสส่วนขยายในการจัดการส่วนขยาย
"รหัสรายการ" ในหน้าแดชบอร์ดสำหรับนักพัฒนาซอฟต์แวร์ ชื่อดังกล่าวควรตรงกับ
ส่วนขยายจะคงรหัสเดิมไว้ด้วยการใส่ช่อง "key" ในไฟล์ Manifest การรักษา
รหัสเดียวเป็นสิ่งจำเป็นสำหรับการลงทะเบียน API
สร้างรหัสไคลเอ็นต์ 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 FaceBlcok",
...
"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 API" ให้คลิกผลลัพธ์ที่ถูกต้องและเปิดใช้
เพิ่มไลบรารีไคลเอ็นต์ Google People API ไปยัง "scopes" ในไฟล์ Manifest ของส่วนขยาย
{
"name": "OAuth Tutorial FaceBlcok",
...
"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_ids ภายใต้
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 แล้วนี่เอง! เพลิดเพลินกับใบหน้าของผู้ที่คุณติดต่อใน บล็อก
