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

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

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

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

90 голосов | спросил oym 7 AM00000020000003231 2009, 02:48:32

15 ответов


0

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

ответил Steven Surowiec 7 AM00000020000000531 2009, 02:59:05
0

С текущей версией Recaptcha ( API reCAPTCHA версии 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 ()

ответил Hüseyin Yağlı 24 Jpm1000000pmSat, 24 Jan 2015 17:06:51 +030015 2015, 17:06:51
0

Просто и понятно:

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) Теперь вызовите это, чтобы перебрать поля и создать повторные строки:

<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>
ответил raphadko 5 42015vEurope/Moscow11bEurope/MoscowThu, 05 Nov 2015 05:43:15 +0300 2015, 05:43:15
0

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

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

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

grecaptcha.getResponse(widget_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'));

чтобы извлечь код.

ответил VanDir 25 Jpm1000000pmWed, 25 Jan 2017 22:30:27 +030017 2017, 22:30:27
0

Это версия ответа без 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'});
    }
};
ответил turboLoop 28 J0000006Europe/Moscow 2017, 18:00:04
0

У меня есть контактная форма в нижнем колонтитуле, которая всегда отображается, а также на некоторых страницах, таких как «Создать учетную запись», также может быть капча, поэтому она динамическая, и я использую следующий способ с 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>
ответил Sergey Kharchishin 18 32015vEurope/Moscow11bEurope/MoscowWed, 18 Nov 2015 11:30:30 +0300 2015, 11:30:30
0

Глядя на исходный код страницы, я принял участие в 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 и поместит в div #more_info_recaptcha_box. То же, что и для вкладки "Сделать предложение" #product_tabs_wha.

ответил Omar Faruk Sharif 27 J0000006Europe/Moscow 2013, 12:18:22
0

 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>
ответил surinder singh 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 23 Sep 2016 17:52:33 +0300 2016, 17:52:33
0

Хорошим вариантом является создание ввода recaptcha для каждой формы на лету (я сделал это с двумя, но вы могли бы сделать три или более форм). Я использую jQuery, валидацию jQuery и плагин формы jQuery для публикации формы через AJAX вместе с API Recaptcha AJAX -

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

Когда пользователь отправляет одну из форм:

  1. перехватывать отправку - я использовал свойство beforeSubmit модуля jQuery Form
  2. уничтожить любые существующие входные данные recaptcha на странице - я использовал метод jQuery $ .empty () и Recaptcha.destroy ()
  3. вызовите Recaptcha.create (), чтобы создать поле рекапчи для конкретной формы
  4. вернуть false.

Затем они могут заполнить резюме и повторно отправить форму. Если вместо этого они решат отправить другую форму, ваш код проверяет существующие репачи, поэтому на странице будет одновременно только одна репача.

ответил surinder singh 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 23 Sep 2016 17:52:33 +0300 2016, 17:52:33
0

Чтобы добавить немного в ответ 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 после добавления элемента ) на все динамически модифицированные элементы. Это привязывает ответ каждого отдельного captha к его событию submit.

ответил prograils 22 PM00000050000002931 2016, 17:08:29
0

Вот решение, которое строит многие из превосходных ответов. Эта опция бесплатна и динамична в jQuery, не требуя, чтобы вы указывали элементы по идентификатору.

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>
ответил kfriend 26 Jpm1000000pmThu, 26 Jan 2017 20:41:54 +030017 2017, 20:41:54
0

Это возможно, просто перезаписать обратные вызовы Recaptcha Ajax. Работающий jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/

Вам даже не нужен прокси-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");
ответил Vanit 17 FebruaryEurope/MoscowbMon, 17 Feb 2014 13:37:42 +0400000000pmMon, 17 Feb 2014 13:37:42 +040014 2014, 13:37:42
0

Я бы использовал невидимую recaptcha. Затем нажмите кнопку «formname = 'yourformname», чтобы указать, какая форма должна быть отправлена, и скрыть ввод формы для отправки.

Преимущество этого в том, что он позволяет вам сохранить проверку формы html5 без изменений, один повтор, но несколько интерфейсов кнопок. Просто запишите входное значение «captcha» для ключа токена, сгенерированного recaptcha.

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

Я считаю, что этот FAR проще и проще в управлении.

ответил eatmeimadanish 13 12017vEurope/Moscow11bEurope/MoscowMon, 13 Nov 2017 19:10:48 +0300 2017, 19:10:48
0

Метод grecaptcha.getResponse() принимает необязательный параметр "widget_id" и по умолчанию использует первый созданный виджет, если он не указан. Идентификатор widget_id возвращается из метода grecaptcha.render() для каждого созданного виджета, он не связан с атрибутом id контейнера reCAPTCHA !!

Каждый reCAPTCHA имеет свои собственные данные ответа. Вы должны присвоить div reCAPTCHA идентификатор и передать его методу 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);
ответил Black 12 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 12 Sep 2018 18:23:13 +0300 2018, 18:23:13

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132