Как создать Full-Stack приложение для аутентификации
August 24, 2023
Большинству веб-приложений необходима функция регистрации и входа в систему. Однако для новичков это может быть сложной задачей. Даже опытные разработчики предпочитают использовать внешние сервисы для обработки аутентификации с самого начала. Когда мы говорим о полномасштабном процессе аутентификации, это означает настройку входа и регистрации пользователей на фронтенде, а также защиту API на бэкенде. Таким образом, вам нужно работать над обеими частями.
Эта статья проведет вас через создание полномасштабного приложения для аутентификации с использованием Apache APISIX, Authgear и OpenID Connect (OIDC). Исходный код проекта можно найти на GitHub. Для быстрого старта с приложением просто клонируйте репозиторий и выполните пример кода, следуя шагам, описанным в файле README.md.
Цель обучения
Этот материал призван показать всем, как настроить аутентификацию как на бэкенде, так и на фронтенде. Кроме того, он предназначен для помощи как начинающим, так и опытным разработчикам, которые хотят стать full-stack разработчиками.
Роль APISIX, Authgear и OIDC в аутентификации
Прежде чем углубиться в руководство, давайте кратко представим инструменты, которые мы будем использовать.
-
OIDC (OpenID Connect) — это простой уровень идентификации, построенный поверх протокола OAuth 2.0. Он позволяет сторонним приложениям проверять пользователей и получать основную информацию о профиле в стандартизированном формате.
-
APISIX выделяется как один из самых популярных open-source API-шлюзов. Он предназначен не только для управления API, но и для обеспечения их безопасности и защиты. Одной из самых заметных функций в его арсенале безопасности является поддержка OIDC с использованием его плагина.
-
Authgear — это высокоадаптируемая платформа identity-as-a-service (IDaaS) для веб- и мобильных приложений. Ваши пользователи могут войти в ваше приложение через встроенный интерфейс (вам не нужно создавать UI для процесса регистрации и входа пользователей), который предоставляет им безопасный, основанный на стандартах опыт входа, который вы можете настроить с вашим брендингом и различными методами аутентификации, такими как электронная почта, социальные входы, безпарольная аутентификация, биометрический вход, одноразовый пароль (OTP) с SMS/WhatsApp и многофакторная аутентификация (MFA). Он использует OpenID Connect (OIDC) и OAuth 2.0 для идентификации пользователя и предоставления доступа к защищенным ресурсам.
Процесс аутентификации
Вот высокоуровневая архитектурная диаграмма, показывающая, как выглядит процесс аутентификации:
Шаги, показанные на диаграмме, подробно описаны ниже:
На диаграмме выше Клиент — это любое веб-приложение, API Gateway — это APISIX, а Identity provider — это Authgear, и Upstream — это бэкенд API.
- Веб-приложение может принимать различные формы, от одностраничных приложений (SPA), созданных с использованием React, Vue или Angular, до стандартных веб-приложений, созданных с использованием фреймворков, таких как Express, NextJS и подобных платформ. Веб-приложение — это наш клиентский фронтенд, который отправляет запрос к Identity Provider (Authgear) с client Id и client secret для получения токена доступа, такого как JSON Web Tokens (JWT).
- Если предоставленные учетные данные верны, Authgear отвечает JWT-токеном веб-приложению. Вы можете создать столько пользователей для вашего приложения в Authgear portal, и пользователи могут войти, используя UI страницы, размещенные Authgear.
- После получения JWT-токена клиент отправляет запрос к API Gateway (APISIX) с токеном доступа, и бэкенд API защищен шлюзом.
- Прежде чем обработать запрос, APISIX должен убедиться, что предоставленный токен действителен, не истек и имеет правильные области для запрашиваемых данных или сервиса. Если APISIX не может локально проверить токен, он отправляет запрос на интроспекцию токена на сервер авторизации Authgear. Этот запрос обычно делается к конечной точке
introspectionсервера. - Authgear получает запрос на интроспекцию и обрабатывает его. Сервер проверяет свои записи, чтобы определить действительность токена, его срок действия и связанные области, и после определения состояния токена отвечает APISIX.
- На основе ответа Authgear на интроспекцию токена APISIX может принять обоснованное решение. Если токен действителен, он пересылает запрос на бэкенд API, в противном случае отклоняет запрос клиента с кодом состояния HTTP, указывающим на отсутствие авторизации.
- APISIX отправляет ответ от бэкенд API с запрошенными ресурсами.
Полномасштабное приложение для аутентификации с APISIX, Authgear и OIDC.
Для демонстрационного проекта мы использовали Docker для установки и запуска 3 компонентов (бэкенд, API Gateway и фронтенд) одной командой. Мы использовали ExpressJS для фронтенд веб-приложения, разместив наше одностраничное приложение на localhost:3000. APISIX Gateway доступен на localhost:9080, а наш бэкенд API (это может быть любой API, который вы создаете с использованием Python, Java, NodeJS и т.д.) настроен на localhost:9081.
Предварительные требования
Прежде чем начать, вам понадобится следующее:
- Бесплатный аккаунт Authgear. Зарегистрируйтесь, если у вас его еще нет.
- Docker используется для установки всех сервисов.
Настройка Authgear
Чтобы использовать сервисы Authgear, вам нужно настроить приложение в Dashboard Authgear и получить информацию о клиенте OIDC Authgear. Эта настройка позволяет пользователям в Authgear автоматически входить в веб-приложение после их аутентификации в Authgear.
Шаг 1: Создание приложения в Authgear
Чтобы настроить приложение, перейдите в Authgear Portal UI и выберите Applications на левой панели навигации. Используйте интерактивный селектор для создания нового Authgear OIDC Client application.
Шаг 2: Копирование учетных данных приложения
Каждому приложению в Authgear присваивается уникальный буквенно-цифровой CLIENT ID и CLIENT Secret, которые ваш код приложения будет использовать для вызова API Authgear в веб-приложении. Запишите сгенерированные Authgear ISSUER (например, https://example-auth.authgear-apps.com), CLIENT ID, CLIENT SECRET из вывода. Вы будете использовать эти значения на следующем шаге для настройки веб-приложения.
Шаг 3: Настройка Redirect URI
Authorized Redirect URI вашего приложения — это URL, на который Authgear перенаправит после аутентификации пользователя, чтобы OpenID Connect middleware завершил процесс аутентификации. В нашем случае это будет домашняя страница для нашего фронтенда, и она будет работать на http://localhost:3000.
Установите следующий http://localhost:3000 в поле Authorized Redirect URIs. Если это не установлено, пользователи не будут возвращены в ваше приложение после входа.
Шаг 4: Включение Access Token
Также включите опцию Issue JWT as an access token в разделе Access Token конфигурации приложения:
Шаг 5: Выбор метода входа
После создания Authgear app выберите, как пользователи должны аутентифицироваться на странице входа. На вкладке Authentication перейдите в Login Methods, вы можете выбрать метод входа из различных вариантов, включая вход по электронной почте, мобильному телефону или через социальные сети, просто с использованием имени пользователя или пользовательского метода, который вы укажете. Для этой демонстрации мы выбрали подход Email+Passwordless, где наши пользователи должны зарегистрировать аккаунт и войти, используя свои электронные письма. Они получат одноразовый пароль (OTP) на свои электронные письма и подтвердят код, чтобы использовать приложение.
Настройка и запуск демонстрационного проекта
После успешной настройки Authgear теперь мы можем клонировать репозиторий GitHub, настроить переменные окружения и запустить сервисы:
Начните с клонирования проекта на ваш локальный компьютер:
git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git
Сделайте директорию проекта текущей рабочей директорией:
cd apisix-authgear-oidc-full-stack-auth
В корневой директории вашего проекта, где находится файл Docker compose yaml, создайте файл .env со следующими переменными окружения:
CLIENT_ID={AUTHGEAR_APP_CLIENT_ID} CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET} ISSUER={AUTHGEAR_ISSUER} REDIRECT_URI=http://localhost:3000
Замените значения в скобках настройками вашего приложения Authgear из раздела Настройка Authgear выше, такими как Issuer, ClientId, ClientSecret.
После добавления файла окружения выполните команду docker compose up из корневой директории.
Тестирование процесса аутентификации
Для демонстрации мы использовали Docker для установки и запуска 3 компонентов (бэкенд, API Gateway и фронтенд) одной командой. Мы использовали ExpressJS для фронтенд веб-приложения, разместив наше одностраничное приложение на localhost:3000. APISIX Gateway доступен на localhost:9080, а наш бэкенд API (это может быть любой API, который вы создаете с использованием Python, Java, NodeJS и т.д.) настроен на localhost:9081.
После регистрации с использованием вашей электронной почты вы получите одноразовый пароль (OTP):
После аутентификации вам разрешено запрашивать ресурсы API, и вы получаете ответ от бэкенд сервиса:
APISIX обеспечил OIDC аутентификацию с Authgear и предоставил безопасный и упрощенный процесс аутентификации с легкой настройкой.
Следующие шаги
Это сочетание инструментов, которые мы использовали, обеспечило безопасность, позволяя разработчикам сосредоточиться на основной бизнес-логике вместо сложностей процесса аутентификации. Теперь, когда у вас включена функция аутентификации, вы можете начать создавать свой UI для домашней страницы, показывать данные из API и разрабатывать другие страницы.