在同一页面上验证多个 recaptcha (V2)

Posted 2023-02-22

【中文标题】在同一页面上验证多个 recaptcha (V2)

【英文标题】：Validate multiple recaptcha (V2) on the same page

【发布时间】：2017-03-14 12:18:51

【问题描述】：

我想知道当同一页面上有多个时如何验证 Recaptcha 客户端。我找到了这个https://***.com/a/28607943/5649602，如果我有一个就可以了。

但是现在我在每个页面的页脚都有一个，并且在一些注册表单中都有一个，所以主题有可能同时出现。

如有任何建议，我将不胜感激。谢谢。 :)

【问题讨论】：

应该没问题

如何定位特定元素？我怎么知道回复来自验证注册表，而不是页脚中的表格？

对每个 recaptcha 使用不同的类

是的，您需要一个不同的选择器。这个答案也可能有助于 b/c 它详细说明基于 Google reCaptcha 文档的多个 reCaptchas 的代码：***.com/questions/29612879/…

我已经解决了。让我感到困惑的术语是在文档中它说元素的 html id 或类似的东西。我一直打电话给 id, class.. 问题是，当你启动 recaptcha 时，你应该将语句保存到变量中，这就是你用来识别某些 recaptcha 的 id。总之谢谢各位。 :)

【参考方案1】：

验证尽可能多的 g-captcha validate 的最简单方法

首先你在</head>标签之前包含api.js，如下所示

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit"></script>

在您的 HTML 中添加此代码

<div class="g-recaptcha-contact" data-sitekey="Your Site Key" id="RecaptchaField2"></div>
<input type="hidden" class="hiddenRecaptcha" name="ct_hiddenRecaptcha" id="ct_hiddenRecaptcha">

<div class="g-recaptcha-quote" data-sitekey="Your Site Key" id="RecaptchaField1"></div>
<input type="hidden" class="hiddenRecaptcha" name="qt_hiddenRecaptcha" id="qt_hiddenRecaptcha">

将此代码添加到带有<script> 标签的页脚后

var CaptchaCallback = function() 
    var widgetId1;
    var widgetId2;
    widgetId1 = grecaptcha.render('RecaptchaField1', 'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_quote);
    widgetId2 = grecaptcha.render('RecaptchaField2', 'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_contact);
;
var correctCaptcha_quote = function(response) 
    $("#qt_hiddenRecaptcha").val(response);
;
var correctCaptcha_contact = function(response) 
    $("#ct_hiddenRecaptcha").val(response);
;

开发人员的最后一个简单步骤如下添加 Jquery 验证

$("#form_id").validate(
    ignore: [],
    rules: 
        ct_hiddenRecaptcha:  required: true, ,
        qt_hiddenRecaptcha:  required: true, ,
    ,
);

【讨论】：

使用上述解决方案：您也可以在任何地方使用，无需回调，如 EX# var widgetId1; widgetId1 = grecaptcha.render('RecaptchaField1', 'sitekey' : '你的站点密钥');并且你想验证它只是使用 grecaptcha.getResponse(widgetId1 )