如何在单个页面上显示多个验证码？

Question

我在一页上有 2 个表格。 其中一个表单始终显示 Recaptcha。 另一个应该仅在特定事件（例如登录尝试次数达到上限）后显示验证码。 因此，有时我需要 2 个验证码出现在同一页面上。 这可能吗？ 我知道我可能可以为两者使用一个，但就我的布局而言，我更喜欢使用 2 个。谢谢。

更新：好吧，我想这可能是不可能的。 有人可以推荐另一个与 reCaptcha 一起使用的捕获库吗？ 我真的希望能够在同一页面上有 2 个验证码。

更新 2：如果我将每个表单放入 iframe 中会怎样？ 这是一个可以接受的解决方案吗？

Answer 1

我知道这个问题已经很老了，但以防万一将来有人会寻找它。 一页上可以有两个验证码。 粉色文档位于此处：https://developers.google.com/recaptcha/docs/display
下面的示例只是一个副本表单文档，您不必指定不同的布局。

<script type="text/javascript">
  var verifyCallback = function(response) {
    alert(response);
  };
  var widgetId1;
  var widgetId2;
  var onloadCallback = function() {
    // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
    // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
    widgetId1 = grecaptcha.render('example1', {
      'sitekey' : 'your_site_key',
      'theme' : 'light'
    });
    widgetId2 = grecaptcha.render(document.getElementById('example2'), {
      'sitekey' : 'your_site_key'
    });
    grecaptcha.render('example3', {
      'sitekey' : 'your_site_key',
      'callback' : verifyCallback,
      'theme' : 'dark'
    });
  };
</script>

Answer 2

grecaptcha.getResponse() 方法接受可选的“widget_id”参数，如果未指定，则默认为创建的第一个小部件。 每个创建的小部件的 grecaptcha.render() 方法都会返回一个 widget_id，它与 reCAPTCHA 容器的属性 id 无关！！

reCAPTCHA 都有自己的响应数据。
您必须为 reCAPTCHA div 提供一个 ID 并将其传递给 getResponse 方法：

例如

<div id="reCaptchaLogin"
     class="g-recaptcha required-entry"
     data-sitekey="<?php echo $this->helper('recaptcha')->getKey(); ?>"
     data-theme="<?php echo($this->helper('recaptcha')->getTheme()); ?>"
     style="transform:scale(0.82);-webkit-transform:scale(0.82);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>


<script type="text/javascript">
  var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        grecaptcha.render(el, {
            'sitekey' : jQuery(el).attr('data-sitekey')
            ,'theme' : jQuery(el).attr('data-theme')
            ,'size' : jQuery(el).attr('data-size')
            ,'tabindex' : jQuery(el).attr('data-tabindex')
            ,'callback' : jQuery(el).attr('data-callback')
            ,'expired-callback' : jQuery(el).attr('data-expired-callback')
            ,'error-callback' : jQuery(el).attr('data-error-callback')
        });
    });
  };
</script>

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

---

访问响应：

var reCaptchaResponse = grecaptcha.getResponse(0);

或

var reCaptchaResponse = grecaptcha.getResponse(1);

Answer 3

我在页脚中有联系表单，始终显示，并且某些页面（例如创建帐户）也可以有验证码，因此它是动态的，我正在使用 jQuery 的下一种方式：

html:

<div class="g-recaptcha" id="g-recaptcha"></div>

<div class="g-recaptcha" id="g-recaptcha-footer"></div>

javascript

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit&hl=en"></script>
<script type="text/javascript">
  var CaptchaCallback = function(){        
      $('.g-recaptcha').each(function(){
        grecaptcha.render(this,{'sitekey' : 'your_site_key'});
      })
  };
</script>

Answer 4

这是 raphadko 和 noun 提供的答案的无 JQuery 版本。

1) 通常使用以下命令创建验证码字段：

<div class="g-recaptcha"></div>

2) 使用以下命令加载脚本：

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

3) 现在调用它来迭代字段并创建验证码：

var CaptchaCallback = function() {
    var captchas = document.getElementsByClassName("g-recaptcha");
    for(var i = 0; i < captchas.length; i++) {
        grecaptcha.render(captchas[i], {'sitekey' : 'YOUR_KEY_HERE'});
    }
};

