如何在单个页面上显示多个recaptchas？

Question

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

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

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

Answer 1

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

无需复制验证码，也无需尝试解决问题。您只需为 recaptchas 放置多个 div 元素并在其中显式呈现 recaptchas。

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

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

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

Answer 2

简单明了：

1) 通常使用以下方法创建您的验证码字段：

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

2) 用这个加载脚本：

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

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>

Answer 3

此答案是@raphadko's answer 的扩展。

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

grecaptcha.getResponse(widget_id)

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

我使用 CaptchaCallback 的这个定义来存储每个 g-recaptcha 框的 widget 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 4

关于在 ASP 页面 (link) 上执行此操作的类似问题被问到，并且那里的共识是无法使用 recaptcha。似乎单个页面上的多个表单必须共享验证码，除非您愿意使用不同的验证码。如果您没有被 recaptcha 锁定，那么可以看看 Zend Frameworks Zend_Captcha 组件 (link)。它包含一些

Answer 5

这很容易通过 jQuery 的clone() 函数完成。

因此，您必须为 recaptcha 创建两个包装 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，以防有人需要它们）