Как мне показать несколько рекапч на одной странице?

Question

У меня есть 2 формы на одной странице. Одна из форм имеет отображение все время. Другой должен отображать recaptcha только после определенного события, такого как максимальное количество попыток входа в систему. Так что бывают случаи, когда мне нужно, чтобы на одной странице появлялись 2 репатчи. Это возможно? Я знаю, что, вероятно, мог бы использовать один для обоих, но так как у меня есть макет, я бы предпочел иметь 2. Спасибо.

Обновление: ну, я думаю, это может быть невозможно. Кто-нибудь может порекомендовать другую библиотеку захвата для использования рядом с reCaptcha? Я действительно хочу иметь возможность иметь 2 капчи на одной странице.

Обновление 2: Что если поместить каждую форму в iframe? Будет ли это приемлемым решением?

Answer 1

С текущей версией Recaptcha ( reCAPTCHA API версия 2.0 ) вы можете иметь несколько рекапч на одной странице.

Нет необходимости клонировать recaptcha и пытаться обойти проблему. Вам просто нужно поместить несколько элементов div для recaptchas и явно отобразить их внутри.

Это легко с API Google Recaptcha:
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>

После этого ваш URL скрипта рекапчи должен выглядеть следующим образом:

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

Или вместо присвоения идентификаторов вашим полям recaptcha, вы можете дать имя класса и зациклить эти элементы с помощью селектора класса и вызова .render ()

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

Это легко сделать с помощью функции jQuery clone().

Таким образом, вы должны создать два div-обертки для recaptcha. Div моего recaptcha формы:

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

Div второй формы пуст (другой идентификатор). Так что мое просто:

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

Тогда javascript довольно прост:

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

Вероятно, вам не нужен второй параметр со значением true в clone(), но его не помешает ... Единственная проблема этого метода в том, что если вы отправляете форму через ajax, проблема в том, что у вас есть два элемента с одинаковыми именами, и вы должны быть немного более умны с тем, как вы фиксируете значения этого правильного элемента (два идентификатора для элементов reCaptcha: #recaptcha_response_field и #recaptcha_challenge_field на тот случай, если они кому-то нужны)

Answer 4

Аналогичный вопрос был задан по поводу этого на странице ASP ( ссылка ), и был достигнут консенсус о том, что это невозможно сделать с помощью recaptcha. Кажется, что несколько форм на одной странице должны совместно использовать капчу, если вы не хотите использовать другую капчу. Если вы не привязаны к recaptcha, хорошей библиотекой является компонент Zend Frameworks Zend_Captcha ( ссылка ). Содержит несколько

Answer 5

Я знаю, что этот вопрос старый, но в случае, если кто-то будет искать его в будущем На одной странице можно разместить две капчи. Розовый к документации здесь: 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 6

Этот ответ является расширением @ raphadko ответа .

Если вам нужно вручную извлечь код капчи (как в запросах ajax), вам нужно позвонить:

grecaptcha.getResponse(widget_id)

Но как вы можете получить параметр id виджета?

Я использую это определение CaptchaCallback для хранения идентификатора виджета каждого поля g-recaptcha (как атрибут данных 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 7

Это версия ответа без JQuery, предоставленная raphadko и существительным .

1) Создайте свои поля рекапчи как обычно:

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

2) Загрузите скрипт с этим:

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

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

Answer 8

У меня есть контактная форма в нижнем колонтитуле, которая всегда отображается, а также на некоторых страницах, таких как «Создать учетную запись», также может быть капча, поэтому она динамически, и я использую следующий способ с 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 9

Глядя на исходный код страницы, я принял участие в 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 10

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>