Answer 5

查看页面的源代码，我获取了 reCaptcha 部分并对代码进行了一些更改。 这是代码：

HTML:

<div class="tabs">
    <ul class="product-tabs">
        <li id="product_tabs_new" class="active"><a href="#">Detailed Description</a></li>
        <li id="product_tabs_what"><a href="#">Request Information</a></li>
        <li id="product_tabs_wha"><a href="#">Make Offer</a></li>
    </ul>
</div>

<div class="tab_content">
    <li class="wide">
        <div id="product_tabs_new_contents">
            <?php $_description = $this->getProduct()->getDescription(); ?>
            <?php if ($_description): ?>
                <div class="std">
                    <h2><?php echo $this->__('Details') ?></h2>
                    <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
                </div>
            <?php endif; ?>
        </div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="more_info_recaptcha_box" class="input-box more_info_recaptcha_box"></div>
    </li>

    <li class="wide">
        <label for="recaptcha">Captcha</label>
        <div id="make_offer_recaptcha_box" class="input-box make_offer_recaptcha_box"></div>
    </li>
</div>

jQuery:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        var recapExist = false;
      // Create our reCaptcha as needed
        jQuery('#product_tabs_what').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            } else if(recapExist == 'more_info_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way
                Recaptcha.create("<?php echo $publickey; ?>", "more_info_recaptcha_box");
                recapExist = "make_offer_recaptcha_box";
            }
        });
        jQuery('#product_tabs_wha').click(function() {
            if(recapExist == false) {
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            } else if(recapExist == 'make_offer_recaptcha_box') {
                Recaptcha.destroy(); // Don't really need this, but it's the proper way (I think :)
                Recaptcha.create("<?php echo $publickey; ?>", "make_offer_recaptcha_box");
                recapExist = "more_info_recaptcha_box";
            }
        });
    });
</script>

我在这里使用简单的 javascript 选项卡功能。 所以，没有包含该代码。

当用户点击“请求信息”(#product_tabs_what) 时，JS 将检查 recapExist 是否为 false 或是否具有某些值。 如果它有一个值，那么这将调用 Recaptcha.destroy(); 来销毁旧加载的 reCaptcha 并为此选项卡重新创建它。 否则，这只会​​创建一个 reCaptcha 并将其放入 #more_info_recaptcha_box div 中。 与“报价”#product_tabs_wha 选项卡相同。

Answer 6

var ReCaptchaCallback = function() {
    	 $('.g-recaptcha').each(function(){
    		var el = $(this);
    		grecaptcha.render(el.get(0), {'sitekey' : el.data("sitekey")});
    	 });  
        };

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


ReCaptcha 1
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 2
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

ReCaptcha 3
<div class="g-recaptcha" data-sitekey="6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw"></div>

Answer 7

要在 raphadko 的答案中添加一点：因为您有多个验证码（在一页上） ），您不能使用（通用）g-recaptcha-response POST 参数（因为它只包含一个验证码的响应）。 相反，您应该对每个验证码使用 grecaptcha.getResponse(opt_widget_id) 调用。 这是我的代码（假设每个验证码都在其表单内）：

HTML:

<form ... />

<div id="RecaptchaField1"></div>

<div class="field">
  <input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>

</form>

和

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

JavaScript:

var CaptchaCallback = function(){
    var widgetId;

    $('[id^=RecaptchaField]').each(function(index, el) {

         widgetId = grecaptcha.render(el.id, {'sitekey' : 'your_site_key'});

         $(el).closest("form").submit(function( event ) {

            this.grecaptcha.value = "{\"" + index + "\" => \"" + grecaptcha.getResponse(widgetId) + "\"}"

         });
    });
};

请注意，我应用了事件委托（请参阅 在追加元素后刷新 DOM ）到所有动态修改的元素。 这将每个单独的验证码的响应绑定到其表单 submit 事件。

Answer 8

一个不错的选择是即时为每个表单生成验证码输入（我已经用两个表单完成了，但您可能可以使用三个或更多表单）。 我使用 jQuery、jQuery 验证和 jQuery 表单插件通过 AJAX 以及 Recaptcha AJAX API 发布表单 -

https://developers.google.com/recaptcha/docs/display#recaptcha_methods

当用户提交其中一种表单时：

1. 拦截提交 - 我使用 jQuery 表单插件的 beforeSubmit 属性
2. 销毁任何现有的页面上的 recaptcha 输入 - 我使用 jQuery 的 $.empty() 方法和 Recaptcha.destroy()
3. 调用 Recaptcha.create() 为特定表单创建一个 recaptcha 字段
4. 返回 false。

然后，他们可以填写验证码并重新提交表单。 如果他们决定提交不同的表单，那么您的代码会检查现有的验证码，因此页面上一次只有一个验证码。

Answer 9

这是一个基于许多优秀答案的解决方案。 此选项是 jQuery 自由且动态的，不需要您通过 id 专门定位元素。

1) 像平常一样添加 reCAPTCHA 标记：

