Создание аутентификации Nuxt с Logto
Узнайте, как создать поток аутентификации пользователя с Nuxt, интегрировав SDK Logto.
Founder
Начало работы
Введение
- Logto - это открытая альтернатива Auth0 для создания инфраструктур идентификации. Он поддерживает различные методы входа, включая имя пользователя, электронную почту, номер телефона и популярные социальные входы, такие как Google и GitHub.
- Nuxt это открытый исходный код, который делает разработку веб-сайтов интуитивной и мощной.
В этом руководстве мы покажем вам, как создать поток аутентификации пользователей с помощью Nuxt, интегрируя Logto SDK. В руководстве используется TypeScript в качестве языка программирования.
Предварительные условия
Перед началом убедитесь, что у вас есть следующее:
- Аккаунт Logto. Если у вас его нет, вы можете зарегистрироваться бесплатно.
- Среда разработки A Nuxt и проект.
Создание приложения Logto
Чтобы начать, создайте приложени е Logto с типом "Традиционный веб". Следуйте этим шагам для создания приложения Logto:
- Войдите в Консоль Logto.
- В левой панели навигации нажмите на Приложения.
- Нажмите на Создать приложение.
- На открывшейся странице найдите раздел "Традиционный веб" и выберите карточку "Nuxt".
- Нажмите на Начать создание и введите имя вашего приложения.
- Нажмите на Создать.
Затем вы увидите интерактивное руководство, которое проведет вас через процесс интеграции Logto SDK с вашим приложением Nuxt. Следующее содержание может служить справочным материалом для будущего использования.
Интеграция SDK Logto
Установка
Установите SDK Logto через ваш любимый пакетный менеджер:
Регистрация модуля Logto
В конфигурационном файле вашего Nuxt (nuxt.config.ts), добавьте модуль Logto:
Минимальная конфигурация для модуля выглядит следующим образом:
Так как эти данные являются конфиденциальными, рекомендуется использовать переменные окружения:
Смотрите runtime config для получения дополнительной информации.
Реализуйте вход и выход
Настройка URI перенаправления
Переключитесь на страницу деталей приложения в Консоли Logto. Добавьте URI перенаправления http://localhost:3000/callback.
URI перенаправления - это концепция OAuth 2.0, которая подразумевает местоположение, куда следует перенаправить после аутентификации.
Аналогично, добавьте http://localhost:3000/ в раздел "URI перенаправления после выхода".
URI перенаправления после выхода - это концепция OAuth 2.0, которая подразумевает местоположение, куда следует перенаправить после выхода.
Затем нажмите "Сохранить", чтобы сохранить изменения.
При регистрации модуля @logto/nuxt он выполнит следующие действия:
- Добавление трех маршрутов для входа (
/sign-in), выхода (/sign-out) и обратного вызова (/callback). - Импорт двух составных частей:
useLogtoClientиuseLogtoUser.
Эти маршруты можно настроить через logto.pathnames в опциях модуля, например:
Проверьте файл определения типов в пакете @logto/nuxt для получения дополнительной информации.
Поскольку страницы Nuxt будут возобновлены и станут одностраничным приложением (SPA) после начальной загрузки, нам нужно перенаправить пользователя на маршрут входа или выхода, когда это необходимо.
Отображение информации о пользователе
Чтобы отобразить информацию пользователя, вы можете использовать useLogtoUser() composable, который доступен как на сервере, так и на стороне клиента:
Контрольная точка: Запуск приложения
Теперь вы можете запустить приложение и попробовать войти/выйти с помощью Logto:
- Откройте приложение в своем браузере, вы должны увидеть кнопку "Войти".
- Нажмите кнопку "Войти", и вы должны быть перенаправлены на страницу входа Logto.
- После входа вы должны быть перенаправлены обратно в приложение, и вы должны увидеть данные пользователя и кнопку "Выйти".
- Нажмите кнопку "Выйти", и вы должны быть перенаправлены на страницу выхода Logto, а затем обратно в приложение в состоянии без входа.
Если у вас возникнут какие-либо проблемы во время интеграции, не стесняйтесь присоединиться к нашему серверу Discord, чтобы пообщаться с сообществом и командой Logto!