0
370
ViewsReCAPTCHA invisible que envía una respuesta g-recaptcha vacía con múltiples formularios
Estoy tratando de usar Google Invisible reCAPTCHA , pero envía vacío el parámetro POST g-recaptcha-response cuando tengo varios formularios en la misma página. Aquí está mi código:
JS de Google
<script src="//google.com/recaptcha/api.js?hl=pt-BR&onload=captchaCallback&render=explicit" async defer></script>Formulario 1
<form action="/site/Contact/send" id="form1"> <input type="text" name="nome" required> <div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxx" data-callback="form1Callback" data-size="invisible"> </div> <button type="submit">Send</button> </form>Formulario 2
<form action="/site/Contact/send" id="form2"> <input type="text" name="nome" required> <div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxx" data-callback="form2Callback" data-size="invisible"> </div> <button type="submit">Send</button> </form>Mi JS (basado en esta respuesta )
$(document).ready(function() { window.captchaCallback = function(){ $('.g-recaptcha').each(function(index, el) { var attributes = { 'sitekey' : $(el).data('sitekey'), 'size' : $(el).data('size'), 'callback' : $(el).data('callback') }; grecaptcha.render(el, attributes); }); }; window.form1Callback = function(){ $('#form1').submit(); }; window.form2Callback = function(){ $('#form2').submit(); }; }); Cuando envío uno de estos formularios, el parámetro g-recaptcha-response se envía vacío, como se muestra a continuación.
¿Puede alguien ayudarme a ponerlo a trabajar, por favor?
2 answers
Answer question0
Deberá llamar manualmente a grecaptcha.execute() para ejecutar recaptcha si está renderizando recaptcha invisible en un elemento div. Además, si hay varios formularios con recaptcha, entonces se debe llamar al método grecaptcha.execute() con un ID de widget generado para cada recaptcha cuando se llama al método grecaptcha.render().
$(document).ready(function() { window.captchaCallback = function(){ $('.g-recaptcha').each(function(index, el) { var attributes = { 'sitekey' : $(el).data('sitekey'), 'size' : $(el).data('size'), 'callback' : $(el).data('callback') }; $(el).data('recaptcha-widget-id', grecaptcha.render(el, attributes)); }); }; window.form1Callback = function(){ $('#form1').data("recaptcha-verified", true).submit(); }; window.form2Callback = function(){ $('#form2').data("recaptcha-verified", true).submit(); }; $('#form1,#form2').on("submit", function(e){ var $form = $(this); if ($form.data("recaptcha-verified")) return; e.preventDefault(); grecaptcha.execute($form.find(".g-recaptcha").data("recaptcha-widget-id")); }); });0
De acuerdo con la documentación y su código, podría suponer que está tratando de usar Programmatically invoke the challenge. de Google reCaptcha . Entonces, en su código JS, se perdió una declaración:
grecaptcha.execute();
ACTUALIZAR Tal vez no entendí bien tu pregunta, así que revisa esto:
renderizar onload explícito Opcional. Ya sea para representar el widget de forma explícita. El valor predeterminado es onload, lo que representará el widget en la primera etiqueta g-recaptcha que encuentre.
Según entendí, se acaba de encontrar la primera etiqueta marcada y eso le causa problemas.