Принесите свой собственный интерфейс входа в Logto Cloud

Предпосылки#

Logto предоставляет коробочное решение для интерфейса входа, которое охватывает все функции Logto, включая вход, регистрацию, восстановление пароля, единый вход (SSO) и многое другое. Пользователи также могут настраивать внешний вид интерфейса входа с помощью нашей функции "Custom CSS".

Однако некоторые пользователи все же хотят глубоко настроить свой интерфейс входа (как UI, так и авторизационные потоки), чтобы соответствовать своему бренду и специфическим бизнес-требованиям. Мы вас услышали! И мы рады сообщить, что функция "Bring your own UI" теперь доступна в Logto Cloud.

В этом уроке мы проведем вас через шаги по созданию и развертыванию вашего собственного интерфейса входа в Logto Cloud.

Предварительные требования#

Прежде чем начать, убедитесь, что у вас есть следующее:

• Аккаунт Logto Cloud с подпиской
• Приложение, интегрированное с Logto (Начало работы)
• Установленный Logto tunnel CLI
• Базовые знания HTML, CSS и JavaScript

Для простоты мы будем использовать классический метод входа "имя пользователя и пароль" в следующих шагах. Не забудьте изменить метод входа в Logto Console.

Создайте свой пользовательский интерфейс входа#

Минимальное требование для интерфейса входа - это наличие файла index.html с формой входа, содержащей как минимум поле ввода имени пользователя, поле ввода пароля и кнопку отправки. Я использовал ChatGPT для создания примера HTML, и вот с чем я пришел - эта милая розовая страница входа.

Я опустил CSS-стили для простоты, и вот как выглядит HTML:

Вы также можете начать с шаблона вашей любимой фронтенд-рамки, такой как Create React App, Next.js или Vue CLI.

Так как Logto с открытым исходным кодом, еще одна рекомендация - клонировать проект Logto Experience, и изменить код в соответствии с вашими потребностями. Это полный встроенный интерфейс входа Logto, написанный на React и TypeScript.

Настройка Logto tunnel CLI#

Logto tunnel CLI - это инструмент, который не только обслуживает ваши HTML-страницы, но и позволяет взаимодействовать с Experience API Logto из ваших HTML-страниц в локальной среде разработки.

Предположим, что ваша страница index.html находится в /path/to/your/custom-ui, а ваш ID тенанта Logto - foobar, вы можете запустить команду следующим образом:

Или, если вы используете UI-рамку, в которой есть встроенный сервер разработки, и ваша страница обслуживается на http://localhost:4000, вы можете запустить команду так:

После выполнения команды сервис туннелирования будет запущен на вашем локальном компьютере http://localhost:9000/.

Запускаем вход из вашего приложения#

Перейдите в приложение, созданное ранее, и измените конечную точку Logto с https://foobar.logto.app/ на http://localhost:9000/ в конфигурации вашего Logto SDK.

Возьмем наш пример проекта на React:

Нажмите кнопку "Войти" в вашем приложении. Вместо встроенного интерфейса входа Logto, вы теперь должны быть перенаправлены на вашу пользовательскую страницу входа.

Взаимодействие с Logto Experience API#

На этом этапе мы будем взаимодействовать с Logto Experience API в вашем пользовательском интерфейсе. Сначала создадим файл script.js и добавим ссылку на него в вашем index.html.

Поместите следующий код в ваш файл script.js.

Этот скрипт завершает процесс входа с данными имени пользователя и пароля с помощью следующих API:

• PUT /api/experience - Начало взаимодействия при входе
• POST /api/experience/verification/password - Проверка имени пользователя и пароля
• POST /api/experience/identification - Идентификация пользователя для текущего взаимодействия
• POST /api/experience/submit - Завершение входа

Обратитесь к документации по API Logto Experience для получения дополнительных сведений.

Тестирование вашей пользовательской страницы входа#

1. Перейдите в ваше приложение и нажмите кнопку "Войти".
2. Вы должны быть перенаправлены на вашу пользовательскую страницу входа http://localhost:9000/.
3. Введите имя пользователя и пароль, и нажмите кнопку "Отправить".
4. Если все настроено правильно, вы должны быть перенаправлены обратно в ваше приложение с аутентифицированной информацией о пользователе.

Развертывание вашего пользовательского интерфейса входа в Logto Cloud#

После завершения разработки и тестирования вашего пользовательского интерфейса входа локально, вы можете развернуть его в Logto Cloud. Просто создайте zip-файл вашей пользовательской папки UI и загрузите его в разделе "Custom UI" вашей Logto Console.

После загрузки сохраните изменения, и ваш пользовательский интерфейс входа станет активным в вашем аккаунте Logto Cloud, заменив встроенный интерфейс Logto.

Наконец, вернитесь в ваше приложение и измените URI конечной точки обратно на вашу конечную точку Logto cloud: https://foobar.logto.app/. На этом этапе вы можете остановить туннельный сервис Logto, и ваше приложение теперь должно работать непосредственно с пользовательским интерфейсом, размещенным онлайн.

Заключение#

В этом уроке мы рассмотрели процесс реализации и развертывания вашего собственного пользовательского интерфейса входа в Logto Cloud.

С этой функцией вы можете глубоко настроить ваш интерфейс входа и авторизационные потоки, чтобы соответствовать вашему бренду и специфическим бизнес-требованиям.

Счастливого программирования! 🚀