在如今的网络世界里，各种自动化攻击手段层出不穷，像恶意爬虫、垃圾评论等，
搞得大家人心惶惶的
怎么办？？？？？？？
部署captcha或许是个不错的主意！
笔者深入研究了Turnstile、reCaptcha、hCaptcha这三种主流的captcha部署方案，
现在手把手地为大家详细讲解如何部署这三种captcha。
Q：请问我需要准备什么？
A：一个Cloudflare账户、一个脑子！
hCaptcha
hCaptcha的好处：部署不需要科学上网…
hCaptcha的坏处：验证内容有点烧脑子…
hCaptcha是什么
自己去搜
前期准备
进入页面后，填写你的邮箱，然后：
其一：国家/地区最好选择日本、美国、港澳台地区
其二：126、163、Gmail、icloud邮箱均可（笔者试了hotmail和qq好像都不行）
当然你选择Google或者Github注册也可
注册完毕后你应该会看见这个界面：
查看你填写的邮箱收件箱，点击确认电子邮件地址或下方的url前去设置密码
完成之后，hCaptcha也会发邮件恭喜你注册成功（会有中英文两封，如下图）
此时，前往登录即可
获取密钥
登录成功后，你会进入如下页面：
点击添加站点，进入添加页面
首先，姓名（网站名称）随意填写，你看得懂就好
域名输入你的网站即可（按回车没有用滴）
hCaptcha行为，看你的实际情况选择
最终填写的示范如下（你的不一定要跟笔者一样哦）
完成填写后，点击节省（英文：Save，在此处应译为保存）
接下来，你会进入这个页面（如下图示意）
首先，先复制站点密钥（站点名称下面那一长串，点击可以保存），
然后，点击右上角头像→设置，下滑找到账户级密钥，然后点击生成新秘密
（如果弹出了*当前账户级密钥将立即失效。是否继续？*的窗口，点击产生即可，不用理它）
千万注意，这个密钥（ES开头）只会显示一次！推荐复制下来粘贴到记事本上，避免丢失！
正式部署
前端测试
打开你的本地项目，首先键入基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Demo hCaptcha</title>
<script src="https://hcaptcha.com/1/api.js" async defer></script>
<style>
.center{
text-align: center;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="center">
<h1>hCaptcha 验证</h1>
<div data-sitekey=" " class="h-captcha"></div>
<!-- ^^^ Copy你的站点密钥进去 -->
</div>
</body>
</html>这个时候你的页面应该是这样子的：
这个时候你就可以自己做一遍人机验证了（不太人性就是了）
后端验证
做完验证了，然后呢？做完就完了？怎么可能！
接下来你需要在后端向hCaptcha发送验证请求！
首先我们需要创建一个Workers
打开Cloudflare仪表板→Workers和Pages（ 计算(Workers) ）→创建（如下图所示）
进入页面只管点击从Hello world！开始 右边的“开始使用”，然后你应该进入这个页面：
名称你可随意填写，能辨别即可，笔者在此以api-verify为例
下滑，点击部署，然后部署成功页面点击“地球”右上的编辑代码按钮
进入页面后，删光原有代码，然后粘贴以下代码：
export default {
async fetch(request, env, ctx) {
const url = "https://api.hcaptcha.com/siteverify"; // hCaptcha 后端验证网址
const secret = ""; //在此处填充你的账户级密钥
const token = (new URL(request.url)).pathname.split("/")[1];//获取挑战令牌
let response=await fetch(`${url}?secret=${secret}&response=${token}`,{method:"POST"});//发送验证请求
let res=await response.json();
return new Response(JSON.stringify(res),{headers:{
"content-type": "application/json;charset=UTF-8"}
});
},
};完毕后点击右上角的部署，当网页下方弹出绿色的版本已保存 就行了
打开Cloudflare仪表板→计算（Workers）→你的Worker →设置（如下图所示）
记下图中画蓝线的网址，然后打开你的本地项目，先给captcha的div容器新增参数：
<div data-sitekey="" data-callback="rvCallback" class="h-captcha"></div>
<!-- 意思就是，当挑战完成后自动执行rvCallback函数 -->在div容器上边增加脚本：
<script>
async function rvCallback(args){
const url = "";//填充你刚才画蓝线的网址，注意加上 https:// 前缀
let response=await fetch(`${url}/${args}`);
let res=await response.json();
if(res.success)alert("OK");//目标：完成验证后弹窗
}
</script>到这一步基本上大功告成了，如下图所示：
hCaptcha还有其他东西，你可以前往上文寻找他们的帮助文档
本地部署
hCaptcha的帮助文档提到过，在本地部署时，不允许本地主机发送请求，但可以通过修改hosts的方式发送请求
但是！你可别信吼
如果你试了就会发现，控制台一直在报错:
Access to fetch at '...' from origin '...' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.以下是笔者咨询ChatGPT后得到的答复：
CORS 报错，其实不是前端配置的问题，而是由于 hCaptcha 的后端验证 API https://api.hcaptcha.com/siteverify↗ 并不支持从浏览器前端直接调用。这属于安全设计 —— 账户密钥 secret 是敏感信息，只能在后端服务器中使用，而不能暴露在浏览器中。 前端浏览器的请求携带了 secret 密钥，被浏览器当成跨域请求（CORS），而 api.hcaptcha.com 出于安全考虑并不允许浏览器跨域访问验证接口。
后记
谁能想到hCaptcha的中文版好奇怪，一看就是直接拿翻译软件的，不然保存为什么会是节省
虽然save的确有个意思就是节省啦…
Turnstile
Turnstile的好处：不需要做反人类的图像和文本验证…
Turnstile的坏处：国内环境有一定的几率会验证失败…
Turnstile是什么
CF的帮助文档有，自己去搜
前期准备
打开Cloudflare仪表板→Turnstile（如下图所示）
点击添加小组件
小组件名称随便写，你看得懂就行
主机名填写你的网站即可（注：如果你需要本地部署，可以增加127.0.0.1）
剩下的小组件模式和预先许可，你可以查看它们的帮助文档（蓝色的框框）
完成后下滑，点击创建，会弹出以下页面：
对于这两个密钥，你可以先手复制，也可以稍后复制（反正它不会消失的~）
开始部署
前端测试
打开你的本地项目，首先键入基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Demo CF-Turnstile</title>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=_turnstileCb" async defer></script>
<style>
.center{
text-align: center;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<script>
function _turnstileCb() {
turnstile.render('#cf-turnstile', {
sitekey: '',// 填充你的站点密钥
});
}
</script>
<div class="center">
<h1>Turnstile 验证</h1>
<div id="cf-turnstile"></div>
</div>
</body>
</html>第6行，这是turnstile的api，必须有，其中onload=_turnstileCb意思是API加载 成功后自动执行_turnstileCb函数
这个时候你的页面应该是这样子的：
这个时候你就可以自己做一遍了（可能有点慢？）
后端验证
首先我们需要创建一个Workers
创建Workers的流程不再赘述，详情可看创建Workers in hCaptcha
进入部署页面后，删光原有代码，然后粘贴以下代码：
export default {
async fetch(request, env, ctx) {
const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'; // CF 后端验证网址
const secret = ""; //在此处填充你的密钥（站点密钥下面那个）
const token = (new URL(request.url)).pathname.split("/")[1];//获取挑战编码
let packages=new FormData();
packages.append("secret",secret);
packages.append("response",token);
let response=await fetch(url,{body:packages,method:"POST"});//发送验证请求
let res=await response.json();
return new Response(JSON.stringify(res),{headers:{
"content-type": "application/json;charset=UTF-8"}
});
},
};回到本地项目，给脚本加点东西
<script>
function _turnstileCb() {
turnstile.render('#cf-turnstile', {
sitekey: '',// 填充你的站点密钥
callback: async function(token){
const url = "";//填充你刚才画蓝线的网址，注意加上 https:// 前缀
let response=await fetch(`${url}/${token}`);
let res=await response.json();
if(res.success)alert("OK");//目标：完成验证后弹窗
}
});
}
</script>到这一步基本上大功告成了，如下图所示：
控制台的401
部署的时候可能会发现：控制台报了401错误？
笔者前去帮助文档找到了相关的内容：
您可以放心地忽略该错误。它正在请求您的设备或浏览器尚不支持的专用访问令牌（PAT）。 （原话：You can safely ignore the error. It is requesting a Private Access Token (PAT) that your device or browser does not support yet.）
一句话总结：不管它就得了
后记
如何让Turnstile验证快一些？
多多点击页面，向CF表面你是真人，急切希望通过这个该死的挑战
笔者亲试，成功率蛮高的
reCaptcha
reCaptcha的好处：使用率高，还算简单（吧）…
reCaptcha的坏处：天崩开局炸退99%的人（需要科学上网）…
reCaptcha是什么
自己去搜
前期准备
首先你需要注册一个Google账户（具体如何注册，自行上网查阅）
但是呢，由于Google在国内被防火长城墙了，所以会一直报响应超时或者连接重置
这个时候你就得科学上网了
进入页面后，标签名称随便写，你看得懂就行
reCaptcha类型，笔者在这里介绍的是v2的人机身份验证，若你 有其他需求，可以去看reCaptcha的帮助文档，有介绍到
域名填写你的网站即可（注：如果你需要本地部署，可以增加127.0.0.1， 而且可以按回车添加）
至于Google Cloud Platform的项目名称，笔者不太了解，随便填填就得
完成后下滑，点击提交，然后会弹出这个页面：
对于这两个密钥，你可以先手复制，也可以稍后复制（反正它也不会消失的~）
开始部署
打开你的本地项目，首先键入基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Demo reCaptcha</title>
<script src="https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
<style>
.center{
text-align: center;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<script>
function onloadCallback() {
grecaptcha.render('recaptcha', {
'sitekey' : '',// 填充你的站点密钥
});
};
</script>
<div class="center">
<h1>reCaptcha 验证</h1>
<div id="recaptcha"></div>
</div>
</body>
</html>第6行，这是recaptcha的api，必须有，其中onload=onloadCallback意思是API加载 成功后自动执行onloadCallback函数
这个时候你的页面应该是这样子的：
这个时候你就可以自己做一遍了
后端验证
首先我们需要创建一个Workers
创建Workers的流程不再赘述，详情可看创建Workers in hCaptcha
进入部署页面后，删光原有代码，然后粘贴以下代码：
export default {
async fetch(request, env, ctx) {
const url = 'https://www.recaptcha.net/recaptcha/api/siteverify'; // recaptcha 后端验证网址
const secret = ""; //在此处填充你的密钥（站点密钥下面那个）
const token = (new URL(request.url)).pathname.split("/")[1];//获取挑战编码
let response=await fetch(`${url}?secret=${secret}&response=${token}`,{method:"POST"});//发送验证请求
let res=await response.json();
return new Response(JSON.stringify(res),{headers:{
"content-type": "application/json;charset=UTF-8"}
});
},
};回到本地项目，给脚本加点东西
<script>
function onloadCallback() {
grecaptcha.render('recaptcha', {
'sitekey' : '',// 填充你的站点密钥
'callback' : async function(args){
const url = "";//填充你刚才画蓝线的网址，注意加上 https:// 前缀
let response=await fetch(`${url}/${args}`);
let res=await response.json();
if(res.success)alert("OK");//目标：完成验证后弹窗
}
});
};
</script>到这一步基本上大功告成了，如下图所示：
后记
总而言之，言而总之
希望大家都能学废吧（bushi）
（最起码别给机器人把评论区刷成鸟屎）
如果你碰到了难题，随时可以通过联系笔者，笔者会为你解答