Как реализовать OAuth в экспресс-приложении с помощью GitHub
Добавляйте учетные записи пользователей на свой веб-сайт без необходимости писать собственный код. Обеспечьте простой и безопасный вход в систему с помощью OAuth и GitHub.
OAuth 2.0 — это стандарт, который позволяет сторонним приложениям безопасно получать доступ к данным веб-приложений. Вы можете использовать его для получения данных, включая информацию профиля, расписания и т. д., которые размещены в других веб-приложениях, таких как Facebook, Google и GitHub. Служба может сделать это от имени пользователя, не раскрывая его учетные данные стороннему приложению.
Узнайте, как реализовать OAuth в приложении Express, используя GitHub в качестве поставщика OAuth, за несколько шагов.
Процесс OAuth
В типичном потоке OAuth ваш сайт предоставляет пользователям возможность войти в систему со своей сторонней учетной записью от такого поставщика, как GitHub или Facebook. Пользователь может начать этот процесс, нажав соответствующую кнопку входа в систему OAuth.
Это перенаправит их из вашего приложения на веб-сайт провайдера OAuth и предоставит им форму согласия. Форма согласия содержит всю информацию, которую вы хотите получить от пользователя, например, его электронную почту, фотографии, расписания и т. д.
Если пользователь авторизует ваше приложение, третья сторона перенаправит его обратно в ваше приложение с помощью кода. Затем ваше приложение может обменять полученный код на токен доступа, который затем можно использовать для доступа к доступным пользовательским данным.
Реализация этого процесса в приложении Express включает несколько шагов.
Шаг 1. Настройка среды разработки
Сначала создайте пустой каталог проекта и cd в созданный каталог.
Например:
mkdir github-app
cd github-app
Затем инициализируйте npm в своем проекте, выполнив:
npm init -y
Эта команда создает файл package.json, содержащий сведения о вашем проекте, такие как имя, версия и т. д.
В этом руководстве будет показано использование модульной системы ES6. Настройте это, открыв файл package.json и указав «type»: «module» в объекте JSON.
Шаг 2. Установка зависимостей
Для правильной работы вашего сервера вам необходимо установить несколько зависимостей:
- ExpressJS: ExpressJS — это платформа NodeJS, предоставляющая надежный набор функций для веб-приложений и мобильных приложений. Использование Express упростит процесс создания сервера.
- Axios: Axios — это HTTP-клиент на основе обещаний. Этот пакет понадобится вам для отправки POST-запроса токена доступа к GitHub.
- dotenv: dotenv — это пакет, который загружает переменные среды из файла .env в объектprocess.env. Он понадобится вам, чтобы скрыть важную информацию о вашем приложении.
Установите их, запустив:
npm install express axios dotenv
Шаг 3. Создание экспресс-приложения
Вам необходимо создать базовый сервер Express для обработки и отправки запросов к поставщику OAuth.
Сначала создайте файл index.js в корневом каталоге вашего проекта, содержащий следующее:
// index.js
import express from "express";
import axios from "axios";
import * as dotenv from "dotenv";
dotenv.config();
const app = express();
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`App is running on port ${port}`);
});
Этот код импортирует экспресс-библиотеку, создает экземпляр экспресс-экземпляра и начинает прослушивать трафик на порту 3000.
Шаг 4. Создание обработчиков маршрутов
Вам потребуется создать два обработчика маршрутов для обработки потока OAuth. Первый перенаправляет пользователя на GitHub и запрашивает авторизацию. Второй обрабатывает перенаправление обратно в ваше приложение и выполняет запрос токена доступа, когда пользователь авторизует ваше приложение.
Первый обработчик маршрута должен перенаправить пользователя на https://github.com/login/oauth/authorize?parameters.
Вам нужно будет передать набор обязательных параметров в URL-адрес OAuth GitHub, в том числе:
- Идентификатор клиента: это идентификатор, который ваше приложение OAuth получает при регистрации на GitHub.
- Область: это относится к строке, которая определяет объем доступа приложения OAuth к информации пользователя. Список доступных областей действия можно найти в документации OAuth на GitHub. Здесь вы будете использовать область «read:user», которая предоставляет доступ для чтения данных профиля пользователя.
Добавьте следующий код в файл index.js:
// index.js
app.get("/auth", (req, res) => {
// Store parameters in an object
const params = {
scope: "read:user",
client_id: process.env.CLIENT_ID,
};
// Convert parameters to a URL-encoded string
const urlEncodedParams = new URLSearchParams(params).toString();
res.redirect(`https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});
Этот код реализует первый обработчик маршрута. Он сохраняет необходимые параметры в объекте, преобразуя их в формат URL-адреса с помощью API URLSearchParams. Затем он добавляет эти параметры в URL-адрес OAuth GitHub и перенаправляет пользователя на страницу согласия GitHub.
Добавьте следующий код в файл index.js для второго обработчика маршрута:
// index.js
app.get("/github-callback", (req, res) => {
const { code } = req.query;
const body = {
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
code,
};
let accessToken;
const options = { headers: { accept: "application/json" } };
axios
.post("https://github.com/login/oauth/access_token", body, options)
.then((response) => response.data.access_token)
.then((token) => {
accessToken = token;
res.redirect(`/?token=${token}`);
})
.catch((err) => res.status(500).json({ err: err.message }));
});
Второй обработчик маршрута извлечет код, возвращенный из GitHub, в объект req.query. Затем он отправляет запрос POST с использованием Axios к https://github.com/login/oauth/access_token с кодом client_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-callback». Вы также можете дополнительно включить поток устройств, что позволит вам авторизовать пользователей для автономного приложения, такого как инструмент CLI или диспетчер учетных данных Git.
Порядок работы устройства находится на стадии общедоступной бета-версии и может быть изменен.
Наконец, нажмите кнопку Зарегистрировать приложение.
GitHub направит вас на страницу с вашим client_id и возможностью сгенерировать ваш client_secret. Скопируйте свой client_id, сгенерируйте свой client_secret и скопируйте его тоже.
Создайте файл .env и сохраните в нем client_id и client_secret. Назовите эти переменные CLIENT_ID и CLIENT_SECRET соответственно.
Теперь ваш поток OAuth завершен, и теперь вы можете отправлять запросы с токеном доступа для чтения пользовательских данных (область, указанную вами ранее).
Важность OAuth 2.0
Использование OAuth 2.0 в вашем приложении значительно упрощает задачу реализации потока аутентификации. Он защищает пользовательские данные ваших клиентов с помощью стандарта Secure Sockets Layer (SSL), гарантируя их конфиденциальность.