Jak wyświetlić wiele recaptchas na jednej stronie?

102

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?

oym
źródło
Nie mógłbyś po prostu wyświetlić tego samego dwa razy?
Tyler Carter
1
Próbowałem ... kiedy spróbuję zduplikować kod captcha, wyświetli się tylko captcha, które jest pierwsze
oym
Każdy, kto spotka się z tym w przypadku nowego interfejsu API recaptcha, jest to możliwe dzięki jawnemu ładowaniu opisanemu z przykładami w dokumentacji pod adresem developers.google.com/recaptcha/docs/display#recaptcha_methods
El Yobo
3
Element iframe powinien być możliwy, ale jest złym sposobem rozwiązania problemu w porównaniu z używaniem JavaScript, jak w Hüseyin Yağlıodpowiedzi . Większość przeglądarek powinna obsługiwać JavaScript, a domyślna reCAPTCHA i tak używa JavaScript. Nie wiem jednak, co należałoby zrobić, aby rozwiązać problem bez obsługi JavaScript.
Edward

Odpowiedzi:

14

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

Steven Surowiec
źródło
9
W rzeczywistości jest to możliwe dzięki reCAPTCHA , ale nie da się tego obejść bez JavaScript . Większość przeglądarek powinna obsługiwać JavaScript, a domyślna ReCaptcha i tak używa JavaScript, więc to rozwiązanie jest dobre. Hüseyin Yağlıodpowiedź wyjaśnia rozwiązanie. Dokumentacja reCAPTCHA dla tego rozwiązania jest dostępna pod adresem developers.google.com/recaptcha/docs/display#explicit_render . Nie wiem jednak, co należałoby zrobić, aby rozwiązać problem bez obsługi JavaScript.
Edward
Z reCAPTCHA jest to absolutnie możliwe
Carlos Espinoza
208

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

Hüseyin Yağlı
źródło
1
Przypadkowo, czy wiesz, jak dodać ukryte pole recaptcha do walidacji jQuery dla każdego pola? Obecnie mam to działa tylko z 1 recaptchafield, ale czy może działać z dwoma recaptchas? <input type = "hidden" class = "hiddenRecaptcha required" name = "hiddenRecaptcha" id = "hiddenRecaptcha">
Ivan Juarez
2
@IvanJuarez To dobre pytanie jako nowe pytanie.
Hüseyin Yağlı
2
Dla tych, którzy chcą używać grecaptcha.getResponse () z wieloma instancjami, możesz po prostu odwołać się do każdego renderowania jako 0,1,2 itd. Na przykład pierwsza instancja będzie oznaczona jako grecaptcha.getResponse (0).
Gene Kelly
1
Oszczędź mój czas to idealne rozwiązanie
Mirza Obaid
2
Łał! Wymagało to trochę pracy, ale aby dodać do notatki @ GeneKelly dotyczącej grecaptcha.getResponse(0)i grecaptcha.getResponse(1)zweryfikować wiele instancji, dodałbym, że indeksowanie musi odpowiadać grecaptcha.renderkolejności. W tym przykładzie grecaptcha.render('RecaptchaField1'...zostanie zweryfikowana za pomocą grecaptcha.getResponse(0)i grecaptcha.render('RecaptchaField2'...zostanie zweryfikowana za pomocą grecaptcha.getResponse(1)itp.
codacopia
75

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>
raphadko
źródło
4
To jest właściwy sposób IMO, dzięki czemu jest dynamiczny, ponieważ mogę mieć nieograniczoną liczbę instancji bez definiowania statycznych identyfikatorów
Greg Alexander,
1
Jeśli chcesz ręcznie wyodrębnić kod captcha (jak w żądaniach Ajax), spójrz na moją odpowiedź .
VanDir
Czy mógłbyś spojrzeć na moje pytanie ? Parametr POST jest pusty.
Marcio Mazzucato
3
data-sitekey="YOUR_KEY_HERE"jest bezużyteczny i można go usunąć z div (jeśli potrzebujesz zmienić klucz, mniej miejsc do edycji)
the_nuts
3
Właściwie masz tam literówkę. Attribute data-sitekey jest potrzebna i sprawia, że ​​jest to jeszcze bardziej dynamiczne, na wypadek gdybyś miał wiele witryn, dlaczego kiedykolwiek. Prawidłowa linia byłabygrecaptcha.render(el, {'sitekey' : $(el).attr('data-sitekey') });
Gkiokan
13

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

Serj Sagan
źródło
Napotkasz problemy, gdy poprosisz
to nie działa ... oznacza, że ​​tylko oryginalna captcha (pierwsza nazywana tutaj <div id = "myrecap">) zostanie odświeżona, a inne nie odświeżone
Oxi
Właściwie Oxi, twoje obawy zostały uwzględnione w moim poprzednim komentarzu
Serj Sagan,
1
Prawdopodobnie robisz to źle ... co powiesz na link do twojego kodu w jsfiddle.net W każdym razie nie ma już potrzeby tego robić ... powinieneś użyć odpowiedzi Hüseyin Yağlı.
Serj Sagan,
7

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>
user2709153
źródło
5

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.

VanDir
źródło
1
Hej, dzięki za to. Co to jest #your_recaptcha_box_id?
Lucas Bustamante
4

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>
Sergey Kharchishin
źródło
4

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'});
    }
};
turboLoop
źródło
2

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ę” .

Omar Faruk Sharif
źródło
2

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
źródło
gdzie jest część 2 formularzy?
MeSo2
przepraszam, że cię nie
rozumiem
po prostu umieść <div class="g-recaptcha" data-sitekey="your_site_key"></div>tam, gdzie potrzebujesz, w formularzach /
divach
1

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.

siliconrockstar
źródło
1

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.

prograils
źródło
Wow, szukałem tego godzinami. Dzięki!!
Czarny
1

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>
kfriend
źródło
1

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);
czarny
źródło
0

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");
Vanit
źródło
0

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

Marco
źródło
0

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.

eatmeimadanish
źródło