如何在同一页面使用多个Google reCAPTCHA？异常问题求助

我来帮你搞定这个问题！你遇到的情况是因为两个reCAPTCHA实例没有被正确区分，导致验证逻辑串在一起了。下面是具体的解决思路和完整代码示例：

核心问题分析 #

当使用render=explicit模式加载reCAPTCHA时，所有实例需要有独立的容器ID和对应的验证回调/状态存储，否则会出现多个实例共享同一验证结果的情况——这就是为什么你验证第一个后，第二个测试也返回“非零”的原因。

解决方案步骤 #

1. 给每个reCAPTCHA分配唯一的容器ID #

在HTML里为每个验证码创建独立的容器，确保ID不重复：

<!-- 第一个reCAPTCHA容器 -->
<div id="captcha1" class="g-recaptcha"></div>
<button onclick="testCaptcha(1)">测试第一个reCAPTCHA</button>

<!-- 第二个reCAPTCHA容器 -->
<div id="captcha2" class="g-recaptcha"></div>
<button onclick="testCaptcha(2)">测试第二个验证码</button>

2. 定义独立的状态存储和回调函数 #

我们需要为每个实例存储各自的验证响应值，避免互相干扰：

// 存储每个验证码的响应值，key为实例ID
var captchaResponses = {
  1: '',
  2: ''
};

// 第一个验证码的回调函数
function CaptchaCallback1(response) {
  captchaResponses[1] = response;
}

// 第二个验证码的回调函数
function CaptchaCallback2(response) {
  captchaResponses[2] = response;
}

3. 显式渲染每个reCAPTCHA实例 #

在onload回调里，分别渲染两个实例，指定各自的容器ID、sitekey和回调函数：

// 全局加载完成回调
function CaptchaCallback() {
  // 渲染第一个reCAPTCHA
  grecaptcha.render('captcha1', {
    'sitekey': '你的Site Key', // 替换成你的实际sitekey
    'callback': 'CaptchaCallback1'
  });

  // 渲染第二个reCAPTCHA
  grecaptcha.render('captcha2', {
    'sitekey': '你的Site Key', // 可与第一个使用同一sitekey
    'callback': 'CaptchaCallback2'
  });
}

4. 编写测试函数，对应验证每个实例的响应 #

测试时根据实例ID读取对应的响应值：

function testCaptcha(instanceId) {
  var response = captchaResponses[instanceId];
  if (response !== '') {
    alert('非零'); // 验证通过的情况
  } else {
    alert('请完成验证码验证'); // 未验证的情况
  }
}

完整的代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

<script>
var captchaResponses = {
  1: '',
  2: ''
};

function CaptchaCallback1(response) {
  captchaResponses[1] = response;
}

function CaptchaCallback2(response) {
  captchaResponses[2] = response;
}

function CaptchaCallback() {
  grecaptcha.render('captcha1', {
    'sitekey': 'YOUR_SITE_KEY',
    'callback': 'CaptchaCallback1'
  });

  grecaptcha.render('captcha2', {
    'sitekey': 'YOUR_SITE_KEY',
    'callback': 'CaptchaCallback2'
  });
}

function testCaptcha(instanceId) {
  var response = captchaResponses[instanceId];
  if (response) {
    alert('非零');
  } else {
    alert('请先完成对应的验证码验证');
  }
}
</script>

<div id="captcha1" class="g-recaptcha"></div>
<button onclick="testCaptcha(1)">测试第一个reCAPTCHA</button>

<br><br>

<div id="captcha2" class="g-recaptcha"></div>
<button onclick="testCaptcha(2)">测试第二个验证码</button>

关键注意事项 #

• 每个reCAPTCHA实例必须有唯一的容器ID，不能重复使用同一个ID。
• 回调函数要分别绑定到对应的实例，确保响应值存储到独立的变量中。
• 同一页面的多个reCAPTCHA可以使用同一个sitekey，Google官方允许这种用法。

这样修改后，两个reCAPTCHA的验证状态就会完全独立，测试第一个时只会读取第一个的响应，测试第二个时读取第二个的响应，就不会出现串结果的情况啦！

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