与 Webflow 集成

介绍#

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() 进行引用。

3. 现在让我们为主页添加一些页面级的自定义代码。点击页面菜单上的齿轮图标，并在底部找到自定义代码部分。粘贴以下代码，以便为登录按钮绑定点击事件处理程序。

4. 在 Webflow 中创建一个新的“Callback”页面，并简单地放置一些静态文本“正在重定向...”。我们将在这个页面上通过以下自定义代码处理登录回调逻辑。

5. 现在，你可以通过部署你的 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/ 中找到。