Clerk 是一个用户管理服务,你可以在自托管的 Tina 设置中使用它。
在寻找代码吗?查看 GitHub 仓库。
要开始使用,你需要安装以下依赖:
yarn add @clerk/clerk-js @clerk/backend tinacms-clerk
访问 clerk.com 创建一个账户和一个“应用程序”。完成后,导航到 API 密钥选项卡以找到你的凭据,并将它们存储在项目中的 .env 文件中。
确保使用你将用于登录 Clerk 的电子邮件地址更新 TINA_PUBLIC_ALLOWED_EMAIL
。
CLERK_SECRET=sk_test_my-clerk-secretTINA_PUBLIC_CLERK_PUBLIC_KEY=pk_test_my-clerk-public-keyTINA_PUBLIC_ALLOWED_EMAIL="your-email@gmail.com"
在自托管时,你可能希望为本地开发禁用身份验证。
"scripts": {"dev": "TINA_PUBLIC_IS_LOCAL=true tinacms dev -c \"next dev\"","dev:prod": "tinacms dev -c \"next dev\"",}
将以下内容添加到你的 tina/config.{ts.js}
文件中。确保将 "my-email@gmail.com" 替换为你用于登录的电子邮件:
import { ClerkAuthProvider } from 'tinacms-clerk/dist/frontend'//...const isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true'export default defineConfig({//...contentApiUrlOverride: '/api/tina/gql',authProvider: isLocal ? new LocalAuthProvider() : new ClerkAuthProvider(),//...})
注意,我们正在检查已登录用户的电子邮件是否存在于硬编码数组中。有几种方法可以更可维护地做到这一点:
将以下内容添加到你的 pages/api/tina/[...routes].{ts,js}
文件中
import { TinaNodeBackend, LocalBackendAuthProvider } from '@tinacms/datalayer'import { ClerkBackendAuthProvider } from 'tinacms-clerk'import databaseClient from '../../../tina/__generated__/databaseClient'const isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true'const handler = TinaNodeBackend({authProvider: isLocal? LocalBackendAuthProvider(): ClerkBackendAuthProvider({/*** 对于高级 Clerk 用户,你可以使用限制* https://clerk.com/docs/authentication/allowlist*/allowList: [process.env.TINA_PUBLIC_ALLOWED_EMAIL],secretKey: process.env.CLERK_SECRET,}),databaseClient,})export default (req, res) => {// 如果需要,可以在这里修改请求return handler(req, res)}