Решение для аутентификации полного стека с Logto на Netlify: Защита веб-приложений и serverless-функций
Показывает, как обезопасить Netlify веб-приложения и serverless-функции с помощью аутентификации Logto, включая примеры исходного кода и предварительный просмотр живой демонстрации.
YijunDeveloper
Хватит тратить недели на аутентификацию пользователей
Запускайте безопасные приложения быстрее с Logto. Интегрируйте аутентификацию пользователей за считанные минуты и сосредоточьтесь на вашем основном продукте.
Netlify — мощная платформа для развертывания и хостинга современных веб-проектов, предлагающая бесшовную Git-интеграцию, автоматизированные сборки и serverless-функции для быстрого и масштабируемого рабочего процесса разработки.
В этом подробном руководстве вы узнаете, как:
Реализовать аутентификацию в одностраничном приложении (SPA) с использованием Logto на Netlify, показанном на примере Vite + React
Защитить ваши serverless-функции Netlify с помощью аутентификации Logto
Развернуть готовое к производству приложение, используя нашу референсную реализацию: example-vite-react-logto
Конечную точку 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 в корне вашего проекта:
Теперь наша маршрутизация должна правильно работать.
Функции 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:
Теперь, когда у нас есть backend API, нам нужно убедиться, что только аутентифицированные пользователи могут получить к нему доступ. Мы защитим наши функции Netlify с помощью механизма аутентификации Logto.
Чтобы защитить наши конечные точки API:
Создайте API-ресурс в консоли Logto для представления нашего backend API:
Перейдите к "API Resources" в консоли Logto и создайте новый API
Установите имя и идентификатор API (например, https://api.backend.com)
Запишите идентификатор API на странице с деталями API, так как он потребуется нам позже
Настройте ваше приложение на использование этого API-ресурса, добавив идентификатор в переменные среды Netlify:
Обновите вашу конфигурацию Logto, чтобы включить этот API-ресурс:
При отправке запросов к защищённым конечным точкам ваш фронтенд должен включать действительный токен доступа. Вот как запросить и использовать его:
Теперь давайте реализуем проверку токена в нашем бекенде, чтобы гарантировать, что обрабатываются только запросы с действительными токенами доступа.
Для начала нам нужно установить зависимость jose, чтобы помочь нам проверить JWT-токен:
Затем мы можем реализовать проверку токена в нашем бекенде:
Теперь давайте обновим нашу функцию Netlify для использования функции verifyLogtoToken:
Вот и все! Теперь наша функция Netlify защищена Logto, и обрабатываться будут только запросы с действительными токенами доступа.
Это руководство демонстрирует, как интегрировать аутентификацию Logto в веб-приложение, развернутое на Netlify.
Настроив приложения Logto и API ресурсы, мы реализовали аутентификацию фронтенда и защитили конечные точки функций Netlify.
Для более тонкого контроля доступа вы можете использовать функции Logto RBAC (управление доступом на основе ролей), определяя роли и разрешения в консоли Logto и проверяя роли пользователей в функциях Netlify.
