Google Invisible reCAPTCHA v2集成PHP+Ajax表单提交后无邮件如何解决

你的问题核心是仅完成了Invisible reCAPTCHA的前端加载配置，未实现完整的验证链路：既没有将验证码校验通过后的token传入后端，也没有在后端做token合法性校验，导致表单提交逻辑被拦截，无法触发邮件发送。按以下步骤修改即可：

1. 修改vendor-contact.php #

• 修复提交按钮重复定义class属性的问题，合并class值
• 新增隐藏域存储验证码校验token
  修改后的按钮和表单新增部分代码如下：

<!-- 新增隐藏域放在表单任意位置即可 -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response" value="">

<div class="form-group">
  <!-- 合并两个class属性，保留原有配置 -->
  <button type="submit" id="book-now-on" class="btn btn-pink g-recaptcha" data-sitekey="你在谷歌后台获取的前端站点密钥" data-callback="onSubmit" style="background: #4d1e25;">
    <?php esc_html_e('Submit','weddlist'); ?>
  </button>
</div>

注意将data-sitekey的值替换为你自己申请的reCAPTCHA v2前端站点密钥。

2. 修改login.js #

• 新增验证码校验通过后的回调函数onSubmit
• 在AJAX提交的参数中新增验证码token字段
  修改后的完整代码如下：

// 新增验证码回调函数，放在原有提交监听代码之前即可
function onSubmit(token) {
  document.getElementById('g-recaptcha-response').value = token;
  // 手动触发表单提交逻辑
  jQuery('#booknowbox').trigger('submit');
}

jQuery('form#booknowbox').on('submit', function(e){
  if (!jQuery("#booknowbox").valid()) return false;       
  jQuery('.status', this).show().text(ajax_login_object.loadingmessage);
  action = 'weddlist_ajax_sendme';
  name = jQuery('#booknowbox #name').val();
  phone = jQuery('#booknowbox #phone').val();
  email = jQuery('#booknowbox #email').val();
  date = jQuery('#booknowbox #date').val();
  details = jQuery('#booknowbox #details').val();
  post_id = jQuery('#booknowbox #post_id').val();
  item_title = jQuery('.item_title').text();
  user_email_id = jQuery('#booknowbox #user_email_id').val();
  vendorid = jQuery('#booknowbox #vendorid').val();
  security = jQuery('#booknowbox #security').val();
  // 新增获取验证码token
  recaptcha_response = jQuery('#g-recaptcha-response').val();

  var sendme='';
  jQuery('input[name="sendme"]:checked').each(function() {
     sendme=sendme+'--'+this.value;
  }); 
  
  jQuery('.status').html('Loading..... ');
  jQuery.ajax({
      type: 'POST',
      url: ajax_login_object.ajaxurl,
      data: {
          'action': action,
          'name': name,
          'phone': phone,
          'email': email,
          'date': date,
          'details': details,
          'sendme': sendme,
          'item_title':item_title,
          'user_email_id':user_email_id,
          'post_id':post_id,
          'vendorid':vendorid,
          'item_url':window.location.href,                
          'security': security,
          // 新增传验证码token
          'g_recaptcha_response': recaptcha_response
      },
      success: function (data) {
          jQuery('.status').show();
          jQuery('.status').html(data);
          jQuery('#booknowbox #name').val('');
          jQuery('#booknowbox #phone').val('');
          jQuery('#booknowbox #email').val('');
          jQuery('#booknowbox #date').val('');
          // 提交完成后重置验证码，支持多次提交
          grecaptcha.reset();
      }
  });
  e.preventDefault();
});

3. 修改ajax-call-function.php #

在weddlist_ajax_sendme函数最开头新增验证码校验逻辑，验证通过后再执行后续发邮件逻辑：

function weddlist_ajax_sendme()
{
  global $current_user,$weddlist;
  wp_get_current_user();
  
  // 新增reCAPTCHA校验逻辑
  $recaptcha_secret = '你在谷歌后台获取的后端服务器密钥';
  $recaptcha_response = sanitize_text_field($_POST['g_recaptcha_response']);
  $verify_params = [
      'secret' => $recaptcha_secret,
      'response' => $recaptcha_response,
      'remoteip' => $_SERVER['REMOTE_ADDR']
  ];
  // 发送校验请求
  $verify_request = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
      'body' => $verify_params
  ]);
  if(is_wp_error($verify_request)){
      echo '<div class="alert alert-warning" role="alert"><button aria-label="Close" data-dismiss="alert" class="close" type="button"><span aria-hidden="true">&times;</span></button>验证码校验请求失败，请刷新后重试。</div>';
      die();
  }
  $response_body = json_decode(wp_remote_retrieve_body($verify_request), true);
  if(!$response_body['success']){
      echo '<div class="alert alert-warning" role="alert"><button aria-label="Close" data-dismiss="alert" class="close" type="button"><span aria-hidden="true">&times;</span></button>验证码验证失败，请刷新后重试。</div>';
      die();
  }

  // 以下是原有代码，不需要修改
  $allowed_html   =   array();
  $vendorid     =   $_POST['vendorid'];
  // ... 原有代码保持不变
}

注意将$recaptcha_secret的值替换为你自己申请的reCAPTCHA v2后端服务器密钥，确保站点域名和你在谷歌reCAPTCHA后台绑定的域名一致。

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