Come faccio a mostrare più recaptcha su una singola pagina?

Ho 2 moduli su una singola pagina. Uno dei moduli ha un recaptcha sempre visualizzato. L'altro dovrebbe visualizzare un recaptcha solo dopo un determinato evento come il massimo dei tentativi di accesso. Quindi ci sono momenti in cui avrei bisogno di 2 recaptcha per apparire sulla stessa pagina. È possibile? So che probabilmente potrei usarne uno solo per entrambi, ma per come ho il layout, preferirei di gran lunga 2. Grazie.

Aggiornamento: beh, immagino che potrebbe non essere possibile. Qualcuno può consigliare un'altra libreria di acquisizione da utilizzare fianco a fianco con reCaptcha? Voglio davvero poter avere 2 captcha sulla stessa pagina.

Aggiornamento 2: cosa succede se si inserisce ogni modulo in un iframe? Questa sarebbe una soluzione accettabile?

Una domanda simile è stata posta su come eseguire questa operazione su una pagina ASP ( collegamento ) e il consenso là era che non era possibile fare con recaptcha. Sembra che più moduli su una singola pagina debbano condividere il captcha, a meno che tu non sia disposto a utilizzare un captcha diverso. Se non sei bloccato in recaptcha, una buona libreria a cui dare un'occhiata è il componente Zend Frameworks Zend_Captcha ( link ). Ne contiene alcuni

Con la versione corrente di Recaptcha ( reCAPTCHA API versione 2.0 ), puoi avere più recaptcha su una pagina.

Non è necessario clonare il recaptcha né tentare di risolvere il problema. Devi solo inserire più elementi div per i recaptcha e renderizzare esplicitamente i recaptcha al loro interno.

Questo è facile con l'API recaptcha di Google:
https://developers.google.com/recaptcha/docs/display#explicit_render

Ecco il codice html di esempio:

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

Nel tuo codice javascript, devi definire una funzione di callback per 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>

Dopo questo, l'URL dello script di recaptcha dovrebbe essere simile a questo:

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

O invece di dare ID ai tuoi campi recaptcha, puoi dare un nome di classe e ripetere questi elementi con il tuo selettore di classe e chiamare .render ()

Semplice e diretto:

1) Crea normalmente i tuoi campi recaptcha con questo:

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

2) Carica lo script con questo:

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

3) Ora chiamalo per iterare sui campi e creare i 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>

Questo è facilmente realizzabile con la clone()funzione di jQuery .

Quindi devi creare due div wrapper per il recaptcha. Recaptcha div del mio primo modulo:

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

Il div del secondo modulo è vuoto (ID diverso). Quindi il mio è solo:

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

Quindi il javascript è abbastanza semplice:

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

Probabilmente non è necessario il secondo parametro con un truevalore in clone(), ma non fa male averlo ... L'unico problema con questo metodo è che se stai inviando il tuo modulo tramite ajax, il problema è che hai due elementi che hanno lo stesso nome e devi essere un po 'più intelligente con il modo in cui catturi i valori di quell'elemento corretto (i due ID per gli elementi reCaptcha sono #recaptcha_response_fielde #recaptcha_challenge_field nel caso qualcuno ne avesse bisogno)

So che questa domanda è vecchia, ma nel caso qualcuno la cercherà in futuro. È possibile avere due captcha su una pagina. Il rosa per la documentazione è qui: https://developers.google.com/recaptcha/docs/display L' esempio sotto è solo un documento del modulo di copia e non è necessario specificare layout diversi.

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

Questa risposta è un'estensione @raphadko risposta s' .

Se hai bisogno di estrarre manualmente il codice captcha (come nelle richieste ajax) devi chiamare:

grecaptcha.getResponse(widget_id)

Ma come puoi recuperare il parametro id widget?

Uso questa definizione di CaptchaCallback per memorizzare l' ID widget di ogni casella g-recaptcha (come attributo dati 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);
    });
};

Quindi posso chiamare:

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

per estrarre il codice.

Ho un modulo di contatto nel piè di pagina che viene sempre visualizzato e anche alcune pagine, come Crea account, possono avere anche captcha, quindi è dinamicamente e sto usando il prossimo modo con 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>

Questa è una versione senza JQuery della risposta fornita da raphadko e sostantivo .

1) Crea normalmente i tuoi campi recaptcha con questo:

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

2) Carica lo script con questo:

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

3) Ora chiamalo per iterare sui campi e creare i 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'});
    }
};

