OAuth 2.0 — это стандарт, который позволяет сторонним приложениям безопасно получать доступ к данным из веб-приложений. Вы можете использовать его для получения данных, включая информацию о профиле, расписания и т. д. который размещен в других веб-приложениях, таких как Facebook, Google и GitHub. Служба может делать это от имени пользователя, не раскрывая его учетные данные стороннему приложению.
Узнайте, как реализовать OAuth в приложении Express, используя GitHub в качестве поставщика OAuth, выполнив несколько шагов.
Поток OAuth
В типичном потоке OAuth ваш сайт предоставляет пользователям возможность войти в систему со своей сторонней учетной записью от поставщика, такого как GitHub или Facebook. Пользователь может начать этот процесс, нажав соответствующую кнопку входа в систему OAuth.
Это перенаправляет их из вашего приложения на веб-сайт поставщика OAuth и предоставляет им форму согласия. Форма согласия содержит всю информацию, которую вы хотите получить от пользователя, это могут быть его электронные письма, изображения, расписания и т. д.
Если пользователь авторизует ваше приложение, третья сторона перенаправит его обратно в ваше приложение с кодом. Затем ваше приложение может обменять полученный код на токен доступа, который затем можно использовать для доступа к доступным пользовательским данным.
Реализация этого потока в приложении Express включает несколько шагов.
Шаг 1: Настройка среды разработки
Сначала создайте пустой каталог проекта и CD в созданный каталог.
Например:
mkdir github-приложение
CD github-приложение
Затем инициализируйте npm в своем проекте, выполнив:
инициализация npm -y
Эта команда создает пакет.json файл, содержащий сведения о вашем проекте, такие как имя, версия и т. д.
В этом руководстве будет показано использование модульной системы ES6. Настройте это, открыв свой пакет.json файл и указав "тип": "модуль" в JSON-объекте.
Шаг 2: Установка зависимостей
Вам нужно будет установить несколько зависимостей для правильной работы вашего сервера:
- ExpressJS: ExpressJS — это платформа NodeJS, предоставляющая надежный набор функций для веб-приложений и мобильных приложений. Использование Express упростит процесс создания вашего сервера.
- Axios: Axios — это HTTP-клиент на основе обещаний. Этот пакет понадобится вам для выполнения POST-запроса токена доступа к GitHub.
- dotenv: dotenv — это пакет, который загружает переменные среды из файла .env в объект process.env. Он понадобится вам, чтобы скрыть важную информацию о вашем приложении.
Установите их, запустив:
нпм установить экспресс аксиос dotenv
Шаг 3: Создание экспресс-приложения
Тебе следует создать базовый экспресс-сервер для обработки и выполнения запросов к провайдеру OAuth.
Сначала создайте index.js файл в корневом каталоге вашего проекта, содержащий следующее:
// index.js
импорт выражать из "выражать";
импорт аксиомы из «аксиос»;
импорт * в качестве дотенв из "дотенв";
дотенв.config();константа приложение = экспресс();
константа порт = процесс.env. ПОРТ || 3000
app.listen (порт, () => {
приставка.журнал(`Приложение работает на порту ${порт}`);
});
Этот код импортирует экспресс-библиотеку, создает экземпляр экспресс-экземпляра и начинает прослушивать трафик на порту. 3000.
Шаг 4: Создание обработчиков маршрутов
Вам потребуется создать два обработчика маршрутов для обработки потока OAuth. Первый перенаправляет пользователя на GitHub и запрашивает авторизацию. Второй обрабатывает перенаправление обратно в ваше приложение и делает запрос маркера доступа, когда пользователь авторизует ваше приложение.
Первый обработчик маршрута должен перенаправить пользователя на https://github.com/login/oauth/authorize? параметры.
Вам нужно будет передать набор обязательных параметров URL-адресу GitHub OAuth, в том числе:
- Идентификатор клиента: это идентификатор, который ваше приложение OAuth получает при регистрации на GitHub.
- Область действия: это относится к строке, которая указывает объем доступа, который приложение OAuth имеет к информации пользователя. Вы можете найти список доступных областей в Документация GitHub по OAuth. Здесь вы будете использовать “читать: пользователь», которая предоставляет доступ для чтения данных профиля пользователя.
Добавьте следующий код в свой index.js файл:
// index.js
приложение.получить("/auth", (треб., реш.) => {
// Сохраняем параметры в объекте
константа параметры = {
сфера: "читать: пользователь",
ID клиента: процесс.env.ID КЛИЕНТА,
};
// Преобразование параметров в строку в кодировке URL
константа URLEncodedParams = новый URLSearchParams (params).toString();
res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});
Этот код реализует первый обработчик маршрута. Он сохраняет необходимые параметры в объекте, преобразовывая их в формат с кодировкой URL с помощью API URLSearchParams. Затем он добавляет эти параметры в URL-адрес OAuth GitHub и перенаправляет пользователя на страницу согласия GitHub.
Добавьте следующий код в свой index.js файл для второго обработчика маршрута:
// index.js
приложение.получить("/github-callback", (треб., реш.) => {
константа { код } = req.query;константа тело = {
ID клиента: процесс.env.ID КЛИЕНТА,
client_secret: процесс.env.CLIENT_SECRET,
код,
};позволять токен доступа;
const options = { заголовки: { принимаем: "приложение/json" } };
аксиомы
.почта("https://github.com/login/oauth/access_token", кузов, опции)
.тог((ответ) => ответ.данные.access_token)
.затем((токен) => {
AccessToken = токен;
res.redirect(`/?токен=${токен}`);
})
.ловить((ошибка) => res.status(500).json({ошибка: ошибка.сообщение}));
});
Второй обработчик маршрута извлечет код вернулся с GitHub в req.query объект. Затем он делает POST запрос с использованием Аксиос к " https://github.com/login/oauth/access_token" с кодом, ID клиента, а также client_secret.
В client_secret — это частная строка, которую вы создаете при создании приложения GitHub OAuth. Когда access_token успешно извлечен, он сохраняется в переменной для последующего использования. Наконец, пользователь перенаправляется в ваше приложение с access_token.
Шаг 5: Создание приложения GitHub
Далее вам нужно создать приложение OAuth на GitHub.
Сначала войдите в свою учетную запись GitHub, затем перейдите на Настройки, прокрутите вниз до Настройки разработчикаи выберите Приложения OAuth. Наконец, нажмите «Зарегистрировать новое приложение.”
GitHub предоставит вам новую форму приложения OAuth, подобную этой:
Заполните необходимые поля желаемыми данными. “URL домашней страницы" должно быть " http://localhost: 3000”. Ваш "URL-адрес обратного вызова для авторизации" должно быть " http://localhost: 3000/github-обратный вызов». Вы также можете дополнительно включить поток устройств, что позволит вам авторизовать пользователей для автономного приложения, такого как инструмент командной строки или менеджер учетных данных Git.
Поток устройств находится в общедоступной бета-версии и может быть изменен.
Наконец, нажмите на Зарегистрировать приложение кнопка.
GitHub направит вас на страницу с вашим ID клиента и возможность создать свой client_secret. Скопируйте свой ID клиента, создайте свой client_secret, и скопируйте его тоже.
Создайте файл .env и хранить ID клиента а также client_secret внутри него. Назовите эти переменные CLIENT_ID и CLIENT_SECRET соответственно.
Теперь ваш поток OAuth завершен, и теперь вы можете отправлять запросы с токеном доступа для чтения пользовательских данных (т. сфера вы указали ранее).
Важность OAuth 2.0
Использование OAuth 2.0 в вашем приложении значительно упрощает задачу реализации потока проверки подлинности. Он защищает пользовательские данные ваших клиентов с помощью стандарта Secure Sockets Layer (SSL), гарантируя, что они останутся конфиденциальными.
