Clerk 集成

了解如何将 Clerk 与您的 Lovable 应用程序集成。

为什么选择 Clerk？

Clerk 负责处理认证和用户管理，让您无需从零开始构建。通过几步简单的提示和配置，您即可获得：

安全的登录与注册功能（支持社交登录、密码认证和多因素认证）
预构建的 UI 组件：包括用户资料、组织管理以及模拟登录
B2B 应用程序支持（团队、角色和邀请功能）
与 Supabase、Stripe（即将推出）等服务的无缝集成
等待列表模式，用于管理早期访问用户
慷慨的免费套餐：支持高达 10,000 MAUs

逐步集成指南

以下是详细的逐步指南：

1. 设置您的 Clerk 应用程序

步骤 1：创建 Clerk 账户 → Clerk.com

步骤 2：在 Clerk 仪表板中，创建一个新应用程序。

启用所需的认证提供者（例如 Google 或 GitHub）。
在 配置 > 限制 下启用“等待列表”。

复制您的 公共 API 密钥。

步骤 3：将 Clerk 添加到您的 Lovable 应用程序。

在 Lovable 中，将 Clerk 设置为您的认证提供者。

note
让我们构建一个类似 Asana 的精美项目和任务管理应用程序。用户应能够使用 Clerk 进行登录和注册，以管理认证和用户数据。首先，从创建一个优秀的主页开始，并使用 Clerk 的等待列表组件，让用户在开发应用程序的其余部分时加入。
在提示时，粘贴您的 公共 API 密钥。
Lovable 会自动生成登录和注册页面。

部署并测试 — 现在您已成功使用 Clerk 认证。

2. 激活等待列表模式（可选）

为什么使用等待列表？ – 在应用程序正式推出前收集潜在用户！

利用 Clerk 的内置等待列表功能来收集预发布用户。

在 Clerk 仪表板中：转到 配置 > 限制 > 等待列表。
新注册的用户将显示为 待处理 状态。

注册的用户将进入 待批准 状态。
管理员可以通过 Clerk 仪表板批准这些用户。

额外提示：自定义等待列表电子邮件（包括品牌和内容）。

3. 在 Clerk 中管理用户和团队

为您的应用程序设置基于团队的访问控制。

在 Clerk 仪表板中：启用组织功能。

定义角色（例如管理员、成员、查看者等）。
通过电子邮件邀请用户加入组织。
通过仪表板分配角色和权限。
提示 Lovable：在用户注册后，让他们创建或加入一个组织。

使用 Clerk 的用户资料组件

提供预构建的用户管理仪表板。
支持社交登录和密码认证。
用户可以自行管理账户和双因素认证。

4. 模拟登录模式（针对管理员）

什么是模拟登录模式？

管理员可以以任何用户的身份登录，以帮助排查问题。

以特定用户的视角排查您的应用程序。

在 Clerk 仪表板 > 用户中，点击目标用户。
点击 模拟登录。
从该用户的视角查看您的应用程序。
安全措施：模拟登录者无法执行敏感操作（如更改密码）。

5. 与 Supabase 集成（高级）

将 Clerk 认证与 Supabase 后端结合使用。

为什么与 Supabase 集成？

在数据库中存储用户数据。
使用 JWT 令牌实现安全认证。
将认证与应用程序功能无缝连接。

集成步骤：

在 Supabase 中，转到 设置 > API > JWT 密钥 (文档)。

在 Clerk 中：转到 JWT 模板 > 添加 Supabase，并粘贴 JWT 密钥。

启用 Clerk 作为认证提供者。

更新 RLS 策略，以使用 Clerk 的 auth.uid()。

提示 Lovable：
让我们设置 Supabase 以与 Clerk 集成。Clerk 已使用 Supabase 密钥配置好。这是使用 Clerk 实现 Supabase 客户端的一个示例。请以此作为参考。
确认 Supabase 接受 Clerk 颁发的令牌。

6. 添加自定义域名（可选）

为什么使用自定义域名？

提升品牌认知度和用户信任。

更多信息。

在 Lovable 中：转到 设置 > 自定义域名。

输入您购买的域名（例如 app.yourcompany.com）。
Lovable 会自动配置 DNS（无需离开平台）。
部署并测试您的应用程序，使用新域名。
完成 ✅ — 您的应用程序现已实现白标化。

7. 最终想法和下一步

您的应用程序现在具备：

