验证码

MkSaaS 支持使用 Cloudflare Turnstile 作为验证码服务。这允许您保护您的网站免受攻击和滥用。

设置

要启用验证码，您需要在 .env 文件中配置以下环境变量：

.env

NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
TURNSTILE_SECRET_KEY=""

登录 Cloudflare 仪表盘并选择您的账户。
点击 Turnstile。
选择 Add widget 并填写网站名称和您网站的主机名（例如 your-domain.com 或 localhost）。
将小部件模式选择为 Managed。
选择预清除支持（可选）。
复制您的 Site Key 和 Secret Key，并将其粘贴到 .env 文件中。

.env

NEXT_PUBLIC_TURNSTILE_SITE_KEY=
TURNSTILE_SECRET_KEY=

Cloudflare Turnstile

在 website.tsx 文件中设置 enableTurnstileCaptcha 为 true (默认是 false)

src/lib/website.tsx

export const websiteConfig: WebsiteConfig = {
  features: {
    enableTurnstileCaptcha: true,
  },
}

有关更多详细信息，请参阅 Cloudflare Turnstile 文档和 React Turnstile 文档。

如果您正在设置环境，现在您可以回到环境配置文档并继续。本文档的其余部分可以稍后阅读。

环境配置

设置环境变量

验证码系统架构

captcha.tsx

captcha.ts

components/shared/captcha.tsx：验证码组件。
lib/captcha.ts：用于校验验证码的工具库。

使用验证码

验证码组件目前仅在注册和登录表单中使用，但您也可以在其他地方使用它。

src/components/auth/register-form.tsx

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>
  );
}