<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>

2) 将以下内容添加到文档中。 它将在任何支持 querySelectorAll API 的浏览器中运行

<script src="https://www.google.com/recaptcha/api.js?onload=renderRecaptchas&render=explicit" async defer></script>
<script>
    window.renderRecaptchas = function() {
        var recaptchas = document.querySelectorAll('.g-recaptcha');
        for (var i = 0; i < recaptchas.length; i++) {
            grecaptcha.render(recaptchas[i], {
                sitekey: recaptchas[i].getAttribute('data-sitekey')
            });
        }
    }
</script>

Answer 10

我会使用隐形验证码。 然后在按钮上使用“ formname='yourformname' ”之类的标签来指定要提交的表单并隐藏提交表单输入。

这样做的好处是它允许您保持 html5 表单验证完整，一个 recapcha，但多个按钮界面。 只需捕获由 recaptcha 生成的令牌密钥的“captcha”输入值。

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

<div class="g-recaptcha" data-sitekey="yours" data-callback="onSubmit" data-size="invisible"></div>
<script>
var formanme = ''
$('button').on('click', function () { formname = '#'+$(this).attr('formname');
    if ( $(formname)[0].checkValidity() == true) { grecaptcha.execute(); }
    else { $(formname).find('input[type="submit"]').click() }
    });

var onSubmit = function(token) {
    $(formname).append("<input type='hidden' name='captcha' value='"+token+"' />");
    $(formname).find('input[type="submit"]').click()
    };
</script>

我发现这更简单，更容易管理。

Answer 11

这是可能的，只需覆盖 Recaptcha Ajax 回调即可。 工作jsfiddle： http://jsfiddle.net/Vanit/Qu6kn/

你甚至不需要proxy div 因为覆盖后 DOM 代码将不会执行。 每当您想再次触发回调时，请调用 Recaptcha.reload()。

function doSomething(challenge){
    $(':input[name=recaptcha_challenge_field]').val(challenge);
    $('img.recaptcha').attr('src', '//www.google.com/recaptcha/api/image?c='+challenge);
}

//Called on Recaptcha.reload()
Recaptcha.finish_reload = function(challenge,b,c){
    doSomething(challenge);
}

//Called on page load
Recaptcha.challenge_callback = function(){
    doSomething(RecaptchaState.challenge)
}

Recaptcha.create("YOUR_PUBLIC_KEY");

Answer 12

这是一个很好的指南，可以做到这一点：

http://mycodde.blogspot.com.ar/2014/12/multiple-recaptcha-demo-same-page.html

基本上，您向 api 调用添加一些参数并手动渲染每个 recaptcha：

<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
<script>
        var recaptcha1;
        var recaptcha2;
        var myCallBack = function() {
            //Render the recaptcha1 on the element with ID "recaptcha1"
            recaptcha1 = grecaptcha.render('recaptcha1', {
                'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
                'theme' : 'light'
            });

            //Render the recaptcha2 on the element with ID "recaptcha2"
            recaptcha2 = grecaptcha.render('recaptcha2', {
                'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
                'theme' : 'dark'
            });
        };
</script>

PS：“ grecaptcha.render”方法接收 ID