使用 Clerk 的安全认证。
等待列表，用于收集早期用户。
用户和团队管理功能。
Supabase 数据库集成。
专业的自定义域名。

额外功能：几分钟内构建 B2B 功能

Clerk 支持：

基于角色的组织访问控制。
邀请流程（电子邮件-based，带有预构建 UI）。
组织资料自定义（徽标、名称）。
多组织切换（例如 Slack 风格）。

提示 Lovable：

添加组织切换器 UI。

让用户邀请队友。

提示和故障排除

已经在使用 Supabase 认证？ 您可以轻松切换到 Clerk，而无需重写应用程序逻辑。只需正确配置 JWT 并更换认证提供者。
电子邮件自定义： Clerk 允许您编辑所有事务性电子邮件模板（包括等待列表、邀请和批准）。
移动登录： Clerk 支持无密码登录、OTP 和 SMS — 在开发模式下无需额外配置。
合规性： Clerk 符合 SOC2、HIPAA 和 GDPR 标准。

常见问题解答 (FAQ)

我可以轻松从 Supabase 认证切换到 Clerk 吗？

是的。Clerk 和 Supabase 兼容性良好。您只需：

设置 Clerk 以颁发 JWT。
在 Clerk 中添加 Supabase 的 JWT 密钥。
更新 Supabase 的 RLS 策略，以使用 Clerk 的 auth.uid()。

这样，您可以轻松地将 Clerk 集成到现有 Supabase 应用程序中，仅需少量修改。

我需要配置 OAuth 提供者（如 Google 或 GitHub）吗？

仅在生产环境中需要。在开发模式下，Clerk 提供共享凭据用于测试。在生产环境中：

设置您自己的 Google/GitHub 等凭据。
在 Clerk 的 OAuth 设置 下添加它们。

组织和用户有什么区别？

用户：可以登录到您的应用程序的个人用户。
组织：用户群组（例如团队或公司）。

当您需要：

基于角色访问（管理员、成员等）。
用户邀请队友。
B2B SaaS 风格流程时，使用组织。

什么是“模拟登录模式”？

它允许管理员以任何用户的身份登录 — 非常有助于：

调试用户问题。
了解用户体验。
提供实时支持。

Clerk 会限制模拟登录者可执行的操作（例如，无法更改密码）。

我可以自定义 Clerk 的 UI 组件吗？

是的。Clerk 提供：

通过 appearance 属性实现完整的 CSS 支持。
使用 Clerk React 钩子构建完全自定义 UI 的选项。

您可以保留默认外观，或完全匹配您的应用程序品牌。

我可以从 Clerk 向等待列表用户发送电子邮件吗？

目前：

用户在从等待列表批准时会自动收到通知。
批量电子邮件支持 即将推出。

目前，您可以导出电子邮件列表，并使用您首选的电子邮件工具。

Clerk 是免费使用的吗？

是的！Clerk 提供慷慨的免费套餐：

高达 10,000 每月活跃用户 (MAUs)。
付费计划从 25 美元/月 开始，并采用基于使用量的定价。

您可以在生产环境中免费使用，直到应用规模扩大。

Clerk 支持合规性（SOC2、HIPAA、GDPR）吗？

是的。Clerk 是：

SOC 2 认证的。
HIPAA 合规的。
GDPR 就绪的。

适合在受监管行业构建应用程序的团队。

我可以使用 Clerk 与 Stripe 进行计费吗？

即将推出。您很快就可以：

定义计划（例如免费、专业、企业级）。
让用户/组织从 Clerk 的 UI 中管理订阅。
自动将数据同步到 Stripe。

关注 @clerkdev 以获取更新。

想要将问题添加到此 FAQ？在 Discord 上告诉我们！

最终想法

Clerk 让认证变得像简单提示一样容易。您无需自己构建。

只需几下点击和提示，您的应用程序现在就拥有：

安全且可扩展的认证。
团队和组织管理功能。
用于调试的模拟登录工具。
Supabase 支持的数据和访问控制。
自定义域名支持，以提供精致的用户体验。

为什么选择 Clerk？​

逐步集成指南​

1. 设置您的 Clerk 应用程序​

2. 激活等待列表模式（可选）​

3. 在 Clerk 中管理用户和团队​

4. 模拟登录模式（针对管理员）​

5. 与 Supabase 集成（高级）​

6. 添加自定义域名（可选）​

7. 最终想法和下一步​

额外功能：几分钟内构建 B2B 功能​

提示和故障排除​

常见问题解答 (FAQ)​

最终想法​