Google reCAPTCHA实现

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

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

1. 引入 reCAPTCHA API 脚本

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

html 复制代码

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

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

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

html 复制代码

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

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

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

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

javascript 复制代码

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

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

html 复制代码

<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 脚本（指定公钥）

html 复制代码

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

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

javascript 复制代码

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 复制代码

# 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 代理配置示例 ：
  nginx 复制代码
```
location /recaptcha {
  proxy_pass https://www.recaptcha.net;
  proxy_set_header Host $host;
}
```
- 前端替换 API 地址为代理路径：
  html 复制代码
```
<script src="/recaptcha/api.js"></script>
```

版本选择建议

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

🚫 四、常见问题解决

验证码不显示 ：检查公钥是否正确、网络是否可访问 www.google.com（国内需代理）。
错误 "Invalid site key"：确认控制台中密钥与域名匹配。
v3 评分低 ：调整 action 粒度，或结合 v2 挑战高风险用户。

🔐 五、隐私与替代方案

隐私争议：reCAPTCHA 被指控收集用户行为数据（鼠标轨迹、设备指纹）用于广告追踪，需评估合规性。
国内替代方案 ：
若需规避网络或隐私问题，可考虑：
- 腾讯验证码（腾讯云 Captcha）
- 阿里云验证码。

💎 总结：前端实现仅完成 50%，后端验证才是安全的核心。建议 v3 用于高频低敏操作，v2 用于关键流程，国内用户务必配置代理或改用本地服务。