当前位置：首页 > news >正文

Google reCAPTCHA实现

news 来源：原创 2025/6/28 23:24:33

Google reCAPTCHA 的前端实现主要分为 reCAPTCHA v2（复选框/图像验证）和 v3（无感验证）两种模式。以下是具体实现步骤和代码示例，结合关键注意事项：

🔧 一、reCAPTCHA v2 实现（复选框/图像验证）

1. 引入 reCAPTCHA API 脚本

在 HTML 的 <head> 中添加官方脚本：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

2. 在表单中嵌入验证组件

复选框模式（用户点击“我不是机器人”）：

<form><div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div><button type="submit">提交</button>
</form>

图像挑战模式（需用户识别图像）：
同上，但 data-sitekey 需替换为你的公钥（从 Google reCAPTCHA 控制台获取）。

3. 验证用户响应（前端交互）

使用 grecaptcha.getResponse() 获取验证结果：

function handleSubmit() {const response = grecaptcha.getResponse();if (!response) {alert("请完成人机验证！");return false;}// 发送 response 到后端验证
}

启用提交按钮的交互优化（可选）：
通过 data-callback 在验证通过后激活按钮：

<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="enableBtn"></div>
<button id="submitBtn" disabled>提交</button>
<script>function enableBtn() {document.getElementById("submitBtn").disabled = false;}
</script>

🤖 二、reCAPTCHA v3 实现（无感验证）

1. 引入 API 脚本（指定公钥）

<script src="https://www.google.com/recaptcha/enterprise.js?render=YOUR_SITE_KEY"></script>

2. 在关键操作前获取令牌

grecaptcha.enterprise.ready(() => {grecaptcha.enterprise.execute('YOUR_SITE_KEY', { action: 'login' }).then(token => {// 将 token 附加到表单或 Ajax 请求const form = document.getElementById("loginForm");form.innerHTML += `<input type="hidden" name="recaptchaToken" value="${token}">`;form.submit();});
});

action 参数用于标识操作类型（如 login、submit），后端可据此分析风险。

⚠️ 三、关键注意事项

后端验证必须实现
前端获取的 response 或 token 需发送到后端，通过 Google API 验证有效性（防止伪造）：

# Python 示例（后端）
import requests
secret_key = "YOUR_SECRET_KEY"
response = requests.post("https://www.recaptcha.net/recaptcha/api/siteverify",data={"secret": secret_key, "response": user_token}
).json()
if not response["success"]:return "验证失败"

国内网络环境特殊处理
若用户在国内，需通过反向代理访问 reCAPTCHA：
- Nginx 代理配置示例：
```
location /recaptcha {proxy_pass https://www.recaptcha.net;proxy_set_header Host $host;
}
```
- 前端替换 API 地址为代理路径：
```
<script src="/recaptcha/api.js"></script>
```

版本选择建议

场景	推荐版本	特点
登录/注册表单	v2 复选框	用户感知明显，安全性高
高频操作（如评论）	v3	无干扰，通过评分（0.0~1.0）判定风险
支付/敏感操作	v2 图像挑战	高安全性，但用户体验较差