迁移至Invisible Recaptcha：PHP验证失败、data-callback添加及AJAX验证咨询

嘿，我之前迁移到Invisible reCAPTCHA时也踩过类似的坑，咱们一步步来搞定这两个问题：

1. 如何添加data-callback到Invisible reCAPTCHA #

Invisible reCAPTCHA的触发逻辑绑定在带有g-recaptcha类的按钮上，你需要直接在这个按钮上配置data-callback属性，同时确保回调函数是全局可访问的：

步骤1：修改表单提交按钮 #

把原来的提交按钮替换成带有reCAPTCHA属性的按钮，同时阻止表单默认提交行为：

<form id="contact-form" onsubmit="return false;">
  <!-- 你的表单输入字段 -->
  <button class="g-recaptcha" 
          data-sitekey="你的站点密钥" 
          data-callback="handleRecaptchaSuccess">
    提交表单
  </button>
</form>

步骤2：定义全局回调函数 #

在页面的<script>标签中（确保在reCAPTCHA官方脚本之后）定义回调函数，它会在用户完成验证后自动触发：

function handleRecaptchaSuccess(token) {
  // 这里可以直接触发AJAX验证，或者执行其他自定义逻辑
  console.log('reCAPTCHA验证成功，token:', token);
  // 调用AJAX验证函数
  validateRecaptchaWithAJAX(token);
}

2. 通过AJAX仅执行Recaptcha的PHP验证 #

接下来咱们用AJAX把reCAPTCHA的验证凭证传给sender.php，用google/recaptcha库完成后端验证：

步骤1：编写AJAX请求逻辑 #

在刚才的回调函数里添加AJAX代码（这里用原生fetch示例，用jQuery也可以）：

function validateRecaptchaWithAJAX(token) {
  fetch('sender.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `g-recaptcha-response=${encodeURIComponent(token)}`
  })
  .then(response => response.json())
  .then(result => {
    if (result.success) {
      // 验证成功：可以执行发送邮件等后续业务逻辑
      alert('reCAPTCHA验证通过！');
      // 如果需要，也可以在这里手动提交表单
      // document.getElementById('contact-form').submit();
    } else {
      // 验证失败：提示用户并重置reCAPTCHA
      alert(`验证失败，错误：${result.errors.join(', ')}`);
      grecaptcha.reset(); // 重置验证状态，让用户可以重新操作
    }
  })
  .catch(error => {
    console.error('请求出错:', error);
    grecaptcha.reset();
  });
}

步骤2：修改sender.php的验证逻辑 #

确保你已经通过Composer安装了google/recaptcha库，然后在sender.php中编写验证代码：

<?php
// 引入google/recaptcha库
require_once 'vendor/autoload.php';

// 替换成你的reCAPTCHA私密密钥
$secretKey = '你的私密密钥';
$recaptcha = new \ReCaptcha\ReCaptcha($secretKey);

// 获取前端传来的验证token和用户IP
$token = $_POST['g-recaptcha-response'] ?? '';
$userIp = $_SERVER['REMOTE_ADDR'];

// 执行reCAPTCHA验证
$response = $recaptcha->verify($token, $userIp);

// 返回JSON格式的验证结果
header('Content-Type: application/json');
if ($response->isSuccess()) {
  echo json_encode([
    'success' => true,
    'message' => '验证通过'
  ]);
  // 这里可以添加你的业务逻辑，比如发送邮件、保存表单数据等
} else {
  echo json_encode([
    'success' => false,
    'errors' => $response->getErrorCodes()
  ]);
}
?>

额外注意事项 #

• 确保你的站点密钥和私密密钥是针对Invisible reCAPTCHA生成的，不要混用普通reCAPTCHA的密钥
• 如果前端和后端不在同一域名，需要在后端配置CORS允许跨域请求
• 验证失败后一定要调用grecaptcha.reset()，否则用户无法再次触发验证流程

内容的提问来源于stack exchange，提问作者Elias Rodriguez Pizarro