Menu

Nexty 如何开启 Cloudflare Turnstite

Cloudflare Turnstile 是由 Cloudflare 提供的免费人机验证解决方案，具有用户体验友好、非侵入式挑战等特点，能够有效识别和阻止恶意机器人。

当你的 SaaS 产品用户逐渐增加的时候，防范自动化机器人和恶意行为。Nexty 提供了 Cloudfalre Turnstile 集成选项，你可以根据本文教程开启你的人机验证，阻止恶意流量。

集成步骤

由于 Nexty 的 Auth 使用了 Supabase 的服务，而 Supabase 提供了服务端的处理逻辑，这将使得你在 Nexty 使用 Cloudfalre Turnstile 变得异常简单。

Cloudfalre 创建 Turnstile Widget

登录 Cloudflare，打开左侧目录 Turnstile，点击「Add Widget」

add widget

选择生产环境域名，并手动输入 localhost，后者用于本地测试

add hostnames

选择 Widget Mode 和 pre-clearance

select mode

「Widget Mode」决定了通过什么方式来判断访客是不是机器人，3个选项含义分别是：

  • Managed（推荐）：智能分析访客行为，可信用户直接通过，可疑用户需要点击验证
  • Non-interactive：显示加载动画，后台自动完成验证，用户无需操作
  • Invisible：完全隐藏验证过程，后台静默完成所有检查

「Would you like to opt for pre-clearance for this site?」是决定已验证用户在后续访问中是否可以跳过部分验证流程。

  • 选择 No：每次访问都需要完整验证
  • 选择 Yes：根据所选模式提供不同程度的验证豁免

创建完成后，你会获得 Site Key 和 Secret Key。Site Key 用于前端集成，需加入环境变量 NEXT_PUBLIC_TURNSTILE_SITE_KEY。Secret Key 用于后端验证，将在下一步使用。

turnstile key

Supabase 开启 Attack Protection

打开 Supabase - Authentication - Attack Protection，将 Secret Key 填到 Captcha secret 输入框

supabase-attack-protection

代码集成

Nexty 在邮箱登录流程中预集成了 Cloudflare Turnstile，你只需要配置环境变量即可使用。

在 Nexty 的代码中，你可以在登录页代码看到下列相关代码：

  1. 导入 Turnstile 组件
import { Turnstile } from '@marsidev/react-turnstile'
  1. 创建 state
const [captchaToken, setCaptchaToken] = useState<string | undefined>();
  1. 渲染验证组件，并提供 onSuccess 属性作为成功回调
{process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY && (
  <Turnstile
    siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
    onSuccess={(token) => {
      setCaptchaToken(token);
    }}
  />
)}

验证效果

配置完成后，用户在进行邮箱登录时将自动触发 Turnstile 验证，有效防范机器人攻击，提升网站安全性。

turnstile demo