Решение для аутентификации полного стека с Logto на Netlify: Защита веб-приложений и serverless-функций

Netlify — мощная платформа для развертывания и хостинга современных веб-проектов, предлагающая бесшовную Git-интеграцию, автоматизированные сборки и serverless-функции для быстрого и масштабируемого рабочего процесса разработки.

В этом подробном руководстве вы узнаете, как:

• Реализовать аутентификацию в одностраничном приложении (SPA) с использованием Logto на Netlify, показанном на примере Vite + React
• Защитить ваши serverless-функции Netlify с помощью аутентификации Logto
• Развернуть готовое к производству приложение, используя нашу референсную реализацию: example-vite-react-logto

Проверьте онлайн-демонстрацию.

Предварительные условия#

Перед началом этого руководства вам потребуется следующее:

• Аккаунт Netlify
• Аккаунт Logto Cloud или самостоятельно размещённый экземпляр Logto

Создание приложения React с Vite#

Следуйте руководству по началу работы с Vite, чтобы создать приложение React.

Согласно руководству по созданию, выберите желаемую технологическую основу. В этой статье мы выберем React + TypeScript.

Затем войдите в корневую директорию проекта, установите зависимости в соответствии с руководством и запустите приложение.

Развертывание приложения с использованием Netlify#

Следуйте руководствам по началу работы с Netlify, чтобы развернуть ваше приложение.

После того, как вы развернули свое приложение, вы сможете увидеть живой сайт по адресу https://<your-site-name>.netlify.app.

Запомните этот URL, так как он потребуется нам позже для конфигурации Logto.

Интеграция Logto в ваше приложение#

Чтобы начать работу с аутентификацией Logto:

1. Перейдите на страницу "Приложения" в консоли Logto
2. Создайте новое приложение
   • Выберите свой frontend-фреймворк (в нашем примере React)
   • Примечание: вы можете создать любое одностраничное приложение (SPA) или нативное приложение в зависимости от ваших потребностей
3. Следуйте руководству по интеграции, представленному в:
   • Встроенном руководстве консоли Logto или
   • Официальном руководстве по интеграции аутентификации React
4. Со страницы с деталями приложения запишите:
   • Ваш идентификатор приложения
   • Конечную точку Logto (можно найти в разделе "Точки и учетные данные", обычно в формате https://<your-instance>.logto.app/) Эти учетные данные потребуются на следующих этапах.

Обратите внимание, что в нашей демонстрации мы используем маршрут /callback для обработки переадресации Sign-in Logto. Переадресация URI в Logto должна быть настроена как https://<your-site-name>.netlify.app/callback. После выхода пользователей мы возвращаемся на домашнюю страницу, поэтому указываем, что URI перенаправления после выхода — https://<your-site-name>.netlify.app.

Затем укажите информацию нашего созданного приложения Logto в переменных среды Netlify (Ваш веб-сайт -> конфигурация сайта -> Переменные среды):

Затем используем эти настройки в нашем фронтенд-проекте:

Окончательный интегрированный код можно увидеть здесь: example-vite-react-logto.

Обратите внимание, что при развертывании в Netlify и входе через Logto наш URL-адрес не перенаправляется автоматически на нашу страницу Callback. Это связано с тем, что Netlify по умолчанию не поддерживает маршрутизацию на стороне клиента для одностраничных приложений (SPA).

Когда вы переходите по путям, таким как /callback, Netlify будет пытаться найти соответствующие файлы на сервере вместо того, чтобы перенаправить запрос на ваше React-приложение.

На данном этапе нам потребуется создать файл _redirects в публичной директории вашего Netlify-проекта, чтобы указать Netlify перенаправлять все запросы на ваш index.html:

В качестве альтернативы вы можете создать файл netlify.toml в корне вашего проекта:

Теперь наша маршрутизация должна правильно работать.

Создание backend API с помощью функций Netlify#

Функции Netlify предоставляют простой, но мощный способ создания backend API. С помощью функций Netlify мы можем писать серверную логику, не беспокоясь о традиционной конфигурации и обслуживании серверов.

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

Давайте начнем создавать наш backend API с использованием функций Netlify.

Сначала нам нужно создать директорию functions в директории проекта netlify, затем создать файл hello.ts:

Когда мы перейдем по адресу https://<your-site-name>.netlify.app/.netlify/functions/hello, эта функция будет вызвана и вернет "Hello world!".

Если вы думаете, что путь /.netlify/functions/hello выглядит немного странно, вы можете настроить перенаправление для вызова функции, добавив правило перенаправления в файл public/_redirects:

Таким образом, когда мы посещаем https://<your-site-name>.netlify.app/api/hello, будет вызвана наша функция и возвращено "Hello world!". Это на самом деле типичный способ создания API с использованием функций Netlify.

И мы можем получить доступ к этому API в нашем фронтенд-проекте, используя fetch:

Защита ваших функций Netlify с помощью Logto#

Теперь, когда у нас есть backend API, нам нужно убедиться, что только аутентифицированные пользователи могут получить к нему доступ. Мы защитим наши функции Netlify с помощью механизма аутентификации Logto.

Чтобы защитить наши конечные точки API:

1. Создайте API-ресурс в консоли Logto для представления нашего backend API:

• Перейдите к "API Resources" в консоли Logto и создайте новый API
• Установите имя и идентификатор API (например, https://api.backend.com)
• Запишите идентификатор API на странице с деталями API, так как он потребуется нам позже

2. Настройте ваше приложение на использование этого API-ресурса, добавив идентификатор в переменные среды Netlify:

3. Обновите вашу конфигурацию Logto, чтобы включить этот API-ресурс:

4. При отправке запросов к защищённым конечным точкам ваш фронтенд должен включать действительный токен доступа. Вот как запросить и использовать его:

Теперь давайте реализуем проверку токена в нашем бекенде, чтобы гарантировать, что обрабатываются только запросы с действительными токенами доступа.

Для начала нам нужно установить зависимость jose, чтобы помочь нам проверить JWT-токен:

Затем мы можем реализовать проверку токена в нашем бекенде:

Теперь давайте обновим нашу функцию Netlify для использования функции verifyLogtoToken:

Вот и все! Теперь наша функция Netlify защищена Logto, и обрабатываться будут только запросы с действительными токенами доступа.

Тестирование нашей демонстрации#

Теперь разверните ваше приложение в Netlify и протестируйте его! Вы можете обратиться к онлайн-просмотру демонстрации здесь.

1. Перейдите на живой сайт по адресу https://<your-site-name>.netlify.app
2. Нажмите кнопку "Sign in" в навигационной панели
3. Войдите с учетной записью пользователя Logto, и вы увидите, что вы вошли в систему.
4. Нажмите на вкладку "Protected Resource" в навигационной панели, и вас перенаправит на защищенную страницу.
5. Нажмите кнопку "View Protected Resource", и вы увидите ответ данные от конечной точки api/hello.
6. Нажмите кнопку "Sign out" в навигационной панели, и вас перенаправит на домашнюю страницу.

Заключение#

Это руководство демонстрирует, как интегрировать аутентификацию Logto в веб-приложение, развернутое на Netlify.

Настроив приложения Logto и API ресурсы, мы реализовали аутентификацию фронтенда и защитили конечные точки функций Netlify.

Для более тонкого контроля доступа вы можете использовать функции Logto RBAC (управление доступом на основе ролей), определяя роли и разрешения в консоли Logto и проверяя роли пользователей в функциях Netlify.