reCAPTCHA v3表单提交无Token生成问题求助

核心问题：你在表单/提交按钮配置了reCAPTCHA的sitekey，但AJAX提交时仅传递sitekey，未生成并携带g-recaptcha-response验证Token，且希望保留现有函数逻辑。以下是针对性解决步骤：

基础前提：确保加载官方reCAPTCHA脚本 #

首先必须在页面中加载reCAPTCHA的官方脚本，否则所有配置都无效：

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

针对两种sitekey配置方式的调整 #

1. 表单标签配置sitekey的情况 #

如果你的表单标签是类似<form data-sitekey="你的sitekey">的配置：

• reCAPTCHA会自动在表单内渲染验证组件，但AJAX提交不会自动携带Token，需要手动获取并添加到请求数据中。
• 在你的现有AJAX提交函数中，加入Token获取逻辑：

// 你的现有提交函数
function submitForm() {
  // 获取reCAPTCHA验证Token
  const recaptchaToken = grecaptcha.getResponse();
  
  // 验证Token是否存在，未完成验证则提示用户
  if (!recaptchaToken) {
    alert('请完成验证码验证');
    return;
  }

  // 原有AJAX逻辑，将Token加入请求数据
  $.ajax({
    url: '你的提交接口地址',
    type: 'POST',
    data: {
      // 保留你原有的表单数据
      username: $('#username').val(),
      email: $('#email').val(),
      // 新增reCAPTCHA Token参数
      'g-recaptcha-response': recaptchaToken
    },
    success: function(res) {
      // 你的成功处理逻辑
    },
    error: function(xhr) {
      // 你的错误处理逻辑
      // 验证失败时可以重置验证码：grecaptcha.reset();
    }
  });
}

2. 提交按钮配置sitekey的情况 #

如果你的提交按钮是类似<button class="g-recaptcha" data-sitekey="你的sitekey">的配置：

• 必须通过data-callback指定验证完成后的回调函数，避免直接绑定按钮的click事件（否则会跳过验证直接提交）。
• 修改按钮配置并关联回调，在回调中执行你的AJAX逻辑：

<!-- 修改按钮，添加data-callback属性 -->
<button class="g-recaptcha" data-sitekey="你的sitekey" data-callback="handleRecaptchaSubmit">提交</button>

// 回调函数，用户完成验证后自动触发
function handleRecaptchaSubmit(token) {
  // 直接复用你现有的AJAX逻辑，将Token加入请求数据
  $.ajax({
    url: '你的提交接口地址',
    type: 'POST',
    data: {
      // 保留原有的表单数据
      ...
      // 新增reCAPTCHA Token参数
      'g-recaptcha-response': token
    },
    success: function(res) {
      // 你的成功处理逻辑
    },
    error: function(xhr) {
      // 你的错误处理逻辑
      grecaptcha.reset(); // 重置验证码以便重新验证
    }
  });
}

关键注意事项 #

• 不要同时在表单和按钮上配置sitekey，选择一种方式即可，避免渲染冲突。
• 如果页面加载完成后reCAPTCHA组件未正常渲染，可以使用grecaptcha.render()手动初始化（适合动态生成的表单/按钮）。
• 验证失败后调用grecaptcha.reset()重置验证码，方便用户重新完成验证。

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