Узнайте, как создать поток аутентификации пользователя с Nuxt, интегрировав SDK Logto.
В этом руководстве мы покажем вам, как создать поток аутентификации пользователей с помощью Nuxt, интегрируя Logto SDK. В руководстве используется TypeScript в качестве языка программирования.
Перед началом убедитесь, что у вас есть следующее:
Чтобы начать, создайте приложение Logto с типом "Традиционный веб". Следуйте этим шагам для создания приложения Logto:
Затем вы увидите интерактивное руководство, которое проведет вас через процесс интеграции Logto SDK с вашим приложением Nuxt. Следующее содержание может служить справочным материалом для будущего использования.
Установите SDK Logto через ваш любимый пакетный менеджер:
В конфигурационном файле вашего Nuxt (nuxt.config.ts), добавьте модуль Logto:
Минимальная конфигурация для модуля выглядит следующим образом:
Так как эти данные являются конфиденциальными, рекомендуется использовать переменные окружения:
Смотрите runtime config для получения дополнительной информации.
Переключитесь на страницу деталей приложения в Консоли 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:
Если у вас возникнут какие-либо проблемы во время интеграции, не стесняйтесь присоединиться к нашему серверу Discord, чтобы пообщаться с сообществом и командой Logto!