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": 3, "action": { "default_title": "FriendBlock, friends face's in a block." }, "background": { "service_worker": "service-worker.js" } } сервис-worker.js
Добавьте работника службы расширения, создав файл с именем service-worker.js и включив следующий код.
chrome.action.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-файл расширения и загрузите его.
- Перейдите на вкладку «Пакет» и нажмите «Просмотреть открытый ключ» .
Когда диалоговое окно открыто, выполните следующие действия:
- Скопируйте код между
-----BEGIN PUBLIC KEY-----и-----END PUBLIC KEY-----. - Удалите символы новой строки, чтобы сделать одну строку текста.
Добавьте код в файл manifest.json в поле "key" . Таким образом, расширение будет использовать тот же идентификатор.
{ // manifest.json "manifest_version": 3, ... "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB", } Сравнить идентификаторы
Откройте страницу управления расширениями по адресу chrome://extensions , убедитесь, что режим разработчика включен, и загрузите каталог распакованных расширений. Сравните идентификатор расширения на странице управления расширениями с идентификатором элемента на панели разработчика. Они должны совпадать.
Создайте идентификатор клиента 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 FriendBlock", ... "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 FriendBlock", ... "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 и та-да! Наслаждайтесь лицами контактов в блоке.
