OAuth2 là giao thức tiêu chuẩn ngành để uỷ quyền. API 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 quyền 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 đăng nhập riêng tư khác.
Hướng dẫn này sẽ tạo một tiện ích có quyền truy cập vào danh bạ của người dùng trên Google bằng Google People API và Chrome Identity API. Vì 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 chúng 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 đầ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 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 thực thi dịch vụ của 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>
Giữ mã nhận dạng tiện ích nhất quán
Việc duy trì một mã nhận dạng duy nhất là điều cần thiết trong quá trình phát triển. Để duy trì một 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 thành tệp .zip và 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 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ấu xuống dòng để 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ã 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 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ã nhận dạng 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 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 với 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 đăng nhập cho dự án của bạn. Sau đó, các ứng dụng của bạn có thể sử dụng thông tin đăng nhập để 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ó dự án nào. Hãy làm theo các hướng dẫn này để tạo một Ứng dụng khách OAuth và lấy Mã ứng dụng khách.
- Go to the Clients page.
- 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 xuất hiện trên trang Khách hàng của dự án để xác định khách hàng.
- Nhập mã nhận dạng tiện ích vào trường Mã mặt hàng.
- 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 của tiện ích. Đặt mã ứng dụng OAuth đã tạo trong "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 để quản lý quy trình OAuth có tên là oauth.js và thêm đoạn 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 Google People API
Quay lại Google API Console rồi chọn Thư viện trong thanh bên. Tìm "Google People API", nhấp vào kết quả chính xác rồi bật API này.
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 rồi chuyển đến phầ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.
Lưu 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 này đã có các quyền, thông tin đăng nhập phù hợp và có thể uỷ quyền cho người dùng Google, nên tiện ích có thể yêu cầu dữ liệu thông qua People API. Cập nhật mã trong oauth.js sao cho 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 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, khi tiện ích đang trả về danh sách danh bạ 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ẽ 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! Thưởng thức khuôn mặt của người liên hệ theo khối.
