Эта страница переведена с помощью Cloud Translation API.

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

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

В этом руководстве описывается создание расширения, которое получает доступ к контактам пользователя Google с помощью Google People API и Chrome Identity API . Поскольку расширения не загружаются по протоколу HTTPS, не могут выполнять перенаправления или устанавливать cookie, они полагаются на Chrome Identity API для использования OAuth2.

Начать

Для начала создайте каталог и следующие стартовые файлы.

manifest.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"
  }
}

service-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.

Любое приложение, использующее OAuth 2.0 для доступа к API Google, должно иметь учетные данные авторизации, идентифицирующие приложение для сервера OAuth 2.0 Google. Следующие шаги описывают, как создать учетные данные для вашего проекта. Затем ваши приложения смогут использовать эти учетные данные для доступа к API, которые вы включили для этого проекта.

Для начала перейдите в консоль Google API , чтобы создать новый проект, если у вас его еще нет. Следуйте этим инструкциям, чтобы создать клиент OAuth и получить идентификатор клиента (Client ID).

Перейдите на страницу «Клиенты» .
1. Нажмите «Создать клиента» .
2. Выберите тип приложения «Расширение Chrome» .
3. Введите имя для клиента OAuth. Это имя будет отображаться на странице «Клиенты» вашего проекта для идентификации клиента.
4. Введите идентификатор расширения в поле «Идентификатор элемента».
5. Нажмите «Создать» .

Зарегистрируйте OAuth в манифесте.

Включите поле "oauth2" в манифест расширения. Разместите сгенерированный идентификатор клиента OAuth в поле "client_id" . Для получения доступа к информации об учетной записи пользователя необходимо запросить соответствующий "scope" , "https://www.googleapis.com/auth/userinfo.email" .

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":["https://www.googleapis.com/auth/userinfo.email"]
  },
  ...
}

Инициировать первый поток аутентификации 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);
    });
  });
};

Разместите тег <script> для oauth.js в разделе <head> файла index.html .

...
  <head>
    <title>FriendBlock</title>
    ...
    <script type="text/javascript" src="oauth.js"></script>
  </head>
...

Перезагрузите расширение и щелкните значок браузера, чтобы открыть index.html . Откройте консоль и нажмите кнопку "FriendBlock Contacts". В консоли появится токен OAuth.

Просмотрите токен в консоли.

Включите API Google People

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

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

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

OAuth 2.0: аутентификация пользователей с помощью Google Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.