Создание пользовательской аутентификации с использованием Appsmith и APISIX
June 5, 2023
Аутентификация является фундаментальной частью веб-приложений. Она обеспечивает безопасность и конфиденциальность данных пользователей во время использования вашего приложения. Хотя существует множество готовых решений для аутентификации, создание системы аутентификации с использованием платформы для разработки интерфейсов с низким кодом и решения для управления API позволяет легко создавать безопасные веб-приложения. Вы можете создать приложение без необходимости знания как фронтенд-, так и бэкенд-технологий и инструментов. Вам не нужно знать Python, Java, HTML, CSS или другие JavaScript-фреймворки. В этой статье вы узнаете, как создать пользовательский простой процесс входа и страницы на интерфейсе для защиты вашего приложения с использованием Appsmith, Apache APISIX и JWT.
Appsmith — это мощная платформа для разработки с низким кодом, которая позволяет пользователям легко создавать веб-приложения и дашборды. Она предоставляет визуальный интерфейс и набор готовых компонентов, что делает её доступной как для разработчиков, так и для не-разработчиков.
Цели обучения
В этой статье вы узнаете следующее:
- Как спроектировать процесс аутентификации в среде с низким кодом.
- Как настроить бэкенд-API для аутентификации с использованием APISIX.
- Как создать страницы интерфейса с использованием виджетов в Appsmith.
- Как включить аутентификацию на основе токенов.
Проектирование архитектуры аутентификации
Прежде чем приступить к реализации, важно сначала спроектировать архитектуру системы аутентификации для вашего приложения. Рассмотрите ключевые компоненты, такие как регистрация пользователей, вход, управление паролями, управление сессиями и аутентификация на основе JWT-токенов. Определите поток информации между Appsmith и APISIX, обеспечивая четкий и эффективный процесс аутентификации.
Мы собираемся создать простое мобильное приложение, которое будет иметь 3 страницы: Регистрация, Вход и Главная. Задачи делятся на две части. В первой части мы настроим бэкенд-API с использованием шлюза API Apache APISIX, который будет обрабатывать запросы на аутентификацию. Мы используем существующие конечные точки шлюза API для реализации процессов регистрации пользователей, входа и генерации токенов. Во второй части мы используем интерфейс Appsmith с готовыми компонентами для создания страниц Регистрации, Входа и Главной и, наконец, подключаем их к API для обработки отправки форм. Давайте начнем с создания этих компонентов в следующих разделах.
Часть 1: Настройка бэкенд-API для аутентификации
Мы начинаем с настройки бэкенд-API, который будет обрабатывать запросы на аутентификацию от мобильного приложения. APISIX можно использовать для обеспечения аутентификации и защиты конечных точек API. APISIX позволяет проверять учетные данные пользователей, выдавать токены аутентификации и контролировать доступ к вашим API. Интегрируя APISIX в вашу систему аутентификации для мобильных устройств, вы можете добавить дополнительный уровень безопасности и гарантировать, что только аутентифицированные пользователи смогут получить доступ к защищенным ресурсам.
Предварительные требования
- Docker используется для установки контейнеризованных etcd и APISIX.
- curl используется для отправки запросов к Admin API APISIX. Вы также можете использовать такие инструменты, как Postman, для взаимодействия с API.
Шаг 1: Установка Apache APISIX
APISIX можно легко установить и запустить с помощью следующего скрипта быстрого старта:
curl -sL https://run.api7.ai/apisix/quickstart | sh
Шаг 2: Настройка бэкенд-сервиса (upstream)
Далее мы настраиваем наш бэкенд-сервис. Для демонстрационных целей это может быть любой API-сервис, который обслуживает нашу бэкенд-логику. Вы можете заменить его на свой сервис. Я использую публичный сервер http://httpbin.org/, который случайным образом генерирует ответы. Для простоты у нас будет одна конечная точка, которая возвращает публичный IP-адрес нашей машины по адресу http://httpbin.org/ip.
Чтобы маршрутизировать запросы к бэкенд-сервису для мокового API, вам нужно настроить его, добавив upstream-сервер в Apache APISIX через Admin API.
curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d ' { "name":"Mock API upstream", "desc":"Register Mock API as the upstream", "nodes":{ "httpbin.org:80":1 } }'
Шаг 3: Создание новой конфигурации плагина
Этот шаг включает настройку плагина (с использованием объекта Plugin Config) для маршрута, который мы создадим на следующем шаге. Таким образом, APISIX включает плагин JWT для защиты наших конечных точек. Каждый раз, когда мы запрашиваем конечную точку, он проверяет учетные данные JWT в заголовке запроса.
curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d ' { "plugins":{ "jwt-auth": {} } }'
Шаг 4: Создание маршрута для бэкенд-API
Мы создаем новый объект Route в APISIX, который перехватывает все GET-запросы к URI /ip, и использует существующие конфигурации upstream и плагинов для включения механизма маршрутизации и политик аутентификации. Он проверяет наличие плагина JWT в заголовке, и если он существует и действителен, перенаправляет запрос на наш моковый сервер. В противном случае он сразу возвращает ошибку "неавторизован", и запрос не достигнет фактического сервиса.
curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d ' { "name":"Mock API server route", "desc":"Create a new route in APISIX for the mock server endpoint", "methods":[ "GET" ], "uri":"/ip", "upstream_id":"1", "plugin_config_id":1 }'
Шаг 5: Создание маршрута для подписи JWT-токена
Мы реализовали аутентификацию на основе токенов для нашего API. APISIX также может выступать в роли провайдера идентификации для генерации и проверки токенов. Для этого необходимо настроить маршрут для новой конечной точки API, которая подписывает токен с использованием плагина public-api:
curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d ' { "uri": "/login", "plugins": { "public-api": { "uri": "/apisix/plugin/jwt/sign" } } }'
Выполнив вышеуказанную команду curl, мы зарегистрировали новый маршрут с именем login и путем URI /login, который подписывает новый токен каждый раз, когда существующий пользователь пытается войти на страницу входа в мобильном приложении, используя свои электронные письма.
Часть 2: Создание форм регистрации и входа в Appsmith
Используя интерфейс с низким кодом Appsmith, мы можем создать формы регистрации и входа пользователей. Appsmith предоставляет широкий набор готовых виджетов, которые можно легко настроить. Спроектируйте формы с полями ввода для имени пользователя, пароля и любой дополнительной информации, которая вам требуется в дашборде.
Перед началом
Я пропущу часть установки Appsmith на вашем компьютере. Вы можете узнать, как установить Appsmith с использованием Docker, на сайте Appsmith. Убедитесь, что вы установили Appsmith и можете получить доступ к нему по адресу http://localhost. Когда вы развернете и запустите Appsmith, приложение с названием My first application будет добавлено по умолчанию. Вы можете использовать это приложение для создания своего первого приложения.
Шаг 1: Создание страницы регистрации
В нашем случае новый пользователь сначала регистрируется в мобильном приложении на странице регистрации. Начните с создания новой страницы с именем RegistrationPage в вашем приложении. Добавьте виджеты ввода для электронной почты (с именем EmailInput), имени пользователя (с именем UsernameInput) и пароля (PasswordInput). Также добавьте кнопки Регистрация (с именем RegisterButton) и Вход (с именем LoginButton) виджеты кнопок на доску. Конечный результат будет выглядеть следующим образом:
Когда пользователь нажимает кнопку "Зарегистрироваться" с предоставленными данными, вам понадобится запрос для обработки связи с конечной точкой Admin API APISIX, чтобы зарегистрировать нового потребителя API в шлюзе API. Создайте API-запрос (с именем APISIX_Admin_Add_Consumer_API) с конечной точкой потребителей APISIX URI /apisix/admin/consumers. Поместите текст из виджетов ввода в тело вашего запроса. Доступ к виджетам ввода должен выглядеть примерно так:
Обратите внимание, что мы используем адрес
host.docker.internalвместо localhost, потому что APISIX работает внутри своего собственного контейнера в другой сети Docker, чем Appsmith.
После отправки запроса в APISIX он регистрирует нового потребителя, и объект потребителя будет использовать плагин jwt-auth с ключом и секретом. Вы можете проверить, успешно ли зарегистрирован потребитель в системе, запросив указанного потребителя по имени пользователя appsmithuser. Выполните эту команду curl:
curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser
Существующие пользователи могут перейти непосредственно на страницу входа. Смотрите в следующем разделе.
Шаг 2: Создание страницы входа
Вернитесь на холст приложения, добавьте новую страницу с именем Login page и настройте форму входа с виджетами ввода (для ввода электронной почты пользователя) и кнопки (для входа).
Затем создайте API-запрос (с именем login_api) для маршрута входа APISIX URI пути /login и установите параметр key в {{EmailInput.text}}. Если вы протестируете запрос и нажмете кнопку запуска, при успешном ответе наша конечная точка аутентификации шлюза API должна вернуть действительный токен доступа. В примере ниже ключ jwt — это токен, который указывает, что пользователь был аутентифицирован на стороне APISIX.
Чтобы запустить запрос login_api через кнопку Вход, вам нужно установить свойство onClick запроса.
Также возможно сохранить JWT-токен в хранилище Appsmith и затем перенаправить пользователя на MainPage. Для этого вставьте следующий код в действие login_api страницы Login page в свойство onClick:
{{login_api.run(() => { const jwt = login_api?.data; if (jwt) { storeValue('jwt', jwt); navigateTo('MainPage', {}); } else { showAlert('Login failed!', 'error'); } })}}
Если пользователь не смог аутентифицироваться с APISIX, покажите сообщение об ошибке как обратный вызов, чтобы сообщить пользователю, что произошла ошибка.
Шаг 3: Создание главной страницы
Наконец, пришло время настроить MainPage мобильного приложения, чтобы разрешить доступ вошедшим пользователям и показать некоторые данные. Вы можете использовать тот же холст для создания вашего интерфейса из виджетов. Как только пользователь успешно войдет, наша логика перенаправит его на MainPage, и при первой загрузке страницы автоматически выполнит вызов API к маршруту http://127.0.0.1:9080/ip в APISIX с использованием запроса, который вы добавили (с именем main_page_data_api), и получит IP-адрес от upstream-сервера (который мы создали в Части 1 на шаге 2).
Вы можете заметить, что в заголовке Authorization значение {{appsmith.store.jwt}} — это значение jwt, которое мы сохранили в хранилище Appsmith на предыдущем шаге, и оно используется для подтверждения вашему приложению, что пользователь распознан. Если значение jwt не существует в хранилище Appsmith, мы показываем пользователю ошибку "неавторизован".
В моем случае я добавил два виджета текста на MainPage и установил значение текстового поля второго в {{main_page_data_api.data}}, что просто выводит данные из вызова main_page_data_api. Смотрите результат.
Следующие шаги
Вы также можете добавить одну Страницу неавторизованного доступа для перенаправления неавторизованных пользователей на эту страницу, показать ошибку и предложить им войти или зарегистрироваться для создания новой учетной записи. Предоставьте вашим пользователям возможность выйти из вашего приложения с помощью виджета кнопки, когда они закончат, что может помочь повысить безопасность ваших данных.
Заключение
Следуя вышеуказанным шагам, мы создали персонализированную систему аутентификации с использованием Appsmith и APISIX. Appsmith подходит для широкого спектра случаев использования, от создания внутренних инструментов и административных панелей до прототипирования и разработки полноценных приложений. С APISIX вы можете не только обеспечить аутентификацию для ваших пользователей, но и ввести дополнительные меры безопасности, такие как ограничение скорости, блокировка IP и ограничение потребителей, чтобы поддерживать безопасность нашего пользовательского решения для аутентификации.