人机验证几乎是所有公开表单的标配能力，无论是注册登录、评论提交还是营销活动抽奖，只要接口暴露在公网上，就免不了被脚本刷。reCAPTCHA v3由谷歌推出，主打无感验证，用户不需要点击任何复选框，系统在后台根据行为打分来判断是否为真人；hCaptcha则是近年流行的替代方案，隐私政策相对友好，在国内的可用性也更好。这篇文章以React为例，手把手讲解两套方案的接入方式、组件封装和后端校验流程。
一、接入reCAPTCHA v3：从脚本加载到token获取
reCAPTCHA v3的核心思路是“持续观察、按需打分”。它在页面加载后默默收集用户行为数据，生成一个0到1之间的分数，分数越高越像真人。前端要做的第一件事是引入官方脚本。打开谷歌后台申请一个Site Key（域名验证类型的v3即可），然后在React入口文件中动态注入脚本：
// utils/recaptcha.js
export function loadReCaptcha(siteKey) {
return new Promise((resolve, reject) => {
if (window.grecaptcha) {
resolve(window.grecaptcha);
return;
}
const script = document.createElement('script');
script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
script.async = true;
script.onload = () => resolve(window.grecaptcha);
script.onerror = reject;
document.head.appendChild(script);
});
}
脚本加载完成后，在任何需要验证的动作触发点（比如提交按钮的onClick）调用grecaptcha.execute获取一次性token。注意这个token只能消费一次，且有效期约两分钟，所以不要在页面加载时提前获取，而是在用户真正提交的那一刻去拿。
async function handleSubmit() {
const token = await window.grecaptcha.execute(SITE_KEY, {
action: 'submit_comment'
});
// 把token随表单一起发给后端
await fetch('/api/comment', {
method: 'POST',
body: JSON.stringify({ content, token })
});
}
推荐把这套逻辑封装成一个自定义Hook，例如useReCaptcha，内部管理脚本加载状态和execute调用，组件层面只关心拿到token。同时建议给execute加上超时和异常捕获，谷歌脚本在部分网络环境下可能加载失败，一旦失败应该降级到备用方案而不是让提交按钮永久卡死。
二、接入hCaptcha：兼容reCAPTCHA风格的替代方案
hCaptcha的接入体验和reCAPTCHA v2/v3都相似，它提供hcaptcha.com/1/api.js这样的脚本入口，并且支持invisible模式实现无感弹窗验证。hCaptcha同样需要在控制台申请Site Key和Secret Key。它的一大优势是官方维护了React组件库@hcaptcha/react-hcaptcha，直接安装即可：
npm install @hcaptcha/react-hcaptcha
组件用法非常直观，通过ref调用execute触发验证，在onVerify回调中拿到token：
import HCaptcha from '@hcaptcha/react-hcaptcha';
function LoginForm() {
const captchaRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
captchaRef.current.execute();
};
const onVerify = async (token) => {
// token随登录参数发往后端
await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ username, password, token })
});
};
return (
<form onSubmit={handleSubmit}>
<HCaptcha
ref={captchaRef}
sitekey={SITE_KEY}
size="invisible"
onVerify={onVerify}
/>
<button type="submit">登录</button>
</form>
);
}
hCaptcha的invisible模式在大多数情况下无需用户交互，只有当风控判定风险较高时才弹出图片选择题。这一点和v3的“完全无感但有分数”略有不同：v3不打扰用户但可能误伤，hCaptcha则会在临界情况下要求一次主动确认，安全性和体验之间更容易平衡。另外提交成功后记得调用reset方法重置组件状态，否则第二次提交可能拿不到新token。
三、后端校验：前端token只是第一步
无论用哪家方案，前端拿到的token都必须发到后端做二次校验，这是整个流程中最容易被忽视的一环。很多团队只在客户端集成了验证组件就以为万事大吉，实际上绕过前端直接调接口毫无难度。后端需要拿token请求对应平台的校验接口，reCAPTCHA的校验地址是https://www.google.com/recaptcha/api/siteverify，hCaptcha则是https://api.hcaptcha.com/siteverify，两者都是简单的POST请求：
// Node.js Express示例
async function verifyCaptcha(token, remoteip) {
const res = await fetch('https://api.hcaptcha.com/siteverify', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
secret: process.env.HCAPTCHA_SECRET,
response: token,
remoteip
})
});
const data = await res.json();
if (!data.success) throw new Error('人机验证失败');
// v3场景下还可读取score字段做分级处理
return data;
}
reCAPTCHA v3校验通过后要重点关注返回的score和action字段。action必须和你前端execute时传的一致，否则说明token被挪用；score则建议做分级策略，例如0.7以上直接放行，0.3到0.7之间触发二次验证（发短信、滑块或邮件确认），0.3以下直接拒绝。一刀切地用一个阈值处理所有业务，要么误杀正常用户，要么放过机器流量。
校验接口的返回结果建议记录日志，包括分数、错误码和时间戳，方便后续分析误判率并动态调整阈值。如果部署在国内服务器，请求谷歌的siteverify接口可能超时，务必设置合理的超时时间并考虑使用代理或者直接改用hCaptcha。
四、选型建议与兜底策略
两套方案如何选，主要看三个维度。第一是用户地域，reCAPTCHA在国内的脚本加载和校验接口都不稳定，hCaptcha的可用性明显更好；第二是隐私合规，reCAPTCHA在欧洲多次被监管处罚，hCaptcha对用户数据收集相对克制，如果产品面向欧盟市场，hCaptcha是更稳妥的选择；第三是价格，两家都有免费额度，hCaptcha免费档的限制更宽松一些，中小流量站点基本够用。
工程上建议做一层验证服务抽象，前端封装统一的getCaptchaToken接口，后端封装统一的verifyToken函数，通过配置切换provider。这样当某家服务故障或政策变化时，改一行配置就能切换，不需要大改代码。再配合一个兜底逻辑：当验证服务完全不可用时，降级为自己实现的简单行为验证（比如表单填写时长、鼠标轨迹检测），总比直接裸奔强。
最后提醒一点，人机验证只是纵深防御的一层，不要指望它解决所有问题。接口层面的限流、参数签名、设备指纹以及业务侧的风控规则，需要和验证组件配合使用才能真正形成有效的防护体系。
React reCAPTCHA v3hCaptcha人机验证修改时间：2026-09-13 04:34:29