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