Этот урок поможет вам в создании и развертывании вашего собственного интерфейса входа в Logto Cloud.
Logto предоставляет коробочное решение для интерфейса входа, которое охватывает все функции Logto, включая вход, регистрацию, восстановление пароля, единый вход (SSO) и многое другое. Пользователи также могут настраивать внешний вид интерфейса входа с помощью нашей функции "Custom CSS".
Однако некоторые пользователи все же хотят глубоко настроить свой интерфейс входа (как UI, так и авторизационные потоки), чтобы соответствовать своему бренду и специфическим бизнес-требованиям. Мы вас услышали! И мы рады сообщить, что функция "Bring your own UI" теперь доступна в Logto Cloud.
В этом уроке мы проведем вас через шаги по созданию и развертыванию вашего собственного интерфейса входа в Logto Cloud.
Прежде чем начать, убедитесь, что у вас есть следующее:
Для простоты мы будем использовать классический метод входа "имя пользователя и пароль" в следующих шагах. Не забудьте изменить метод входа в Logto Console.
Минимальное требование для интерфейса входа - это наличие файла index.html с формой входа, содержащей как минимум поле ввода имени пользователя, поле ввода пароля и кнопку отправки.
Я использовал ChatGPT для создания примера HTML, и вот с чем я пришел - эта милая розовая страница входа.
Я опустил CSS-стили для простоты, и вот как выглядит HTML:
Вы также можете начать с шаблона вашей любимой фронтенд-рамки, такой как Create React App, Next.js или Vue CLI.
Так как Logto с открытым исходным кодом, еще одна рекомендация - клонировать проект Logto Experience, и изменить код в соответствии с вашими потребностями. Это полный встроенный интерфейс входа Logto, написанный на React и TypeScript.
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 в вашем пользовательском интерфейсе. Сначала создадим файл 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 для получения дополнительных сведений.
http://localhost:9000/.После завершения разработки и тестирования вашего пользовательского интерфейса входа локально, вы можете развернуть его в Logto Cloud. Просто создайте zip-файл вашей пользовательской папки UI и загрузите его в разделе "Custom UI" вашей Logto Console.
После загрузки сохраните изменения, и ваш пользовательский интерфейс входа станет активным в вашем аккаунте Logto Cloud, заменив встроенный интерфейс Logto.
Наконец, вернитесь в ваше приложение и измените URI конечной точки обратно на вашу конечную точку Logto cloud: https://foobar.logto.app/.
На этом этапе вы можете остановить туннельный сервис Logto, и ваше приложение теперь должно работать непосредственно с пользовательским интерфейсом, размещенным онлайн.
В этом уроке мы рассмотрели процесс реализации и развертывания вашего собственного пользовательского интерфейса входа в Logto Cloud.
С этой функцией вы можете глубоко настроить ваш интерфейс входа и авторизационные потоки, чтобы соответствовать вашему бренду и специфическим бизнес-требованиям.
Счастливого программирования! 🚀