Estoy tratando de migrar del uso de Google reCaptcha v2 al reCaptcha invisible. Utilizo Parsley.js para la validación de formularios y envío el formulario utilizando el complemento de formulario Malsup Ajax. mi código actual se ve así:
HTML:
<form action="send1.php" method="post" class="contact_form"> <label for="name_1">Name</label> <input type="text" name="name_1" id="name_1" value="" required /> <div class="g-recaptcha" data-sitekey="XXX"></div> <input type="submit" class="button" value=""> </form>JS:
$('.contact_form').parsley(); $('.contact_form').submit(function(){ if($('.contact_form').parsley().validate()){ $('.contact_form').ajaxSubmit(); } return false; });esto pasa con éxito una respuesta g-recaptcha a send1.php, donde se valida el reCaptcha.
¿Cómo puedo integrar Invisible reCaptcha con este script?
Intenté usar esto:
<div id='recaptcha' class="g-recaptcha" data-sitekey="XXX" data-callback="onSubmit" data-size="invisible"></div> </div>Pero no estoy seguro de cómo usar la devolución de llamada de datos. si agrego
grecaptcha.execute();Antes de ajaxSubmit(), se agrega el campo g-recaptcha-response a la llamada Ajax, pero su valor está en blanco...
¿Alguna ayuda, por favor?
(Copié mi respuesta de aquí )
Para ParsleyJS , tendrá que hacer una pequeña solución:
1. Agregue un campo de entrada oculto, con data-parsley-required="true" , value = "" , así:
<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;"> 2. Agregue el contenedor de errores (justo debajo o debajo de su g-recaptcha div):
<span id='errorContainer'></span>3. Agregue esta función simple en algún lugar de su código js:
function recaptchaCallback() { document.getElementById('myField').value = 'nonEmpty'; } 4. Agregue el atributo data-callback con el valor de la función personalizada:
<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>Compartiré con ustedes cómo conseguí que ParsleyJS e Invisible reCaptcha funcionaran para mí. A continuación se muestra el código que utilicé. Este era solo código POC, no producción; y no hice una publicación de AJAX. Y disculpe cualquier fealdad, porque tuve que quitar mucha pelusa:
<!DOCTYPE html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="../node_modules/parsleyjs/dist/parsley.min.js"></script> </head> <body> <form action="#" data-parsley-validate class="js-validate"> <div> <label for="input-first-name">First Name*</label> <input type="text" id="input-first-name" name="first-name" data-parsley-trigger="blur" data-parsley-error-message="First Name is required" required> </div> <div> <label for="input-last-name">Last Name*</label> <input type="text" name="last-name" id="input-last-name" data-parsley-trigger="blur" data-parsley-error-message="Last Name is required" required> </div> <div> <button type="submit" id="theSubmitBtn">Submit</button> </div> <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script> <script> function onScriptLoad() { var htmlEl = document.querySelector('.g-recaptcha'); var captchaOptions = { sitekey: 'Your_Site_Key', size: 'invisible', callback: function (token) { $('.js-validate').submit(); console.log('test: ',token); } }; recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, false); $('#theSubmitBtn').click(function(e){ e.preventDefault(); if(grecaptcha.getResponse() != ''){ grecaptcha.reset(); } grecaptcha.execute(); }); } </script> <div id='recaptcha' class="g-recaptcha"></div> </form> </body> </html>Entonces, si desea enviar a través de AJAX, puede agregar un detector de eventos ParsleyJS y hacer su llamada Ajax de esa manera.
$('.js-validate').parsley().on('form:submit', function() { //AJAX post here return false; });Basé mi solución principalmente en esta publicación (así que crédito para él): Invisible google Recaptcha y ajax form
Espero que ayude, porque yo también busqué soluciones por un tiempo.
Espero que esto te ayude, no me he ocupado del perejil, pero la forma en que reCaptcha se integra debería ser la misma. ¡Hazme saber si tienes alguna pregunta!
Uso un método como este para renderizar mis reCaptchas. Esto le permite tener múltiples captchas en la misma página, así como la validación.
Para la validación de formularios, agregué su validación de perejil a la siguiente función. Tenga en cuenta que si la validación devuelve falso, reiniciamos el captcha... esto es importante. Si eso no sucede, el formulario no se puede volver a enviar.
function renderRecaptcha() { for (var i = 0; i < document.forms.length; ++i) { var form = document.forms[i]; var button = form.querySelector('[data-sitekey]'); if (null === button) { continue; } (function (frm) { var sitekey = button.getAttribute("data-sitekey"); var buttonId = grecaptcha.render(button, { "sitekey": sitekey, "size": "invisible", "badge": "inline", "callback": function (recaptchaToken) { if ($(frm).parsley().validate()) { $(frm).ajaxSubmit(); // HTMLFormElement.prototype.submit.call(frm); } else { grecaptcha.reset(buttonId); } } }); frm.onsubmit = function (evt) { evt.preventDefault(); grecaptcha.execute(buttonId); }; })(form); } }Su botón será lo que tenga la clave de sitio en lugar de un div. Esto simplifica mucho las cosas.
<button type="submit" class="common-form__submit" data-sitekey="SITEKEY_HERE">Send Your Request</button>