OAuth2 là giao thức uỷ quyền theo tiêu chuẩn ngành. API này cung cấp một cơ chế để người dùng cấp quyền truy cập vào thông tin riêng tư cho các ứng dụng web và ứng dụng dành cho máy tính mà không cần chia sẻ tên người dùng, mật khẩu và các thông tin xác thực riêng tư khác.
Hướng dẫn này sẽ tạo một tiện ích truy cập vào danh bạ Google của người dùng bằng API Google People và API Chrome Identity. Vì các tiện ích không tải qua HTTPS, không thể thực hiện lệnh chuyển hướng hoặc đặt cookie, nên các tiện ích này dựa vào Chrome Identity API để sử dụng OAuth2.
Bắt đầu
Bắt đầu bằng cách tạo một thư mục và các tệp khởi động sau.
manifest.json
Thêm tệp kê khai bằng cách tạo một tệp có tên là manifest.json và thêm mã sau.
{
"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
Thêm trình chạy dịch vụ tiện ích bằng cách tạo một tệp có tên service-worker.js và thêm mã sau.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Thêm một tệp HTML có tên là index.html và thêm mã sau.
<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>
Duy trì mã tiện ích nhất quán
Việc duy trì một mã nhận dạng là điều cần thiết trong quá trình phát triển. Để duy trì mã nhận dạng nhất quán, hãy làm theo các bước sau:
Tải tiện ích lên trang tổng quan dành cho nhà phát triển
Đóng gói thư mục tiện ích vào tệp .zip rồi tải lên Trang tổng quan dành cho nhà phát triển Chrome mà không cần phát hành:
- Trên Trang tổng quan dành cho nhà phát triển, hãy nhấp vào Thêm mục mới.
- Nhấp vào Duyệt qua tệp, chọn tệp zip của tiện ích rồi tải tệp đó lên.
- Chuyển đến thẻ Gói rồi nhấp vào Xem khoá công khai.
Khi hộp thoại mở ra, hãy làm theo các bước sau:
- Sao chép mã giữa
-----BEGIN PUBLIC KEY-----và-----END PUBLIC KEY-----. - Xoá các dòng mới để tạo thành một dòng văn bản.
Thêm mã vào manifest.json trong trường "key".
Bằng cách này, tiện ích sẽ sử dụng cùng một mã.
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
So sánh mã nhận dạng
Mở trang Quản lý tiện ích tại chrome://extensions, đảm bảo bạn đã bật Chế độ nhà phát triển và tải thư mục tiện ích chưa đóng gói lên. So sánh mã tiện ích trên trang quản lý tiện ích với Mã mặt hàng trong Trang tổng quan dành cho nhà phát triển. Các giá trị này phải khớp nhau.
Tạo mã ứng dụng khách OAuth
Chuyển đến Bảng điều khiển API của Google rồi tạo một dự án mới. Khi đã sẵn sàng, hãy chọn Thông tin xác thực trong thanh bên, nhấp vào Tạo thông tin xác thực rồi chọn Mã ứng dụng khách OAuth.
Trên trang Tạo mã ứng dụng, hãy chọn Tiện ích Chrome. Điền tên của tiện ích và đặt mã tiện ích vào cuối URL trong trường Mã ứng dụng.
Hoàn tất bằng cách nhấp vào tạo. Bảng điều khiển sẽ cung cấp mã ứng dụng khách OAuth.
Đăng ký OAuth trong tệp kê khai
Thêm trường "oauth2" vào tệp kê khai tiện ích. Đặt mã ứng dụng khách OAuth đã tạo vào "client_id". Hiện tại, hãy thêm một chuỗi trống vào "scopes".
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
Bắt đầu quy trình OAuth đầu tiên
Đăng ký quyền identity trong tệp kê khai.
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
Tạo một tệp có tên oauth.js để quản lý luồng OAuth và thêm mã sau.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
Đặt thẻ tập lệnh cho oauth.js trong phần đầu của index.html.
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Tải lại tiện ích và nhấp vào biểu tượng trình duyệt để mở index.html. Mở bảng điều khiển rồi nhấp vào nút "Danh bạ FriendBlock". Một mã thông báo OAuth sẽ xuất hiện trong bảng điều khiển.
Bật Google People API
Quay lại Google API Console rồi chọn Thư viện trên thanh bên. Tìm "Google People API", nhấp vào kết quả chính xác rồi bật API đó.
Thêm thư viện ứng dụng Google People API vào "scopes" trong tệp kê khai tiện ích.
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Quay lại Google API Console và chuyển về thông tin xác thực. Nhấp vào "Tạo thông tin xác thực" rồi chọn "Khoá API" trong trình đơn thả xuống.
Giữ lại khoá API đã tạo để sử dụng sau này.
Tạo yêu cầu API đầu tiên
Giờ đây, khi đã có các quyền, thông tin xác thực thích hợp và có thể uỷ quyền cho người dùng Google, tiện ích này có thể yêu cầu dữ liệu thông qua API People. Cập nhật mã trong oauth.js để khớp với mã bên dưới.
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)
});
});
});
};
Thay thế API_KEY bằng khoá API được tạo từ bảng điều khiển API của Google. Tiện ích này sẽ ghi nhật ký một đối tượng JSON bao gồm một mảng people/account_id trong trường memberResourceNames.
Chặn khuôn mặt
Giờ đây, khi đang trả về danh sách người liên hệ của người dùng, tiện ích này có thể đưa ra các yêu cầu bổ sung để truy xuất hồ sơ và thông tin của những người liên hệ đó . Tiện ích này sẽ sử dụng memberResourceNames để truy xuất thông tin ảnh của người liên hệ của người dùng. Cập nhật oauth.js để thêm mã sau.
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);
});
};
});
});
});
};
Tải lại rồi quay lại tiện ích. Nhấp vào nút FriendBlock (Chặn bạn bè) và thế là xong! Tận hưởng khuôn mặt của người liên hệ trong một khối.