Guardando il codice sorgente della pagina ho preso la parte reCaptcha e ho cambiato un po 'il codice. Ecco il codice:

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>

Sto usando qui la semplice funzionalità della scheda javascript. Quindi, non ha incluso quel codice.

Quando l'utente fa clic su "Richiedi informazioni", (#product_tabs_what)JS controlla se recapExistè falseo ha un valore. Se ha un valore, questo chiamerà Recaptcha.destroy();per distruggere il vecchio reCaptcha caricato e lo ricrea per questa scheda. Altrimenti questo creerà semplicemente un reCaptcha e verrà inserito nel #more_info_recaptcha_boxdiv. Come per la #product_tabs_whascheda "Fai un'offerta" .

Una buona opzione è generare un input recaptcha per ogni modulo al volo (l'ho fatto con due ma probabilmente potresti fare tre o più moduli). Sto usando jQuery, jQuery validation e jQuery form plugin per pubblicare il modulo tramite AJAX, insieme all'API Recaptcha AJAX -

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

Quando l'utente invia uno dei moduli:

1. intercetta l'invio - Ho usato la proprietà beforeSubmit del plugin jQuery Form
2. distruggere qualsiasi input di recaptcha esistente sulla pagina: ho usato il metodo $ .empty () di jQuery e Recaptcha.destroy ()
3. chiama Recaptcha.create () per creare un campo recaptcha per il modulo specifico
4. return false.

Quindi, possono compilare il recaptcha e inviare nuovamente il modulo. Se invece decidono di inviare un modulo diverso, beh, il tuo codice controlla i recaptcha esistenti in modo che tu abbia un solo recaptcha alla volta sulla pagina.

Per aggiungere un po 'di raphadko risposta s' : da quando si dispone di più captcha (in un'unica pagina), non è possibile utilizzare il (universale) g-recaptcha-responseparametro POST (perché contiene solo la risposta di uno captcha). Invece, dovresti usare grecaptcha.getResponse(opt_widget_id)call per ogni captcha. Ecco il mio codice (a condizione che ogni captcha sia all'interno della sua forma):

HTML:

<form ... />

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

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

</form>

e

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

         });
    });
};

Si noti che applico la delega dell'evento (vedi aggiornamento DOM dopo l'elemento append ) a tutti gli elementi modificati dinamicamente. Questo lega la risposta di ogni singolo captha al suo submitevento di forma .

Ecco una soluzione che si basa su molte delle risposte eccellenti. Questa opzione è priva di jQuery e dinamica, non richiede di indirizzare specificamente gli elementi per id.

1) Aggiungi il markup reCAPTCHA come faresti normalmente:

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

2) Aggiungere quanto segue nel documento. Funzionerà con qualsiasi browser che supporti l' 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>

Il grecaptcha.getResponse()metodo accetta un parametro "widget_id" facoltativo e, se non specificato, imposta come predefinito il primo widget creato. Un widget_id viene restituito dal grecaptcha.render()metodo per ogni widget creato, non è correlato all'attributo iddel contenitore reCAPTCHA !!

Ogni reCAPTCHA ha i propri dati di risposta. Devi dare al div reCAPTCHA un ID e passarlo al getResponsemetodo:

per esempio

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

Risposta di accesso:

var reCaptchaResponse = grecaptcha.getResponse(0);

o

var reCaptchaResponse = grecaptcha.getResponse(1);

È possibile, basta sovrascrivere i callback di Recaptcha Ajax. Jsfiddle funzionante: http://jsfiddle.net/Vanit/Qu6kn/

Non hai nemmeno bisogno di un div proxy perché con le sovrascritture il codice DOM non verrà eseguito. Chiama Recaptcha.reload () ogni volta che vuoi attivare di nuovo i callback.

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

Ecco una bella guida per fare esattamente questo:

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

Fondamentalmente aggiungi alcuni parametri alla chiamata api e rendi manualmente ogni 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: il metodo "grecaptcha.render" riceve un ID

Userei recaptcha invisibile. Quindi sul tuo pulsante usa un tag come "formname = 'yourformname'" per specificare quale modulo deve essere inviato e nascondere un input del modulo di invio.

Il vantaggio di questo è che ti consente di mantenere intatta la convalida del modulo html5, un recaptcha, ma più interfacce di pulsanti. Cattura semplicemente il valore di input "captcha" per la chiave token generata da 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>

Trovo questo FAR più semplice e facile da gestire.