OAuth2 là giao thức chuẩn của ngành cho việc uỷ quyền. Chiến dịch 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 các tiện ích không tải qua HTTPS nên 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.
Bạn có thể tải xuống tiện ích đầy đủ, đã hoàn thành tại đâ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. Hoặc
tải tệp xuống tại đây.
{
"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
Thêm tập lệnh nền bằng cách tạo một tệp có tên là background.js và thêm đoạn mã sau.
Hoặc tải tệp xuống tại đây.
chrome.browserAction.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. Hoặc tải tệp xuống tại đây.
<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>
Tải 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, hãy nhấp vào Thêm mục mới.
- Nhấp vào Chọn tệp rồi chọn thư mục tiện ích
.ziprồi tải thư mục đó lên. - Nếu không điền thêm trường, hãy chọn Lưu bản nháp và quay lại trang tổng quan.
Tìm tiện ích bên dưới Trang thông tin của bạn và nhấp vào thông tin khác. Từ cửa sổ bật lên, hãy sao chép
khoá công khai rồi thêm khoá đó vào tệp kê khai trong thư mục đã giải nén trong trường "key".
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
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 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 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.
Tiện ích này sẽ giữ nguyên mã nhận dạng bằng cách đưa trường "key" vào tệp kê khai. Bảo tồn
mã nhận dạng duy nhất là cần thiết để đăng ký API.
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 Ứng dụng 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
Thêm 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 FaceBlcok",
...
"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. Hoặc tải xuống
thiết bị đó tại đây.
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 rồi nhấp vào
trên "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 FaceBlcok",
...
"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.
