Пошаговое руководство, которое поможет тебе интегрировать Webflow с Logto.
CharlesDeveloper
Хватит тратить недели на аутентификацию пользователей
Запускайте безопасные приложения быстрее с Logto. Интегрируйте аутентификацию пользователей за считанные минуты и сосредоточьтесь на вашем основном продукте.
Webflow — это платформа SaaS для создания и хостинга веб-сайтов, предлагающая онлайн-визуальный редактор, который упрощает процесс проектирования, создания и запуска сайтов с минимальным количеством кода.
Эта статья проведет тебя через интеграцию Logto с твоими проектами Webflow, что позволит бесшовно осуществлять аутентификацию пользователей.
Перейди в консоль Logto, создай приложение, используя шаблон "Vanilla JS" или "Создать без фреймворка", и выбери "Одностраничное приложение" в качестве типа приложения.
На этом этапе мы добавим пользовательский код глобального уровня на твой сайт. Поскольку Webflow — это статический веб-сайт, мы будем использовать SDK @logto/browser (Vanilla JS) для аутентификации пользователя. Поскольку NPM использовать нельзя, мы импортируем наш SDK через CDN-сервис, такой как jsdelivr.com.
В панели управления Webflow наведи указатель мыши на только что созданный сайт и щелкни по иконке "Шестеренка" в правом верхнем углу.
На открывшейся странице настроек найди "Пользовательский код" в левом меню навигации и вставь следующий JavaScript-код в раздел "Head code". Ты можешь найти свой ID приложения и URL конечной точки в деталях приложения Logto.
Перейди в консоль Logto, в настройках приложения найди поле "URI перенаправления" и введи https://your-awesome-site.webflow.io/callback, затем нажми "Сохранить изменения".
Вернись в дизайнер Webflow и добавь на главную страницу кнопку "Вход в систему". Для простоты этого руководства мы также присвоим кнопке ID "sign-in" для дальнейшей ссылки на нее с помощью getElementById().
Теперь давай добавим немного пользовательского кода на уровне страниц главной страницы. Щелкни по иконке шестеренки в меню страницы и найди раздел пользовательского кода внизу. Вставь ниже приведенный код, чтобы привязать обработчик клика к кнопке входа.
Создай новую страницу "Callback" в Webflow и просто размести на ней текст "Перенаправление...". Мы будем обрабатывать логику обратного вызова входа в систему на этой странице с помощью следующего пользовательского кода.
Теперь ты можешь протестировать поток входа на своем сайте Webflow. После развертывания кнопка "Вход в систему" должна появиться на твоей главной странице. Нажми на нее, чтобы перейти на страницу входа, размещенную на Logto. После входа ты будешь перенаправлен сначала на страницу "Callback", где ты увидишь текст "Перенаправление...", а затем обратно на главную страницу.
В консоли Logto найди "После выхода из системы перенаправление URI" в настройках приложения и введи URL твоего сайта Webflow https://your-awesome-site.webflow.io.
Вернись в дизайнер Webflow и добавь на главную страницу кнопку "Выход из системы". Аналогично, присвой кнопке ID "sign-out" и добавь следующий код на уровне страницы в раздел пользовательского кода.
В SDK Logto, обычно мы можем использовать метод logtoClient.isAuthenticated(), чтобы проверить статус аутентификации, если пользователь вошел в систему, значение будет true; в противном случае, оно будет false.
На твоем сайте Webflow ты также можешь использовать его для программного отображения и скрытия кнопок входа и выхода. Примените следующий пользовательский код, чтобы соответственно настроить CSS кнопок.
Получение имени пользователя и отображение приветственного сообщения#
Добавь flex контейнер с ID "container" на главной странице и вставь элемент "Заголовок 1" в контейнер с ID "username".
Автоматически получай информацию о пользователе после успешного входа в систему, замени имя пользователя в элементе "Заголовок 1" и отобрази контейнер. Мы можем сделать это с помощью следующего пользовательского кода.
В этом руководстве ты узнал, как интегрировать Webflow с Logto. Используя SDK @logto/browser, ты можешь легко интегрировать аутентификацию пользователя на любом из твоих сайтов Webflow всего за несколько шагов.
Дополнительную информацию, например, как получить JWT токен доступа и как работать с RBAC (управление доступом на основе ролей), можно найти в полном руководстве по интеграции Webflow на нашем сайте с документацией.
