OAuth 2.0: аутентификация пользователей с помощью Google, OAuth 2.0: аутентификация пользователей с помощью Google

OAuth2 — это стандартный протокол авторизации. Он предоставляет пользователям механизм предоставления веб-приложениям и настольным приложениям доступа к частной информации без раскрытия имени пользователя, пароля и других личных учетных данных.

В этом руководстве создается расширение, которое получает доступ к контактам Google пользователя с помощью Google People API и Chrome Identity API . Поскольку расширения не загружаются через 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 , не публикуя:

  1. На панели инструментов разработчика нажмите «Добавить новый элемент» .
  2. Нажмите «Обзор файлов» , выберите zip-файл расширения и загрузите его.
  3. Перейдите на вкладку «Пакет» и нажмите « Просмотреть открытый ключ» .

Вкладка «Пакет панели управления разработчика»

Когда всплывающее окно открыто, выполните следующие действия:

  1. Скопируйте код между -----BEGIN PUBLIC KEY----- и -----END PUBLIC KEY----- .
  2. Удалите символы новой строки, чтобы сделать одну строку текста.

Всплывающее окно открытого ключа

Добавьте код в 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», щелкните правильный результат и включите его.

Включить 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» из раскрывающегося списка.

Создание учетных данных People 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 и та-да! Наслаждайтесь лицами контактов в блоке.

Контактные лица в блоке