Система входа в систему расширения Google OAuth2 / OpenID для Chrome

Не создавайте собственную систему аутентификации; используйте Google OAuth2 для расширения Google Chrome

В этом руководстве используется стандартная установка расширения Google Chrome.

Если вы хотите узнать, как выполнить эту настройку,
ознакомьтесь с моими описаниями здесь:

Как работает расширение Chrome? (Веб-разработка)
Расширение Chrome состоит из пяти частей: medium.com

Или видеоурок здесь:

Прежде чем мы даже коснемся строчки кода, нам нужно настроить нашу рабочую область разработки так, чтобы у нас была возможность делать две основные вещи:

Предоставление нашему конкретному расширению Chrome возможности использовать API и службы Google.
Получите возможность взаимодействовать с конечной точкой OAuth2 Google.

Давай начнем.

Сначала нам нужно «зарегистрировать» наше расширение Chrome в магазине Google. Есть два способа сделать это: мы либо официально загружаем наше расширение Chrome в Google Chrome Store и получаем уникальное значение ключа для нашего расширения, либо мы «поддельный Зарегистрируйте »наше расширение в браузере Google Chrome и получите таким образом уникальный ключ. Поскольку мы не хотим загружать расширение для разработки в общедоступный магазин, мы выберем последний метод.

Перейдите к адресу «chrome: // extensions» в своем браузере Chrome.
Нажмите «Pack Extension» и выберите расположение вашего расширения Chrome.
В результате в каталоге над расположением расширения Chrome будут созданы два файла: 'crx' и 'pem'; нас интересует файл crx.
Перетащите файл crx в папку « chrome: // extensions ». Должен появиться запрос на добавление расширения, нажмите «Да».

Теперь перейдите туда, где находятся ваши расширения Chrome.
Для пользователей MacOS и Linux все будет по-другому, но для пользователей Windows вам нужно что-то вроде,

«C: \ Users \‹ Ваше имя пользователя ›\ AppData \ Local \ Google \ Chrome \ User Data \ Default \ Extensions»

Мы ищем папку с тем же именем, что и ваш идентификатор расширения Chrome. Этот идентификатор можно найти на странице «chrome: // extensions». Найдите атрибут «ID».

Войдите в папку с тем же именем, что и ваше расширение Chrome, войдите в папку с номером версии и откройте файл «manifest.json». Скопируйте атрибут «ключ».

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

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

Примечание.
Нам требуется разрешение identity.
Мы также используем 'jsrsasign-all-min.js ', чтобы помочь нам справиться с JWT (веб-токен JSON).
Вы можете найти это здесь: https://github.com/kjur/jsrsasign/releases/

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

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

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

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

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

Затем нажмите ссылку «Учетные данные» слева.
Нажмите «Создать учетные данные» вверху страницы и выберите «OAuth Идентификатор клиента ».
Установите« Тип приложения »на« Веб-приложение », а не« Приложение Chrome ». .
Введите в поле «Имя» все, что хотите, затем нажмите «Добавить URI» внизу экрана ( URI перенаправления).
URI должен соответствовать шаблону,

«https: // ‹chrome-ext-id› .chromiumapp.org /»

«chrome-ext-id» - это то же самое, что и на странице «chrome: // extensions».
Нажмите «Создать ».

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

Давай авторизуемся.

Чтобы продемонстрировать вход в систему, мы просто разместим кнопку на странице «popup.html» и прикрепим «popup-script.js».

// popup.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 300px;
            height: auto;
        }
div {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 50%;
            height: 25%;
            padding: 5px;
            font-size: 2.5em;
            background-color: red;
            border-radius: 5px;
            text-align: center;
            color: white;
            font-family: monospace;
            font-weight: bold;
            margin-bottom: 15px;
            cursor: pointer;
            transition-duration: 0.3s;
        }
div:hover {
            background-color: black;
            transform: translateX(-50%) scale(1.3);
        }
    </style>
</head>
<body>
    <h1>Sign-In With Your Google Account to Use This Extension</h1>
    <div id='sign-in'>Sign In</div>
    <button>User Status</button>
    <script src="./popup-script.js"></script>
