Як відобразити кілька рекапштів на одній сторінці?

Я маю 2 форми на одній сторінці. В одній із форм є рекаптш, що відображає весь час. Інший повинен відображати повторне захоплення лише після певної події, наприклад, збільшення кількості спроб входу. Тож бувають випадки, коли мені знадобляться 2 повторні описи на одній сторінці. Чи можливо це? Я знаю, що, ймовірно, міг би використовувати один для обох, але, як я маю макет, я б вважав за краще 2. Спасибі.

Оновлення: ну, мабуть, можливо, це не можливо. Чи може хтось порекомендувати іншу бібліотеку захоплення використовувати поряд з reCaptcha? Мені дуже хочеться мати одну капчу на одній сторінці.

Оновлення 2: Що робити, якщо кожну форму помістити в рамку? Це було б прийнятним рішенням?

Аналогічне запитання було задано про це на сторінці ASP ( посилання ), і єдиний консенсус там був про те, що з recaptcha зробити це неможливо. Здається, що декілька форм на одній сторінці повинні розділяти капчу, якщо ви не бажаєте використовувати іншу. Якщо ви не заблоковані в recaptcha, хороша бібліотека для ознайомлення - це компонент Zend Frameworks Zend_Captcha ( посилання ). Він містить декілька

З поточною версією Recaptcha ( API reCAPTCHA версії 2.0 ), ви можете мати кілька recaptchas на одній сторінці.

Не потрібно клонувати рекапчу, ані намагатися вирішити проблему. Вам просто потрібно помістити декілька елементів div для recaptchas і відтворити 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>

Після цього URL-адреса сценарію recaptcha має виглядати так:

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

Або замість того, щоб присвоювати ідентифікатори вашим полям recaptcha, ви можете надати ім'я класу та циклічно зафіксувати ці елементи за допомогою вибору класу та виклику .render ()

Простий і зрозумілий:

1) Створіть свої поля recaptcha зазвичай за допомогою цього:

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

Це легко досягти за допомогою clone()функції jQuery .

Отже, ви повинні створити два обгорткові диви для recaptcha. Резюме моєї першої форми:

<div id="myrecap">
    <?php
        require_once('recaptchalib.php');
        $publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
        echo recaptcha_get_html($publickey);
    ?>
</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 на випадок, якщо хтось їм потрібен)

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

Ця відповідь є розширенням @raphadko відповіді «s .

Якщо вам потрібно витягнути код captcha вручну (як, наприклад, у запитах 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'));

витягнути код.

У мене є контактна форма у нижньому колонтитулі, яка завжди відображає, а також деякі сторінки, як-от Створити акаунт, також можуть мати капчу, тому це динамічно, і я використовую наступний спосіб з 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>

Це версія JQuery без відповіді, наданої raphadko та іменником .

1) Створіть свої поля recaptcha зазвичай за допомогою цього:

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

Переглядаючи вихідний код сторінки, я взяв частину 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. Те саме, що на #product_tabs_whaвкладці "Зробити пропозицію" .

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

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

Коли користувач подає одну з форм:

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

Потім вони можуть заповнити recaptcha та повторно подати форму. Якщо вони вирішать надіслати іншу форму замість цього, ваш код перевіряє наявність існуючих повторних капташів, тому у вас буде одночасно лише одна recaptcha на сторінці.

Для того, щоб додати трохи до raphadko відповідь «s : так як у вас є кілька каптч (на одній сторінці), Ви не можете використовувати (універсальний) g-recaptcha-responseпараметр POST (бо він містить тільки один відповідь Captcha в). Натомість слід використовувати 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подію форми .

Ось рішення, яке формує багато відмінних відповідей. Цей параметр jQuery безкоштовний і динамічний, не вимагаючи спеціально націлювати елементи за id.

1) Додайте розмітку reCAPTCHA, як зазвичай:

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

2) Додайте в документ наступне. Він буде працювати в будь-якому браузері, який підтримує API querySelectorAll

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

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

Можна, просто перезаписати зворотні виклики 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");

Ось приємний посібник для виконання саме цього:

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

В основному ви додаєте деякі параметри до виклику api та вручну рендеруєте кожну рекапчу:

<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" отримує ідентифікатор

Я б використав невидимий рекаптча. Потім на вашій кнопці використовуйте тег на зразок "formname = 'yourformname" ", щоб вказати, яку форму потрібно подати, і сховати введення форми подання.

Перевагою цього є те, що ви можете зберігати перевірку форми html5 недоторканою, одну recaptcha, але кілька інтерфейсів кнопок. Просто зафіксуйте вхідне значення "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 простішим та легшим в управлінні.