Jak wyświetlić wiele recaptchas na jednej stronie?

Mam 2 formularze na jednej stronie. Jedna z form ma cały czas wyświetlaną recaptcha. Drugi powinien wyświetlać recaptcha dopiero po pewnym zdarzeniu, takim jak maksymalna liczba prób logowania. Są więc chwile, kiedy potrzebowałbym 2 recaptcha, aby pojawiły się na tej samej stronie. czy to możliwe? Wiem, że prawdopodobnie mógłbym użyć jednego do obu, ale ze względu na układ, wolałbym mieć dwa. Dzięki.

Aktualizacja: cóż, myślę, że to może nie być możliwe. Czy ktoś może polecić inną bibliotekę przechwytywania do użytku równolegle z reCaptcha? Naprawdę chcę mieć 2 captcha na tej samej stronie.

Aktualizacja 2: co by było, gdyby każdy formularz był umieszczony w ramce iframe? Czy byłoby to akceptowalne rozwiązanie?

Podobne pytanie zostało zadane na stronie ASP ( link ), a konsensus był taki, że nie można tego zrobić z recaptcha. Wygląda na to, że wiele formularzy na jednej stronie musi udostępniać captcha, chyba że chcesz użyć innej captcha. Jeśli nie jesteś zamknięty w recaptcha, dobrą biblioteką do obejrzenia jest komponent Zend Frameworks Zend_Captcha ( link ). Zawiera kilka

Dzięki aktualnej wersji Recaptcha ( wersja 2.0 reCAPTCHA API ) możesz mieć wiele recaptchas na jednej stronie.

Nie ma potrzeby klonowania recaptcha ani próby obejścia problemu. Musisz tylko umieścić wiele elementów div dla recaptch i wyraźnie wyrenderować w nich recaptcha.

Jest to łatwe dzięki Google Recaptcha API:
https://developers.google.com/recaptcha/docs/display#explicit_render

Oto przykładowy kod 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>

W swoim kodzie javascript musisz zdefiniować funkcję zwrotną dla 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>

Następnie adres URL skryptu recaptcha powinien wyglądać następująco:

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

Lub zamiast nadawać identyfikatory swoim polom recaptcha, możesz podać nazwę klasy i zapętlić te elementy za pomocą selektora klasy i wywołać .render ()

Proste i zrozumiałe:

1) Utwórz swoje pola recaptcha normalnie za pomocą tego:

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

2) Załaduj skrypt za pomocą tego:

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

3) Teraz wywołaj to, aby iterować po polach i utworzyć recaptcha:

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

Można to łatwo osiągnąć za pomocą jQuery clone() funkcji .

Musisz więc utworzyć dwa opakowujące elementy div dla recaptcha. Recaptcha div mojego pierwszego formularza:

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

Element div drugiego formularza jest pusty (inny identyfikator). Więc moje jest po prostu:

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

Wtedy javascript jest dość prosty:

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

Prawdopodobnie nie potrzebujesz drugiego parametru z truewartością w clone(), ale nie zaszkodzi mieć go ... Jedyny problem z tą metodą polega na tym, że przesyłasz formularz przez ajax, problem polega na tym, że masz dwa elementy, które mają ta sama nazwa i musisz być trochę sprytniejszy, jeśli chodzi o sposób przechwytywania poprawnych wartości elementu (dwa identyfikatory elementów reCaptcha to #recaptcha_response_fieldi #recaptcha_challenge_field na wypadek, gdyby ktoś ich potrzebował)

Wiem, że to stare pytanie, ale na wypadek, gdyby ktoś w przyszłości go szukał. Możliwe jest umieszczenie dwóch captcha na jednej stronie. Różowa dokumentacja jest tutaj: https://developers.google.com/recaptcha/docs/display Przykład poniżej to tylko kopia dokumentu formularza i nie musisz określać różnych układów.

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

Ta odpowiedź jest rozszerzeniem @raphadko odpowiedź „s .

Jeśli chcesz ręcznie wyodrębnić kod captcha (jak w żądaniach ajax), musisz zadzwonić:

grecaptcha.getResponse(widget_id)

Ale jak pobrać parametr identyfikatora widżetu?

Używam tej definicji CaptchaCallback do przechowywania identyfikatora widżetu każdego pola g-recaptcha (jako atrybutu danych 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);
    });
};

Wtedy mogę zadzwonić:

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

wyodrębnić kod.

Mam formularz kontaktowy w stopce, który zawsze się wyświetla, a także niektóre strony, takie jak Utwórz konto, również mogą mieć captcha, więc jest dynamiczny i używam następnego sposobu z 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>

To jest wolna od JQuery wersja odpowiedzi udzielonej przez raphadko i rzeczownik .

1) Utwórz swoje pola recaptcha normalnie za pomocą tego:

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

2) Załaduj skrypt za pomocą tego:

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

3) Teraz wywołaj to, aby iterować po polach i utworzyć recaptcha:

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

