Авторизация Google OAuth2 с расширениями Chrome

Это наш уникальный ключ расширения Chrome. Скопируйте и вставьте это в «manifest.json» расширения Chrome, которое вы фактически разрабатываете. (папка, которую вы выбрали для шага «Упаковать расширение»)

/* manifest.json */
{
    "name": "Oauth2 test",
    "description": "",
    "version": "0.1.0",
    "manifest_version": 2,
    "key": "<key here>",
    "icons": {
        "16": "./obj-16x16.png",
        "32": "./obj-32x32.png",
        "48": "./obj-48x48.png",
        "128": "./obj-128x128.png"
    },
    "background": {
        "scripts": [
            "./background.js"
        ]
    },
    "options_page": "./options.html",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "identity",
        "identity.email"
    ]
}

Примечание.
Нам требуются разрешения «identity» и «identity.email».

Наконец, удалите расширение Chrome из браузера (нажмите «Удалить») и установите расширение для разработки, нажав «Загрузить распакованное» и выбрав папка для вашего расширения для разработки.

Это расширение для разработки теперь имеет возможность использовать API и службы Google.

Чтобы получить авторизацию для конечной точки Google OAuth2, нам нужно перейти в Консоль разработчика Google и запросить идентификатор клиента OAuth2.

Перейдите к https://console.developers.google.com/ и, если вы еще этого не сделали, создайте проект.

Здесь мы должны сделать две вещи…

Нажмите ссылку «Экран согласия OAuth» слева. Выберите «Внешний» и «Создать». Просто заполните поле «Название приложения» и «Сохранить».
Экран «Согласие OAuth» сообщает пользователю, что нам нужен доступ к его данным Google, когда он решит войти в свою учетную запись Google.

Затем нажмите ссылку «Учетные данные» слева.
Нажмите «Создать учетные данные» в верхней части экрана, выберите
«Идентификатор клиента OAuth».
Установите для параметра Тип приложения значение "Приложение Chrome".
Заполните поле "Имя" любым вы хотите, затем введите
«Идентификатор приложения» внизу. «Идентификатор приложения» — это идентификатор вашего расширения Chrome; вы можете найти его @ chrome://extensions.
Нажмите «Создать».

Затем нам нужен ключ API, чтобы мы могли получить доступ к данным контактов Google пользователя с помощью People API.
Перейдите в «Библиотека» на левой панели. Найдите «Google People API» и нажмите «Включить».
Перейдите к «Учетные данные» на левой панели. .
Нажмите «Учетные данные в API и службах» на главной странице.
Нажмите «Создать учетные данные» в верхней части страницы и выберите « Ключ API».

Это расширение для разработки теперь может взаимодействовать с конечной точкой Google OAuth2 и API People.

Переходим к расширению.

Мы будем использовать простую кнопку в нашем «popup.html» и его скрипт, чтобы протестировать наше расширение Chrome.

/* popup-script.js */
document.querySelector('button')
  .addEventListener('click', function () {
    chrome.runtime.sendMessage({ message: '' });
  });

Мы создадим дерево 'if Conditional' в нашем получателе сообщений в скрипте 'background.js'.
Это обработает 5 запросов:

1. Получите токен доступа.
2. Получите информацию о профиле вошедшего в систему пользователя.
3. Получите контакты пользователя с его страницы контактов Google.
4. Создайте контакт на странице пользователя. Страница контактов Google.
5. Удалите контакт на странице контактов Google пользователя.

Для этого нам нужно добавить некоторые свойства в наш ‘manifest.json’.

/* manifest.json */
{
    "name": "Oauth2 test",
    "description": "",
    "version": "0.1.0",
    "manifest_version": 2,
    "key": "<key here>",
    "oauth2": {
        "client_id": "<client id here>",
        "scopes": [
            "profile email",
            "https://www.googleapis.com/auth/contacts"
        ]
    },
...

Примечание.
Добавьте свойство "oauth2" с:
"client_id" из Google Developer Console
области с электронной почтой профиля и https://www.googleapis.com/auth/contacts

/* background.js */
const API_KEY = '';
let user_signed_in = false;
chrome.identity.onSignInChanged.addListener(function (account_id, signedIn) {
    if (signedIn) {
        user_signed_in = true;
    } else {
        user_signed_in = false;
    }
});
chrome.runtime.onMessage
  .addListener((request, sender, sendResponse) => {

  });

Примечание.
Мы добавили постоянную переменную, содержащую ключ API из консоли разработчика Google.

Наиболее важной частью этого расширения является метод «chrome.identity.getAuthToken()».
Он позволяет нам получить «токен доступа», который мы можно использовать для получения доступа к данным пользователя.

/* background.js */
if (request.message === 'get_auth_token') {
  chrome.identity
    .getAuthToken({ interactive: true }, function (token) {
      console.log(token);
    });
}

Как только пользователь войдет в систему, мы сможем получить информацию о его профиле с помощью метода «chrome.identity.getProfileUserInfo()».

/* background.js */
} else if (request.message === 'get_profile') {
  chrome.identity
    .getProfileUserInfo({ accountStatus: 'ANY' }, function 
    (user_info) {
      console.log(user_info);
    });
}

Суть этого проекта сводится к следующему:

Когда мы хотим взаимодействовать с данными пользователя, что означает использование одного из API Google, нам нужно передать токен доступа в заголовке
нашего запроса на выборку.
Поэтому нам нужно сначала вызвать ' getAuthToken()', а затем передать токен в вызов fetch.

Вы можете получить исходные файлы здесь.

Если вам нужно более подробное руководство, посмотрите мой полный видеоурок на YouTube Объект – это А.

Не забудьте подписаться на нас в Instagram и Twitter, чтобы быть в курсе наших последних руководств по веб-разработке.

Расширения Google OAuth2 и Chrome — получите доступ к данным Google вашего пользователя