OAuth2 là giao thức tiêu chuẩn ngành để uỷ quyền. Giao thức này cung cấp một cơ chế để người dùng cấp quyền cho các ứng dụng web và ứng dụng dành cho máy tính truy cập vào thông tin riêng tư 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 xây dựng 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 việc chuyển hướng hoặc đặt cookie, nên chúng dựa vào API Chrome Identity để 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 là 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 giữ nguyên một mã duy nhất là điều cần thiết trong quá trình phát triển. Để duy trì một mã 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 thành một tệp .zip rồi tải tệp đó lên Trang tổng quan dành cho nhà phát triển Chrome mà không cần xuất bản:
- 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 tìm 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 đang mở, hãy làm theo các bước sau:
- Sao chép mã nằ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 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ã.
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
So sánh mã
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 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 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 mã này phải khớp nhau.
Tạo mã ứng dụng OAuth
Mọi ứng dụng sử dụng OAuth 2.0 để truy cập vào các API của Google đều phải có thông tin xác thực uỷ quyền để xác định ứng dụng cho máy chủ OAuth 2.0 của Google. Các bước sau đây giải thích cách tạo thông tin xác thực cho dự án của bạn. Sau đó, các ứng dụng có thể sử dụng thông tin xác thực để truy cập vào các API mà bạn đã bật cho dự án đó.
Bắt đầu bằng cách chuyển đến Bảng điều khiển API của Google để tạo một dự án mới nếu bạn chưa có. Hãy làm theo các hướng dẫn sau để tạo Ứng dụng OAuth và lấy Mã ứng dụng.
- Chuyển đến trang Ứng dụng.
- Nhấp vào Tạo ứng dụng.
- Chọn loại ứng dụng Tiện ích Chrome.
- Nhập tên cho ứng dụng OAuth. Tên này sẽ xuất hiện trên trang Ứng dụng của dự án để xác định ứng dụng.
- Nhập mã tiện ích vào trường Mã mục.
- Nhấp vào Tạo.
Đă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 OAuth đã tạo trong
"client_id". Để có quyền truy cập vào thông tin tài khoản của người dùng, bạn cần yêu cầu
có liên quan "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"]
},
...
}
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à 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 rồi 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 "FriendBlock Contacts" (Danh bạ FriendBlock). Mã thông báo OAuth sẽ xuất hiện trong bảng điều khiển.
Bật API Google People
Quay lại Bảng điều khiển API của Google rồi chọn Thư viện trong thanh bên. Tìm kiếm "API Google People", nhấp vào kết quả chính xác rồi bật API đó.
Thêm thư viện ứng dụng API Google People 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 rồi chuyển lại đến 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, tiện ích đã có các quyền, thông tin xác thực phù hợp và có thể uỷ quyền cho người dùng Google, nên 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 sẽ ghi lại 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, tiện ích đang trả về danh sách danh bạ của người dùng, nên 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 sẽ sử dụng memberResourceNames để truy xuất thông tin ảnh của người liên hệ. 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 và ta-da! Bạn có thể chặn khuôn mặt của người liên hệ.
