网站集成Invisible reCaptcha遇阻：g-recaptcha-response始终为空

看起来你在集成隐形reCaptcha时踩了它的核心逻辑坑——它和可见版的触发方式完全不同，直接提交表单的话根本不会生成g-recaptcha-response字段。下面是针对性的排查和修复步骤：

1. 确认前端脚本加载的正确性 #

首先要保证在页面header里加载reCaptcha脚本时，带上你的站点密钥和正确的渲染参数：

<script src="https://www.google.com/recaptcha/api.js?render=你的站点密钥"></script>

注意这里用的是「站点密钥」（site key），不是后端验证用的「密钥」（secret key），别搞混了。

2. 正确绑定reCaptcha到表单/提交按钮 #

隐形reCaptcha不会显示验证框，所以必须通过回调或自动渲染来触发验证，常见两种方式：

方式一：自动绑定到表单 #

给你的表单标签添加data-sitekey和data-callback属性，同时确保表单的提交行为会被reCaptcha拦截：

<form id="contact-form" method="POST" action="contact.php" 
      data-sitekey="你的站点密钥" 
      data-callback="handleFormSubmit">
  <!-- 你的表单字段：姓名、邮箱、留言等 -->
  <button type="submit">提交</button>
</form>

然后在script.js里定义回调函数，这个函数才是真正提交表单的入口（reCaptcha验证通过后才会调用它）：

function handleFormSubmit(token) {
  // 验证通过后，手动提交表单
  document.getElementById("contact-form").submit();
}

方式二：手动触发验证（适合自定义提交逻辑） #

如果你的表单有自定义的提交按钮事件，不要直接调用submit()，而是先触发reCaptcha验证：

// 监听提交按钮点击
document.getElementById("submit-btn").addEventListener("click", function(e) {
  e.preventDefault(); // 阻止默认提交
  // 调用reCaptcha验证
  grecaptcha.ready(function() {
    grecaptcha.execute('你的站点密钥', {action: 'contact'}).then(function(token) {
      // 把生成的token作为隐藏字段添加到表单
      let tokenInput = document.createElement('input');
      tokenInput.type = 'hidden';
      tokenInput.name = 'g-recaptcha-response';
      tokenInput.value = token;
      document.getElementById("contact-form").appendChild(tokenInput);
      // 现在再提交表单
      document.getElementById("contact-form").submit();
    });
  });
});

3. 排查后端获取字段的正确性 #

确保contact.php里是通过$_POST['g-recaptcha-response']获取值，注意字段名的拼写——是连字符，不是下划线，别写成g_recaptcha_response了。

4. 检查控制台的JS错误 #

打开浏览器开发者工具（F12）的Console面板，看看有没有脚本加载失败、回调函数未定义之类的错误，这些都会导致reCaptcha根本无法触发验证，自然不会生成g-recaptcha-response。

5. 确认域名已加入reCaptcha控制台 #

登录Google reCaptcha控制台，检查你当前网站的域名（包括localhost本地测试）是否已经添加到允许列表里，域名不匹配的话，验证请求会被拒绝，也可能导致字段为空。

按照以上步骤调整你的代码，应该就能解决g-recaptcha-response始终为空的问题了。

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