提交表单后未获取reCaptcha v3响应的问题求助

• 前端脚本与初始化检查

  • 确认页面已正确引入reCaptcha v3脚本：<script src="https://www.google.com/recaptcha/api.js?render=你的站点密钥"></script>，脚本需放在表单提交逻辑之前加载，且替换为实际的v3站点密钥。
  • 必须在页面加载完成后调用 grecaptcha.ready() 方法，确保API初始化完成后再执行token获取操作。

• 表单提交时的token处理逻辑

  • 提交表单前，调用 grecaptcha.execute('你的站点密钥', {action: 'submit'}) 获取token，注意action参数要和后端验证时保持一致。
  • 获取token后，需将其通过隐藏字段（如 <input type="hidden" name="g-recaptcha-response" value="获取到的token">）加入表单，或通过AJAX请求携带至后端。
  • 打开浏览器控制台（F12），查看是否存在grecaptcha未定义、密钥无效等JS报错。

• 密钥配置验证

  • 确认使用的是reCaptcha v3的密钥对，v2密钥无法兼容v3。
  • 检查Google后台密钥配置：确保localhost（或开发域名）已添加至“域名”列表，注意不要带端口（除非明确指定了端口访问）。

• 后端接收与验证逻辑

  • 后端需接收前端传递的g-recaptcha-response参数，向https://www.google.com/recaptcha/api/siteverify发送POST请求，携带secret（你的密钥）、response（前端传入的token）、remoteip（可选）。
  • 验证后端是否正确处理响应：需判断success字段为true，同时检查action字段与前端设置一致。

• 常见避坑点

  • 禁止在本地file://协议下测试，必须使用HTTP/HTTPS协议（如localhost的HTTP服务）。
  • 若用AJAX提交表单，需等待grecaptcha.execute()的Promise完成后再发送请求，避免提前提交导致token缺失。

内容的提问来源于stack exchange，提问作者PrimeBeat