MkSaaS文档验证码
学习如何在 MkSaaS 中设置和使用验证码
MkSaaS 支持使用 Cloudflare Turnstile 作为验证码服务，这允许您保护您的网站免受攻击和滥用。
设置
登录 Cloudflare
登录 Cloudflare 仪表盘 并选择您的账户。
创建 Turnstile 小部件
点击 Turnstile。选择 Add widget 并填写网站名称和您网站的主机名（例如 YOUR-DOMAIN.com 或 localhost）。
配置小部件模式
将小部件模式选择为 Managed。选择预清除支持（可选）。
设置环境变量
复制您的 Site Key 和 Secret Key，并将其粘贴到环境变量文件中。
NEXT_PUBLIC_TURNSTILE_SITE_KEY=
TURNSTILE_SECRET_KEY=
在配置中启用验证码
在 website.tsx 文件中设置 enableTurnstileCaptcha 为 true (默认是 false)
export const websiteConfig: WebsiteConfig = {
features: {
enableTurnstileCaptcha: true,
},
}有关更多详细信息，请参阅 Cloudflare Turnstile 文档 和 React Turnstile 文档。
如果您正在设置环境，现在您可以回到环境配置文档并继续。本文档的其余部分可以稍后阅读。
环境配置
设置环境变量
验证码系统架构
captcha.tsx
captcha.ts
components/shared/captcha.tsx：验证码组件。lib/captcha.ts：用于校验验证码的工具库。
使用验证码
验证码组件目前仅在注册和登录表单中使用，但您也可以复用相关代码，在其他地方使用它。
import { Captcha } from '@/components/shared/captcha';
export default function RegisterForm() {
// ...
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
{/* ... */}
<Captcha
onSuccess={(token) => form.setValue('captchaToken', token)}
validationError={form.formState.errors.captchaToken?.message}
/>
<Button
disabled={isPending || (turnstileEnabled && !captchaToken)}
size="lg"
type="submit"
className="cursor-pointer w-full flex items-center justify-center gap-2"
>
{isPending && <Loader2Icon className="mr-2 size-4 animate-spin" />}
<span>{t('signUp')}</span>
</Button>
</form>
</Form>
);
}
参考资料
视频教程
下一步
现在您已经了解了如何在 MkSaaS 中开启验证码，您可能想要探索这些相关功能：