OAuth2 là giao thức chuẩn của ngành cho việc uỷ quyền. Công cụ này cung cấp một cơ chế để người dùng để cấp cho các ứng dụng web và máy tính để bàn quyền truy cập vào thông tin cá nhân mà không cần chia sẻ tên người dùng của chúng, mật khẩu và thông tin xác thực riêng tư khác.
Hướng dẫn này tạo một tiện ích truy cập vào danh bạ Google của người dùng bằng nhóm Google API và API Nhận dạng Chrome. Do tiện ích không tải quá HTTPS, không thể thực hiện chuyển hướng hoặc đặt cookie, các trình xử lý này sẽ dựa vào API Nhận dạng của Chrome để 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 đầu sau đây.
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 đoạn 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 là service-worker.js và thêm đoạn mã sau.
chrome.action.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Thêm tệp HTML có tên index.html và bao gồ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ột mã tiện ích nhất quán
Bạn cần lưu giữ một mã nhận dạng duy nhất trong quá trình phát triển. Để đảm bảo 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 tệp đó lên Nhà phát triển Chrome
Trang tổng quan mà không xuất bản:
- Trên Trang tổng quan dành cho nhà phát triển, 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 và tải lên.
- Chuyển đến thẻ Package (Gói) rồi nhấp vào View Public key (Xem khoá công khai).
Khi cửa sổ bật lên 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 để biến văn bản thành một dòng duy nhất.
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ã nhận dạng.
{ // 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 Chế độ nhà phát triển được bật,
rồi tải thư mục tiện ích chưa đóng gói lên. So sánh mã tiện ích trên tính năng quản lý tiện ích
vào mục Mã mặt hàng trong Trang tổng quan dành cho nhà phát triển. Chúng phải khớp nhau.
Tạo mã ứng dụng OAuth
Chuyển đến Bảng điều khiển API của Google và tạo 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 khách, hãy chọn Tiện ích của Chrome. Điền tên tiện ích và địa điểm mã tiện ích ở cuối URL trong trường Mã ứng dụng.
Hãy hoàn tất bằng cách nhấp vào nút tạo. Bảng điều khiển sẽ cung cấp một mã ứng dụng khách OAuth.
Đăng ký OAuth trong tệp kê khai
Đưa trường "oauth2" vào tệp kê khai của tiện ích. Đặt mã ứng dụng khách OAuth đã tạo trong phần
"client_id". Tạm thời, hãy bao gồm một chuỗi trống trong "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 để quản lý quy trình OAuth có tên là oauth.js và đưa vào mã sau.
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
Đặt mộ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 rồi nhấp vào biểu tượng trình duyệt để mở index.html. Mở bảng điều khiển và nhấp vào "FriendBlock Contacts" . 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 bảng điều khiển API của Google rồi chọn Thư viện trên thanh bên. Tìm kiếm "Người trên Google API", hãy nhấp vào kết quả chính xác rồi bật kết quả đó.
Thêm thư viện ứng dụng Google Mọi người 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 bảng điều khiển API của Google và quay lại thông tin đăng nhập. Nhấp vào "Tạo thông tin xác thực" và 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 đăng nhập thích hợp và có thể uỷ quyền cho một người dùng Google, tiện ích này có thể
dữ liệu yêu cầu thông qua API Mọi người. Cập nhật mã trong oauth.js để khớp với phần dưới đây.
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. Phần mở rộng
sẽ ghi nhật ký đố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, tiện ích đang trả về danh sách thông tin liên hệ của người dùng nên có thể thực hiện 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 trong danh bạ của người dùng. Cập nhật oauth.js thành
bao gồ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 và quay lại tiện ích. Nhấp vào nút FriendsBlock và ta-da! Xem khuôn mặt của người liên hệ trong một khối.
