Узнайте, как создать поток аутентификации пользователя с помощью SvelteKit, интегрировав SDK Logto.
В этом руководстве мы покажем вам, как создать поток аутентификации пользователей с помощью SvelteKit, интегрируя Logto SDK. В руководстве используется TypeScript в качестве языка программирования.
Перед началом убедитесь, что у вас есть следующее:
Чтобы начать, создайте приложение Logto с типом "Традиционный веб". Следуйте этим шагам для создания приложения Logto:
Затем вы увидите интерактивное руководство, которое проведет вас через процесс интеграции Logto SDK с вашим приложением SvelteKit. Следующее содержание может служить справочным материалом для будущего использования.
Установите SDK Logto через ваш любимый менеджер пакетов:
В вашем файле hooks.server.ts добавьте следующий код, чтобы внедрить крюк Logto в ваш сервер:
Так как эта информация считается конфиденциальной, рекомендуется использовать переменные окружения:
Если у вас есть несколько крюков, вы можете использовать помощник функции sequence() для их объединения:
Теперь вы можете получить доступ к клиенту Logto в объекте locals. Для TypeScript вы можете добавить тип в app.d.ts:
Мы обсудим объект user позже.
Переключитесь на страницу деталей приложения в Консоли Logto. Добавьте URI перенаправления http://localhost:3000/callback.
URI перенаправления - это концепция OAuth 2.0, которая подразумевает местоположение, куда следует перенаправить после аутентификации.
Аналогично, добавьте http://localhost:3000/ в раздел "URI перенаправления после выхода".
URI перенаправления после выхода - это концепция OAuth 2.0, которая подразумевает местоположение, куда следует перенаправить после выхода.
Затем нажмите "Сохранить", чтобы сохранить изменения.
Вернитесь в свое приложение, на странице, где вы хотите реализовать вход и выход из системы, определите следующие действия:
Затем используйте эти действия в вашем компоненте Svelte:
Чтобы отобразить информацию о пользователе, вы можете внедрить объект locals.user в макет, делая его доступным для всех страниц:
В вашем компоненте Svelte:
Теперь вы можете запустить приложение и попробовать войти/выйти с помощью Logto:
Если у вас возникнут какие-либо проблемы во время интеграции, не стесняйтесь присоединиться к нашему серверу Discord, чтобы пообщаться с сообществом и командой Logto!