简体中文
  • oidc
  • webflow
  • authentication

与 Webflow 集成

帮助你将 Webflow 与 Logto 集成的分步指南。

Charles
Charles
Developer

介绍

Webflow 是一个用于构建和托管网站的 SaaS 平台，提供了一个在线可视化编辑器，可以简化设计、构建和启动网站的过程，并且几乎不需要编写代码。

本文将指导你如何将 Logto 集成到你的 Webflow 项目中，从而实现无缝的用户认证。

先决条件

  1. 一个启用了自定义代码功能的 Webflow 账户（至少需要“Basic”计划）。
  2. 一个正在运行的 Logto 实例，可以是自托管的实例，也可以使用 Logto Cloud。

集成步骤

准备

  1. 进入 Logto 控制台，使用“Vanilla JS”模板或“创建无框架”创建一个应用程序，并选择“单页应用程序”作为应用类型。
  2. 在 Webflow 仪表板上，创建一个新站点。

集成 JS SDK

在此步骤中，我们将向你的网站添加全局级别的自定义代码。由于 Webflow 是一个静态网站，我们将利用 @logto/browser（Vanilla JS）SDK 进行用户认证。因为无法使用 NPM，我们将通过类似 jsdelivr.com 的 CDN 服务引入我们的 SDK。

  1. 在 Webflow 仪表板上，悬停在你新创建的站点上，点击右上角的“齿轮”图标。
  2. 在打开的设置页面中，找到左侧导航菜单中的“Custom code”，然后将以下 JavaScript 代码粘贴到“Head code”部分。你可以在 Logto 应用详情中找到你的应用程序 ID 和端点 URL。

实现登录功能

  1. 前往 Logto 控制台，在应用设置中找到“Redirect URIs”字段，输入 https://your-awesome-site.webflow.io/callback，然后点击“保存更改”。
  2. 返回 Webflow 设计器，在主页上添加一个“登录”按钮。为了简化教程，我们还将给按钮分配一个 ID “sign-in”，以便后续使用 getElementById() 进行引用。
登录按钮设置
  1. 现在让我们为主页添加一些页面级的自定义代码。点击页面菜单上的齿轮图标，并在底部找到自定义代码部分。粘贴以下代码，以便为登录按钮绑定点击事件处理程序。
编辑页面设置
  1. 在 Webflow 中创建一个新的“Callback”页面，并简单地放置一些静态文本“正在重定向...”。我们将在这个页面上通过以下自定义代码处理登录回调逻辑。
  1. 现在，你可以通过部署你的 Webflow 网站来测试登录流程。部署后，主页上应会显示“登录”按钮。点击它将跳转到由 Logto 托管的登录页面。登录后，系统将首先将你重定向到“Callback”页面，你可以在那里看到“正在重定向...”的文本，然后再返回你的主页。

实现登出功能

  1. 在 Logto 控制台的应用设置中，找到“Post logout redirect URIs”，并输入你的 Webflow 站点网址 https://your-awesome-site.webflow.io。
  2. 返回 Webflow 设计器，并在你的主页上添加一个“登出”按钮。同样，给按钮分配一个 ID “sign-out”，并将以下代码添加到页面级“Custom code”。

处理认证状态

在 Logto SDK 中，我们通常可以使用 logtoClient.isAuthenticated() 方法来检查认证状态，如果用户已登录，值将为 true，否则为 false。

在你的 Webflow 站点中，你也可以用它来编程方式显示和隐藏登录和登出按钮。使用以下自定义代码调整按钮的 CSS 样式。

获取用户名并显示欢迎消息

  1. 在主页上添加一个 ID 为“container”的弹性容器，并在容器中插入一个 ID 为“username”的“标题 1”元素。
  2. 在成功登录后自动获取用户信息，替换“标题 1”元素中的用户名，并显示容器。我们可以使用以下自定义代码实现这个功能。

检查点：测试你的应用程序

现在，测试你的 Webflow 网站：

  1. 部署并访问你的站点网址，登录按钮应为可见状态。
  2. 点击登录按钮，SDK 将启动登录流程，将你重定向到 Logto 登录页面。
  3. 登录后，你将被重定向回你的网站，看到用户名和登出按钮。
  4. 点击登出按钮以退出登录。

总结

本教程指导你如何将 Webflow 与 Logto 集成。通过使用 @logto/browser SDK，你可以轻松将用户认证集成到你的任意 Webflow 站点中，只需几个步骤。

请参阅我们的文档站点上的完整的 Webflow 集成指南以获取更多详细信息，比如获取 JWT 访问令牌和处理 RBAC（基于角色的访问控制）等。

可以在这里以只读模式查看 Webflow 示例，部署的站点可以在 https://charless-trendy-site-f191c0.webflow.io/ 中找到。