php - utilizar - ¿Cómo muestro múltiples recaptchas en una sola página?
recaptchalib php v2 (16)
Tengo 2 formularios en una sola página. Una de las formas tiene una recaptcha que muestra todo el tiempo. El otro debería mostrar una recaptcha solo después de un determinado evento, como por ejemplo, al máximo de intentos de inicio de sesión. Entonces, hay momentos en los que necesitaría 2 recaptchas para aparecer en la misma página. es posible? Sé que probablemente podría usar uno solo para ambos, pero por la forma en que tengo el diseño, preferiría tener 2. Gracias.
Actualización: bueno, supongo que puede no ser posible. ¿Alguien puede recomendar otra biblioteca de captura para usar junto con reCaptcha? Realmente quiero poder tener 2 captchas en la misma página.
Actualización 2: ¿Qué pasa si coloca cada formulario en un iframe? ¿Esta sería una solución aceptable?
Al mirar el código fuente de la página tomé la parte reCaptcha y cambié el código un poco. Aquí está el código:
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>
Estoy usando aquí la funcionalidad simple de la pestaña de JavaScript. Entonces, no incluyó ese código.
Cuando el usuario haga clic en "Solicitar información" (#product_tabs_what) entonces JS comprobará si recapExist es false o tiene algún valor. Si tiene un valor, esto llamará a Recaptcha.destroy(); para destruir el viejo ReCaptcha cargado y lo recreará para esta pestaña. De lo contrario, esto solo creará un ReCaptcha y se colocará en el div #more_info_recaptcha_box . Lo mismo que para "Hacer Oferta" #product_tabs_wha pestaña.
Aquí hay una buena guía para hacer exactamente eso:
http://mycodde.blogspot.com.ar/2014/12/multiple-recaptcha-demo-same-page.html
Básicamente, usted agrega algunos parámetros a la llamada api y renderiza manualmente cada 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>
PD: El método "grecaptcha.render" recibe una ID
Aquí hay una solución que desarrolla muchas de las excelentes respuestas. Esta opción es libre de jQuery y dinámica, y no requiere que oriente los elementos específicamente por id.
1) Agregue su marcado reCAPTCHA como lo haría normalmente:
<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>
2) Agregue lo siguiente en el documento. Funcionará en cualquier navegador que admita la 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>
Con la versión actual de Recaptcha ( reCAPTCHA API versión 2.0 ), puede tener múltiples recaptchas en una página.
No es necesario clonar la recaptcha ni intentar resolver el problema. Solo tienes que poner múltiples elementos div para las recaptchas y renderizar las recaptchas dentro de ellas explícitamente.
Esto es fácil con la API de Google recaptcha:
developers.google.com/recaptcha/docs/display#explicit_render
Aquí está el ejemplo de código 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>
En su código de JavaScript, debe definir una función de devolución de llamada para 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>
Después de esto, su url de la secuencia de comandos recaptcha debería verse así:
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
O bien, en lugar de dar IDs a sus campos de recaptcha, puede dar un nombre de clase y hacer un bucle con estos elementos con su selector de clase y llamar a .render ()
Es posible, simplemente sobrescriba las devoluciones de llamada de Rejaptcha Ajax. Jsfiddle de trabajo: http://jsfiddle.net/Vanit/Qu6kn/
Ni siquiera necesita un div proxy porque con las sobrescrituras el código DOM no se ejecutará. Llame a Recaptcha.reload () cada vez que desee activar las devoluciones de llamada nuevamente.
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");
Esta es una versión sin jQuery de la respuesta proporcionada por raphadko y sustantivo .
1) Cree sus campos recaptcha normalmente con esto:
<div class="g-recaptcha"></div>
2) Cargue el script con esto:
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
3) Ahora llama a esto para iterar sobre los campos y crear las 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''});
}
};
Esta respuesta es una extensión de la respuesta de @raphadko .
Si necesita extraer manualmente el código captcha (como en las solicitudes ajax), debe llamar:
grecaptcha.getResponse(widget_id)
Pero, ¿cómo puedes recuperar el parámetro de identificación del widget?
Utilizo esta definición de CaptchaCallback para almacenar el id. De widget de cada recuadro g-recaptcha (como un atributo de datos 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);
});
};
Entonces puedo llamar:
grecaptcha.getResponse(jQuery(''#your_recaptcha_box_id'').attr(''data-widget-id''));
para extraer el código
Esto se logra fácilmente con la función clone() jQuery.
Por lo tanto, debe crear dos divisores de envoltura para recaptcha. La recaptcha div de mi primera forma:
<div id="myrecap">
<?php
require_once(''recaptchalib.php'');
$publickey = "XXXXXXXXXXX-XXXXXXXXXXX";
echo recaptcha_get_html($publickey);
?>
</div>
El div del segundo formulario está vacío (ID diferente). Entonces el mío es justo:
<div id="myraterecap"></div>
Entonces el javascript es bastante simple:
$(document).ready(function() {
// Duplicate our reCapcha
$(''#myraterecap'').html($(''#myrecap'').clone(true,true));
});
Probablemente no necesite el segundo parámetro con un valor true en clone() , pero no hace daño tenerlo ... El único problema con este método es que si envía su formulario a través de ajax, el problema es que tiene dos elementos que tienen el mismo nombre y usted debe ser un poco más inteligente con la forma de capturar los valores del elemento correcto (los dos identificadores para los elementos de #recaptcha_response_field son #recaptcha_response_field y #recaptcha_challenge_field por si alguien los necesita)
Para agregar un bit a la respuesta de raphadko : ya que tiene múltiples captchas (en una página), no puede usar el parámetro POST g-recaptcha-response (universal) (porque contiene solo una respuesta de captcha). En su lugar, debe usar la grecaptcha.getResponse(opt_widget_id) para cada captcha. Aquí está mi código (siempre que cada captcha esté dentro de su formulario):
HTML:
<form ... />
<div id="RecaptchaField1"></div>
<div class="field">
<input type="hidden" name="grecaptcha" id="grecaptcha" />
</div>
</form>
y
<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) + "/"}"
});
});
};
Tenga en cuenta que aplico la delegación de eventos (vea actualizar DOM después de agregar el elemento ) a todos los elementos modificados dinámicamente. Esto une la respuesta de cada captha individual a su evento de submit formulario.
Sé que esta pregunta es antigua, pero en caso de que alguien la busque en el futuro. Es posible tener dos captcha en una página. Rosa a la documentación está aquí: https://developers.google.com/recaptcha/docs/display siguiente ejemplo es solo un documento de formulario de copia y no tiene que especificar diseños diferentes.
<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>
Se hizo una pregunta similar acerca de cómo hacer esto en una página ASP ( link ) y el consenso al respecto era que no era posible hacerlo con recaptcha. Parece que los formularios múltiples en una sola página deben compartir el captcha, a menos que esté dispuesto a usar un captcha diferente. Si no está encerrado en recaptcha, una buena biblioteca para echar un vistazo es el componente Zend Frameworks Zend_Captcha ( link ). Contiene algunos
Simple y directo:
1) Cree sus campos recaptcha normalmente con esto:
<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>
2) Cargue el script con esto:
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
3) Ahora llama a esto para iterar sobre los campos y crear las recaptchas:
<script type="text/javascript">
var CaptchaCallback = function() {
$(''.g-recaptcha'').each(function(index, el) {
grecaptcha.render(el, {''sitekey'' : ''your_key''});
});
};
</script>
Tengo un formulario de contacto en el pie de página que siempre se muestra y también algunas páginas, como Crear cuenta, también pueden tener captcha, por lo que es dinámico y lo estoy usando de la siguiente manera 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>
Una buena opción es generar una entrada recaptcha para cada formulario sobre la marcha (lo he hecho con dos, pero probablemente podría hacer tres o más formularios). Estoy usando jQuery, jQuery validation y jQuery form plugin para publicar el formulario a través de AJAX, junto con Recaptcha AJAX API -
developers.google.com/recaptcha/docs/display#recaptcha_methods
Cuando el usuario envía uno de los formularios:
- interceptar la presentación: utilicé la propiedad beforeSubmit de jQuery Form Plugin
- destruir cualquier entrada recaptcha existente en la página - Usé el método $ .empty () de jQuery y Recaptcha.destroy ()
- llame a Recaptcha.create () para crear un campo recaptcha para el formulario específico
- falso retorno.
Luego, pueden completar la recaptcha y volver a enviar el formulario. Si deciden enviar un formulario diferente en su lugar, bueno, su código verifica recaptchas existentes por lo que solo tendrá una recaptcha en la página a la vez.
Yo usaría recaptcha invisible. Luego, en su botón use una etiqueta como "formname = ''yourformname''" para especificar qué formulario se debe enviar y ocultar una entrada de formulario de envío.
La ventaja de esto es que le permite mantener la validación de formulario html5 intacta, una recaptcha, pero múltiples interfaces de botón. Simplemente capture el valor de entrada "captcha" para la clave token generada por 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>
Me parece mucho más simple y fácil de administrar.
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>