</body>
</html>

Когда пользователь нажимает кнопку, мы отправляем сообщение нашему скрипту «background.js», чтобы инициировать стороннюю аутентификацию Google.

// popup-script.js
document.querySelector('#sign-in')
  .addEventListener('click', function () {
     chrome.runtime.sendMessage({ message: 'login' }, function 
       (response) {
         if (response === 'success') window.close();
     });
});
document.querySelector('button')
  .addEventListener('click', function () {
     chrome.runtime.sendMessage({ message: 'isUserSignedIn' }, 
       function (response) {
         alert(response);
    });
});

Чтобы наши пользователи могли входить в систему со своей учетной записью Google, мы используем API launchWebAuthFlow ().
Он позволяет нам запрашивать конечную точку Google OAuth2, « https: // accounts.google.com/o/oauth2/v2/auth '.

Нам нужно отправить 7 параметров запроса в кодировке URI с URL-адресом:

1. client_id: это идентификатор клиента OAuth2, предоставленный консолью разработчика Google
2. response_type: нам нужен ' id_token 'от Google
3. redirect_uri: как только пользователь вошел в свою учетную запись Google, нам нужно сообщить Google, куда перенаправить пользователя (обратно в наш Chrome Extension)
4. scope: мы должны сообщить конечной точке, что мы хотим делать с пользователем
5. state: используется случайная строка в целях безопасности
6. подсказка: убедитесь, что на экране отображается «подсказка», позволяющая пользователю войти в систему с учетной записью Google.
7. nonce : случайная строка, используемая в целях безопасности

Получив эту информацию, мы можем создать URL-адрес и запустить его в «launchWebAuthFlow ()».

Примечание.
1. Мы удаляем 'id_token из URL-адреса, переданного нам в обратном вызове' launchWebAuthFlow () '.

2. Мы можем проверить, что значение свойства "user_info.iss" является одним из двух возможных доменов Google и что "user_info.aud" совпадает с клиентом OAuth2. ID.
Эта проверка на самом деле не нужна, поскольку Google гарантирует, что токен не был подделан.

3. Мы отслеживаем статус входа пользователя в переменной «user_signed_in» на нашей стороне (background.js).

Если пользователь успешно входит в систему, мы переключаем страницу «popup.html» на страницу
«popup-signed-in.html».

// popup-signed-in.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 300px;
            height: auto;
        }
div {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 50%;
            height: 25%;
            padding: 5px;
            font-size: 2.5em;
            background-color: red;
            border-radius: 5px;
            text-align: center;
            color: white;
            font-family: monospace;
            font-weight: bold;
            margin-bottom: 15px;
            cursor: pointer;
            transition-duration: 0.3s;
        }
div:hover {
            background-color: black;
            transform: translateX(-50%) scale(1.3);
        }
    </style>
</head>
<body>
    <h1>Successfully Signed-In</h1>
    <div id='sign-out'>Sign Out</div>
    <button>User Status</button>
    <script src="./popup-signed-in-script.js"></script>
</body>
</html>

Это позволяет пользователю «выйти».

// popup-signed-in-script.js
document.querySelector('#sign-out').addEventListener('click', function () {
    chrome.runtime.sendMessage({ message: 'logout' }, function (response) {
        if (response === 'success') window.close();
    });
});
document.querySelector('button').addEventListener('click', function () {
    chrome.runtime.sendMessage({ message: 'isUserSignedIn' }, function (response) {
        alert(response);
    });
});

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

Если вам нужно более подробное руководство, посмотрите мой полный видеоурок на YouTube An Object Is A.

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

Система входа в систему расширения Google OAuth2 / OpenID для Chrome

В этом руководстве используется стандартная установка расширения Google Chrome.

Прежде чем мы даже коснемся строчки кода, нам нужно настроить нашу рабочую область разработки так, чтобы у нас была возможность делать две основные вещи:

Давай начнем.

Давай авторизуемся.

Как использовать вход в Google с расширениями Chrome | OAuth2 / OpenID Connect

Вопросы по теме