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

How do I show multiple recaptchas on a single page?

提问by oym

I have 2 forms on a single page. One of the forms has a recaptcha displaying all the time. The other should display a recaptcha only after a certain event such as maxing out login attempts. So there are times when I would need 2 recaptchas to appear on the same page. Is this possible? I know I could probably use a single one for both, but the way I have the layout, I would much prefer to have 2. Thanks.

我在一个页面上有 2 个表单。其中一个表格有一个一直显示的验证码。另一个应该仅在某个事件（例如最大化登录尝试）之后显示recaptcha。所以有时我需要 2 个 recaptchas 出现在同一页面上。这可能吗？我知道我可能对两者都使用一个，但按照我的布局方式，我更喜欢使用 2 个。谢谢。

Update:well I guess it may not be possible. Can anybody recommend another capture library to use side by side with reCaptcha? I really want to be able to have 2 captchas on the same page.

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

Update 2:What if put each form in an iframe? Would this be an acceptable solution?

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

采纳答案by Steven Surowiec

A similar question was asked about doing this on an ASP page (link) and the consensus over there was that it was not possible to do with recaptcha. It seems that multiple forms on a single page must share the captcha, unless you're willing to use a different captcha. If you are not locked into recaptcha a good library to take a look at is the Zend Frameworks Zend_Captcha component (link). It contains a few

在 ASP 页面（链接）上提出了一个类似的问题，那里的共识是不可能用 recaptcha 来做。似乎单个页面上的多个表单必须共享验证码，除非您愿意使用不同的验证码。如果您没有被限制在 recaptcha 中，那么可以查看 Zend Frameworks Zend_Captcha 组件（链接）的一个很好的库。它包含几个

回答by Hüseyin Ya?l?

With the current version of Recaptcha (reCAPTCHA API version 2.0), you can have multiple recaptchas on one page.

使用当前版本的 Recaptcha（reCAPTCHA API 版本 2.0），您可以在一页上有多个 recaptcha。

There is no need to clone the recaptcha nor try to workaround the problem. You just have to put multiple div elements for the recaptchas and render the recaptchas inside them explicitly.

无需克隆 recaptcha，也无需尝试解决该问题。您只需要为 recaptchas 放置多个 div 元素并在其中显式渲染 recaptchas。

This is easy with the google recaptcha api:
https://developers.google.com/recaptcha/docs/display#explicit_render

使用 google recaptcha api 这很容易：https:
//developers.google.com/recaptcha/docs/display#explicit_render

Here is the example html code:

这是示例 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>

In your javascript code, you have to define a callback function for recaptcha:

在您的 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>

After this, your recaptcha script url should look like this:

在此之后，您的 recaptcha 脚本 url 应如下所示：

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

Or instead of giving IDs to your recaptcha fields, you can give a class name and loop these elements with your class selector and call .render()

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

回答by raphadko

Simple and straightforward:

简单明了：

1) Create your recaptcha fields normally with this:

1）通常使用以下方法创建您的recaptcha字段：

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

2) Load the script with this:

2）用这个加载脚本：

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

3) Now call this to iterate over the fields and create the recaptchas:

3）现在调用它来迭代字段并创建recaptchas：

<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>

回答by Serj Sagan

This is easily accomplished with jQuery's clone()function.

这很容易用 jQuery 的clone()函数来完成。

So you must create two wrapper divs for the recaptcha. My first form's recaptcha div:

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

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

The second form's div is empty (different ID). So mine is just:

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

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

Then the javascript is quite simple:

那么javascript就很简单了：

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

Probably don't need the second parameter with a truevalue in clone(), but doesn't hurt to have it... The only issue with this method is if you are submitting your form via ajax, the problem is that you have two elements that have the same name and you must me a bit more clever with the way you capture that correct element's values (the two ids for reCaptcha elements are #recaptcha_response_fieldand #recaptcha_challenge_field just in case someone needs them)

可能不需要带有truein 值的第二个参数clone()，但拥有它也无妨...此方法的唯一问题是，如果您通过 ajax 提交表单，问题是您有两个元素相同的名称，您必须更聪明地捕获正确元素的值（reCaptcha 元素的两个 id 是#recaptcha_response_field#recaptcha_challenge_field，以防万一有人需要它们）

回答by user2709153

I know this question is old but in case if anyone will look for it in the future. It is possible to have two captcha's on one page. Pink to documentation is here: https://developers.google.com/recaptcha/docs/displayExample below is just a copy form doc and you dont have to specify different layouts.

我知道这个问题很旧，但以防万一将来有人会寻找它。一页上可以有两个验证码。粉红色的文档在这里：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>

回答by VanDir

This answer is an extension to @raphadko's answer.

这个答案是一个扩展@raphadko的答案。

If you need to extract manually the captcha code (like in ajax requests) you have to call:

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

grecaptcha.getResponse(widget_id)

But how can you retrieve the widget id parameter?

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

I use this definition of CaptchaCallbackto store the widget idof each g-recaptcha box (as an HTML data attribute):

我使用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);
    });
};

Then I can call:

然后我可以打电话：

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

to extract the code.

提取代码。

回答by turboLoop

This is a JQuery-free version of the answer provided by raphadkoand noun.

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

1) Create your recaptcha fields normally with this:

1）通常使用以下方法创建您的recaptcha字段：

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

2) Load the script with this:

2）用这个加载脚本：

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

3) Now call this to iterate over the fields and create the recaptchas:

3）现在调用它来迭代字段并创建recaptchas：

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'});
    }
};

回答by Sergey Kharchishin

I have contact form in footer that always displays and also some pages, like Create Account, can have captcha too, so it's dynamically and I'm using next way with jQuery:

我在页脚中有始终显示的联系表单，还有一些页面，如创建帐户，也可以有验证码，所以它是动态的，我正在使用 jQuery 的下一个方式：

html:

html：

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

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

javascript

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>

回答by surinder singh

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>

回答by Omar Faruk Sharif

Looking at the source code of the page I took the reCaptcha part and changed the code a bit. Here's the code:

查看页面的源代码我拿了 reCaptcha 部分并稍微更改了代码。这是代码：

HTML:

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:

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>

I am using here simple javascript tab functionality. So, didn't included that code.

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

When user would click on "Request Information" (#product_tabs_what)then JS will check if recapExistis falseor has some value. If it has a value then this will call Recaptcha.destroy();to destroy the old loaded reCaptcha and will recreate it for this tab. Otherwise this will just create a reCaptcha and will place into the #more_info_recaptcha_boxdiv. Same as for "Make Offer" #product_tabs_whatab.

当用户将点击“申请信息” (#product_tabs_what)，然后JS会检查是否recapExist是false还是有一定的价值。如果它有一个值，那么这将调用Recaptcha.destroy();销毁旧加载的 reCaptcha，并将为此选项卡重新创建它。否则，这只会​​创建一个 reCaptcha 并将放入#more_info_recaptcha_boxdiv。与“提供报价”#product_tabs_wha选项卡相同。