Patrząc na kod źródłowy strony wziąłem część reCaptcha i trochę zmieniłem kod. Oto kod:

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>

Używam tutaj prostej funkcjonalności karty javascript. Więc nie zawiera tego kodu.

Gdy użytkownik kliknie „Poproś o informacje”, (#product_tabs_what)JS sprawdzi, czy recapExistjest falselub ma jakąś wartość. Jeśli ma wartość, spowoduje to wywołanie Recaptcha.destroy();zniszczenia starej załadowanej reCaptchy i odtworzenie jej dla tej karty. W przeciwnym razie utworzy to po prostu reCaptcha i umieści w #more_info_recaptcha_boxdiv. To samo co w przypadku #product_tabs_whazakładki „Złóż ofertę” .

Dobrą opcją jest generowanie danych wejściowych recaptcha dla każdego formularza w locie (zrobiłem to z dwoma, ale prawdopodobnie możesz zrobić trzy lub więcej formularzy). Używam jQuery, walidacji jQuery i wtyczki formularza jQuery do wysyłania formularza przez AJAX, wraz z Recaptcha AJAX API -

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

Gdy użytkownik przesyła jeden z formularzy:

1. przechwycić przesyłanie - użyłem właściwości beforeSubmit wtyczki jQuery Form
2. zniszcz wszystkie istniejące wejścia recaptcha na stronie - użyłem metody jQuery $ .empty () i Recaptcha.destroy ()
3. wywołaj Recaptcha.create (), aby utworzyć pole recaptcha dla określonego formularza
4. return false.

Następnie mogą wypełnić recaptcha i ponownie przesłać formularz. Jeśli zamiast tego zdecydują się przesłać inny formularz, cóż, twój kod sprawdza istniejące recaptcha, więc będziesz mieć tylko jedną recaptcha na stronie naraz.

Aby dodać trochę do raphadko odpowiedzią jest : skoro masz wiele captchas (z jednej strony), nie można używać (uniwersalne) g-recaptcha-responseparametr POST (ponieważ posiada tylko jeden CAPTCHA za odpowiedź). Zamiast tego powinieneś użyćgrecaptcha.getResponse(opt_widget_id) wywołania dla każdego captcha. Oto mój kod (pod warunkiem, że każdy captcha znajduje się w swoim formularzu):

HTML:

<form ... />

<div id="RecaptchaField1"></div>

<div class="field">
  <input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>

</form>

i

<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) + "\"}"

         });
    });
};

Zauważ, że stosuję delegację zdarzenia (zobacz odśwież DOM po dodaniu elementu ) do wszystkich dynamicznie modyfikowanych elementów. To wiąże odpowiedź każdej indywidualnej capthy z jej formą submit.

Oto rozwiązanie, które opiera się na wielu doskonałych odpowiedziach. Ta opcja jest wolna od jQuery i dynamiczna, nie wymagając od ciebie konkretnego kierowania elementów według id.

1) Dodaj swój znacznik reCAPTCHA w normalny sposób:

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

2) Dodaj do dokumentu następujące elementy. Będzie działać w każdej przeglądarce obsługującej 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()Sposób przyjmuje opcjonalny „WIDGET_ID” parametrów i wartości domyślne w pierwszy widget utworzonego Jeżeli nie określono. Dla grecaptcha.render()każdego utworzonego widgetu zwracany jest identyfikator widgetu, który nie jest powiązany z atrybutemid kontenera reCAPTCHA !!

Każda reCAPTCHA ma własne dane odpowiedzi. Musisz podać identyfikator div reCAPTCHA i przekazać go do getResponsemetody:

na przykład

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

Odpowiedź dostępu:

var reCaptchaResponse = grecaptcha.getResponse(0);

lub

var reCaptchaResponse = grecaptcha.getResponse(1);

Jest to możliwe, po prostu nadpisz wywołania zwrotne Recaptcha Ajax. Działający jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/

Nie potrzebujesz nawet proxy div, ponieważ po nadpisaniu kod DOM nie zostanie wykonany. Wywołaj Recaptcha.reload () za każdym razem, gdy chcesz ponownie wywołać wywołania zwrotne.

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

Oto fajny przewodnik, jak to zrobić:

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

Zasadniczo dodajesz kilka parametrów do wywołania API i ręcznie renderujesz każdą recaptcha:

<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: Metoda „grecaptcha.render” otrzymuje identyfikator

Użyłbym niewidzialnej recaptcha. Następnie na swoim przycisku użyj tagu, takiego jak „formname = 'yourformname'”, aby określić, który formularz ma zostać przesłany i ukryć dane wejściowe formularza przesyłania.

Zaletą tego jest to, że pozwala zachować nienaruszoną walidację formularza html5, jedną recaptcha, ale wiele interfejsów przycisków. Po prostu przechwyć wartość wejściową „captcha” dla klucza tokena wygenerowanego przez 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>

Uważam to za DUŻO prostsze i łatwiejsze w zarządzaniu.