Answer 13

实现这一目标的最简单方法是执行以下操作：

• grecaptcha.getResponse(0);
• grecaptcha.getResponse(1);

如果您有两个表单，请更改 grecaptcha.getResponse(1)
验证码。 根据您的表格数量增加数字。 为了
例如，形式 1 将是 (0) 形式 2 将是 (1) 形式 3 将是 (3) 以及
等等...

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

还需要包含这个脚本，仅此而已！

Answer 14

使用当前版本的 Recaptcha (reCAPTCHA API 版本 2.0)，您一页上可以有多个验证码。

无需克隆 Recaptcha，也无需尝试解决该问题。 您只需为 Recaptcha 放置多个

元素，并在其中显式渲染 Recaptcha。

使用 Google Recaptcha API 即可轻松实现这一点。 下面是 HTML 代码示例：

<form>
    <h1>Form 1</h1>
    <div><input type="text" name="field1" placeholder="field1"></div>
    <div><input type="text" name="field2" placeholder="field2"></div>
    <div id="RecaptchaField1"></div>
    <div><input type="submit"></div>
</form>

<form>
    <h1>Form 2</h1>
    <div><input type="text" name="field3" placeholder="field3"></div>
    <div><input type="text" name="field4" placeholder="field4"></div>
    <div id="RecaptchaField2"></div>
    <div><input type="submit"></div>
</form>

在 Javascript 代码中，您必须为 Recaptcha 定义一个回调函数：

<script type="text/javascript">
    var CaptchaCallback = function() {
        grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
    };
</script>

之后，您的 Recaptcha 脚本 URL 应如下所示：

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

或者，您可以提供一个类名，而不是向您的 Recaptcha 字段提供 ID并使用类选择器循环这些元素并调用 .render()。

Answer 15

这可以通过 jQuery 的 clone() 函数轻松完成。

因此，您必须为验证码创建两个包装 div。 我的第一个表单的 recaptcha div：

<div id="myrecap">
    <?php
        require_once('recaptchalib.php');
        $publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
        echo recaptcha_get_html($publickey);
    ?>
</div>

第二个表单的 div 为空（不同的 ID）。 所以我的只是：

<div id="myraterecap"></div>

那么javascript非常简单：

$(document).ready(function() {
    // Duplicate our reCapcha 
    $('#myraterecap').html($('#myrecap').clone(true,true));
});

可能不需要在clone()中使用带有true值的第二个参数，但拥有它也没有什么坏处它...此方法的唯一问题是，如果您通过 ajax 提交表单，问题是您有两个具有相同名称的元素，并且您必须更聪明地捕获正确元素值的方式（reCaptcha 元素的两个 id 是 #recaptcha_response_field 和 #recaptcha_challenge_field，以防万一有人需要它们）

Answer 16

此答案是@raphadko的答案的扩展。

如果您需要手动提取验证码代码（例如在ajax请求中），您必须调用：

grecaptcha.getResponse(widget_id)

但是如何检索小部件id参数？

我使用CaptchaCallback的定义存储每个 g-recaptcha 框的小部件 ID（作为 HTML 数据属性）：

var CaptchaCallback = function() {
    jQuery('.g-recaptcha').each(function(index, el) {
        var widgetId = grecaptcha.render(el, {'sitekey' : 'your code'});
        jQuery(this).attr('data-widget-id', widgetId);
    });
};

然后我可以调用：

grecaptcha.getResponse(jQuery('#your_recaptcha_box_id').attr('data-widget-id'));

来提取代码。

Answer 17

关于在 ASP 页面上执行此操作，有人提出了类似的问题（链接 ）并且那里的共识是不可能使用 recapcha 来完成。 似乎单个页面上的多个表单必须共享验证码，除非您愿意使用不同的验证码。 如果您没有被 recaptcha 锁定，那么可以看看 Zend Frameworks Zend_Captcha 组件 (链接）。 它包含一些

Answer 18

简单明了：

1. 通常使用以下命令创建您的验证码字段：

   ; 
     

2. 使用以下内容加载脚本：

3. 现在调用它来迭代字段并创建验证码：