Создайте свой собственный интерфейс входа в 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-страницы, но и позволяет взаимодействовать с API интерфейса Logto из ваших HTML-страниц в локальной среде разработки.

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

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

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

Инициация входа из твоего приложения#

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

Давай рассмотрим пример нашего React-проекта:

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение#

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

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

Удачного кодинга! 🚀