Интеграция с Webflow

Введение#

Webflow — это платформа SaaS для создания и хостинга веб-сайтов, предлагающая онлайн-визуальный редактор, который упрощает процесс проектирования, создания и запуска сайтов с минимальным количеством кода.

Эта статья проведет тебя через интеграцию Logto с твоими проектами Webflow, что позволит бесшовно осуществлять аутентификацию пользователей.

Необходимые условия#

1. Аккаунт Webflow с включенной функцией пользовательского кода (требуется план не ниже "Basic").
2. Запущенный экземпляр Logto, либо саморазвернутый, либо с использованием Logto Cloud.

Шаги интеграции#

Подготовка#

1. Перейди в консоль Logto, создай приложение, используя шаблон "Vanilla JS" или "Создать без фреймворка", и выбери "Одностраничное приложение" в качестве типа приложения.
2. В панели управления Webflow создай новый сайт.

Интеграция JS SDK#

На этом этапе мы добавим пользовательский код глобального уровня на твой сайт. Поскольку Webflow — это статический веб-сайт, мы будем использовать SDK @logto/browser (Vanilla JS) для аутентификации пользователя. Поскольку NPM использовать нельзя, мы импортируем наш SDK через CDN-сервис, такой как jsdelivr.com.

1. В панели управления Webflow наведи указатель мыши на только что созданный сайт и щелкни по иконке "Шестеренка" в правом верхнем углу.
2. На открывшейся странице настроек найди "Пользовательский код" в левом меню навигации и вставь следующий JavaScript-код в раздел "Head code". Ты можешь найти свой ID приложения и URL конечной точки в деталях приложения Logto.

Реализация входа в систему#

1. Перейди в консоль Logto, в настройках приложения найди поле "URI перенаправления" и введи https://your-awesome-site.webflow.io/callback, затем нажми "Сохранить изменения".
2. Вернись в дизайнер Webflow и добавь на главную страницу кнопку "Вход в систему". Для простоты этого руководства мы также присвоим кнопке ID "sign-in" для дальнейшей ссылки на нее с помощью getElementById().

3. Теперь давай добавим немного пользовательского кода на уровне страниц главной страницы. Щелкни по иконке шестеренки в меню страницы и найди раздел пользовательского кода внизу. Вставь ниже приведенный код, чтобы привязать обработчик клика к кнопке входа.

4. Создай новую страницу "Callback" в Webflow и просто размести на ней текст "Перенаправление...". Мы будем обрабатывать логику обратного вызова входа в систему на этой странице с помощью следующего пользовательского кода.

5. Теперь ты можешь протестировать поток входа на своем сайте Webflow. После развертывания кнопка "Вход в систему" должна появиться на твоей главной странице. Нажми на нее, чтобы перейти на страницу входа, размещенную на Logto. После входа ты будешь перенаправлен сначала на страницу "Callback", где ты увидишь текст "Перенаправление...", а затем обратно на главную страницу.

Реализация выхода из системы#

1. В консоли Logto найди "После выхода из системы перенаправление URI" в настройках приложения и введи URL твоего сайта Webflow https://your-awesome-site.webflow.io.
2. Вернись в дизайнер Webflow и добавь на главную страницу кнопку "Выход из системы". Аналогично, присвой кнопке ID "sign-out" и добавь следующий код на уровне страницы в раздел пользовательского кода.

Обработка статуса аутентификации#

В SDK Logto, обычно мы можем использовать метод logtoClient.isAuthenticated(), чтобы проверить статус аутентификации, если пользователь вошел в систему, значение будет true; в противном случае, оно будет false.

На твоем сайте Webflow ты также можешь использовать его для программного отображения и скрытия кнопок входа и выхода. Примените следующий пользовательский код, чтобы соответственно настроить CSS кнопок.

Получение имени пользователя и отображение приветственного сообщения#

1. Добавь flex контейнер с ID "container" на главной странице и вставь элемент "Заголовок 1" в контейнер с ID "username".
2. Автоматически получай информацию о пользователе после успешного входа в систему, замени имя пользователя в элементе "Заголовок 1" и отобрази контейнер. Мы можем сделать это с помощью следующего пользовательского кода.

Контрольная точка: Тестирование твоего приложения#

Теперь протестируй свой сайт Webflow:

1. Разверни и зайди на URL твоего сайта, кнопка входа должна быть видна.
2. Нажми на кнопку входа, SDK инициирует процесс входа, переводя тебя на страницу входа Logto.
3. После входа ты будешь перенаправлен обратно на свой сайт, где увидишь имя пользователя и кнопку выхода.
4. Нажми на кнопку выхода, чтобы выйти из системы.

Резюме#

В этом руководстве ты узнал, как интегрировать Webflow с Logto. Используя SDK @logto/browser, ты можешь легко интегрировать аутентификацию пользователя на любом из твоих сайтов Webflow всего за несколько шагов.

Дополнительную информацию, например, как получить JWT токен доступа и как работать с RBAC (управление доступом на основе ролей), можно найти в полном руководстве по интеграции Webflow на нашем сайте с документацией.

Демо Webflow можно найти здесь в режиме только для чтения, а развернутый сайт доступен на https://charless-trendy-site-f191c0.webflow.io/.