OAuth2 — это стандартный протокол авторизации. Он предоставляет пользователям механизм предоставления веб-приложениям и настольным приложениям доступа к частной информации без раскрытия имени пользователя, пароля и других личных учетных данных.
В этом руководстве создается расширение, которое получает доступ к контактам Google пользователя с помощью API Google People и API Chrome Identity . Поскольку расширения не загружаются через HTTPS, не могут выполнять перенаправление или устанавливать файлы cookie, для использования OAuth2 они полагаются на Chrome Identity API.
Начать
Начните с создания каталога и следующих стартовых файлов.
Полное завершенное расширение можно скачать здесь .
манифест.json
Добавьте манифест, создав файл с именем manifest.json и включив следующий код. Или скачайте файл здесь .
{
"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
}
}
фон.js
Добавьте фоновый скрипт, создав файл с именем background.js и включив следующий код. Или скачайте файл здесь .
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'index.html'});
});
index.html
Добавьте HTML-файл с именем index.html и включите следующий код. Или скачайте файл здесь .
<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>
Загрузить на панель разработчика
Упакуйте каталог расширения в .zip файл и загрузите его на панель разработчика Chrome , не публикуя:
- На панели управления разработчика нажмите « Добавить новый элемент» .
- Нажмите «Выбрать файл» , выберите каталог с расширением
.zipи загрузите его. - Не заполняя дополнительные поля, выберите «Сохранить черновик» и вернитесь в личный кабинет .
Найдите расширение в разделе «Ваши объявления» и нажмите «Подробнее» . Из всплывающего окна скопируйте открытый ключ и добавьте его в манифест внутри разархивированного каталога в поле "key" .
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
Сравнить идентификаторы
Откройте страницу управления расширениями по адресу chrome://extensions , убедитесь, что режим разработчика включен, и загрузите каталог распакованных расширений. Сравните идентификатор расширения на странице управления расширениями с идентификатором элемента на панели управления разработчика. Они должны совпадать.
Расширение будет поддерживать тот же идентификатор, включив поле "key" в манифест. Сохранение единого идентификатора необходимо для регистрации API.
Создать идентификатор клиента OAuth
Перейдите в консоль Google API и создайте новый проект. Когда все будет готово, выберите «Учетные данные» на боковой панели, нажмите « Создать учетные данные» и выберите идентификатор клиента OAuth .
На странице «Создать идентификатор клиента» выберите «Приложение Chrome» . Заполните имя расширения и поместите идентификатор расширения в конце URL-адреса в поле «Идентификатор приложения».
Завершите, нажав «Создать». Консоль предоставит идентификатор клиента OAuth.
Зарегистрируйте OAuth в манифесте
Включите поле "oauth2" в манифест расширения. Поместите сгенерированный идентификатор клиента OAuth в "client_id" . Включите на данный момент пустую строку в "scopes" .
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
Инициировать первый поток OAuth
Зарегистрируйте разрешение identity в манифесте.
{
"name": "OAuth Tutorial FaceBlcok",
...
"permissions": [
"identity"
],
...
}
Создайте файл для управления потоком OAuth под названием oauth.js и включите следующий код. Или скачайте здесь .
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
Поместите тег сценария для oauth.js в заголовок index.html .
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
Перезагрузите расширение и щелкните значок браузера, чтобы открыть index.html . Откройте консоль и нажмите кнопку «FriendBlock Contacts». В консоли появится токен OAuth.
Включите Google People API
Вернитесь в консоль Google API и выберите «Библиотека» на боковой панели. Найдите «Google People API», щелкните правильный результат и включите его.
Добавьте клиентскую библиотеку Google People API в "scopes" манифеста расширения.
{
"name": "OAuth Tutorial FaceBlcok",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Вернитесь в консоль Google API и вернитесь к учетным данным. Нажмите «Создать учетные данные» и выберите «Ключ API» из раскрывающегося списка.
Сохраните сгенерированный ключ API для дальнейшего использования.
Создать первый запрос API
Теперь, когда расширение имеет необходимые разрешения, учетные данные и может авторизовать пользователя Google, оно может запрашивать данные через People API. Обновите код в oauth.js , чтобы он соответствовал приведенному ниже.
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)
});
});
});
};
Замените API_KEY ключом API, сгенерированным из консоли Google API. Расширение должно регистрировать объект JSON, который включает в себя массив people/account_id в memberResourceNames .
Блок граней
Теперь, когда расширение возвращает список контактов пользователя, оно может делать дополнительные запросы для получения профилей и информации этих контактов . Расширение будет memberResourceNames для получения информации о фотографиях контактов пользователя. Обновите oauth.js , включив в него следующий код.
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);
});
};
});
});
});
};
Перезагрузитесь и вернитесь к расширению. Нажмите кнопку FriendBlock и та-да! Наслаждайтесь лицами контактов в блоке.
