先聊聊啥是 Cloudflare Turnstile

说实话，之前我一直用 Google reCAPTCHA，哎呀，那体验真是够折磨的。

后来偶然听朋友提起 Cloudflare 的 Turnstile，哈哈，名字听起来就像个闸门。

它其实是个免费的人机验证方案，非侵入式、用户友好。

你只要在前端嵌入一个小组件，后台再验一下 token，就Neng把大多数机器人的脚给踢走。

怎么玩儿？先准备两把钥匙

打开 Cloudflare 控制台。

左侧目录点 Turnstile，点 Add Widget。

创建完后你会得到 Site Key 和 Secret Key。

Site Key 用前端，塞进环境变量 NEXT_PUBLIC_TURNSTILE_SITE_KEY；Secret Key 用后端，后面会用到。

Nexty 项目里怎么集成

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

一步步配置

第一步：登录 Cloudflare，打开左侧目录 Turnstile，点击 Add Widget

第二步：选择 Widget Mode 和 pre-clearance

第三步：在 Nexty 的代码里找到登录页的相关代码。

第四步：把 Site Key 塞进 .env 文件的 NEXT_PUBLIC_TURNSTILE_SITE_KEY

第五步：把 Secret Key 塞进 Supabase进行 token 验证。

代码示例随手抄

import { Turnstile } from '@marsidev/react-turnstile'

const  = useState;

{process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY && (
   {
      setCaptchaToken;
    }}
  />
)}

验证效果咋样？

配置完之后用户登录时会自动弹出 Turnstile 验证框。

它不像传统验证码那样让人抓狂，一眼kan过去就是一个小小的勾选框。

机器人根本过不去，你的网站安全感瞬间提升。哈哈，是不是有点爽？

P.S. 顺带解释下“为什么百度不收录”这事儿

有人常问：为啥我的站点用了 Cloudflare Turnstile 后百度不收录了？说实话，这事儿主要是因为 Turnstile 会在页面加载时注入一段脚本。

Baidu 的爬虫对这类动态脚本比较敏感，有时会误判为恶意请求，从而降低抓取频率甚至直接屏蔽。

The solution is simple：给爬虫专门加一个 noscript 区域或者在 robots.txt 里声明允许爬取关键页面。这样既保留了防护，又不影响收录。懂的dou懂，就是这么个事儿啦。

Codeless 集成技巧

NEXTY Yi经帮你把大部分工作封装好了你只需要在 .env 里写两行键值对就行了。

NEXT_PUBLIC_TURNSTILE_SITE_KEY=你的SiteKey TURNSTILE_SECRET_KEY=你的SecretKey

P.S. 本地调试别忘了在创建 widget 时手动加上 localhost 域名，否则本地跑不起来哦。

SaaS 场景下的实战经验分享

CRO 是每个产品dou要关注的，但安全也同样重要。我们在 Nexty SaaS 模板里加入了 Turnstile，一上线就拦住了一堆刷账号的机器人。害，那感觉真是舒坦！

# 小贴士：Ru果你的用户主要来自海外把 Widget Mode 调成 “Invisible” geng友好，因为国外用户geng习惯无感知验证。

P.S. 那些常见坑，你踩过没？

- 环境变量没写对导致前端报错。别急，我也经常忘记大小写，哈哈！

- Secret Key 放到了前端代码里。哎呀，这可不行，会被泄露！

- 没开启 pre-clearance，以为每次dou要弹框。结果用户抱怨体验差。

- 本地开发忘记添加 localhost 域名，调试卡死。

CLOUDFARE TURNSTILE 小结——老友叨叨几句~

AFAIK，它Yi经兼容大多数主流框架，包括 Next.js、React、Vue、Angular…你想想，douNeng玩儿得转啊！

P.S. Ru果你还有别的第三方服务想集成，比如 Supabase、Auth0，douKe以配合使用，只要把 Secret Key 对接到对应的服务器验证接口就行啦。

赶紧上手吧！别等到被机器人刷爆再后悔～哈哈~

---