¿Cómo recargar ReCaptcha usando JavaScript?

177

Tengo un formulario de registro con AJAX, por lo que quiero actualizar la imagen de Recaptcha cada vez que se produce un error (es decir, el nombre de usuario ya está en uso).

Estoy buscando un código compatible con ReCaptcha para volver a cargarlo usando JavaScript.

javascript recaptcha AhmetB - Google
fuente
1
No te molestes. ¿Por qué cambiar el CAPTCHA si se toma el nombre de usuario?
SLaks
18
@SLaks : probablemente porque primero verifica captcha y luego verifica al usuario, y una vez que se utiliza captcha, ya no es válido. Hacer esto al revés para el usuario malintencionado puede dañar fácilmente el servidor y obtener la lista de todos los usuarios que utilizan la fuerza bruta sin molestarse con captcha.
Tomasz Nurkiewicz
1
@TomaszNurkiewicz ACTUALIZACIÓN: el usuario malintencionado no podrá enviar el mismo re-captcha para su validación más de una vez. Entonces no, la fuerza bruta no es posible aquí. La razón para actualizar el captcha es simplemente permitir que el usuario lo ingrese nuevamente.
Tony Sepia
Creo que un atacante experto podría explotar los ataques de tiempo para encontrar qué datos están mal dependiendo de dónde esté la validación del bot; Prefiero mantener el mío como la primera verificación e inmediatamente rechazar cualquier cosa si fallan, también ayuda a reducir la carga en mi servidor, por lo que no estoy haciendo consultas DB cuando serán rechazadas de todos modos
Steve Byrne

Respuestas:

370

Para reCaptcha v2, use:

grecaptcha.reset();

Si está utilizando reCaptcha v1 ( probablemente no ):

Recaptcha.reload();

Esto servirá si hay un Recaptcha ya cargado en el window.

(Actualizado según el comentario de @ SebiH a continuación).

AhmetB - Google
fuente
20
Para cualquiera que use el nuevo reCAPTCHA: la línea ahora ha cambiado a grecaptcha.reset();( documentación )
SebiH
Estoy usando esto grecaptcha.reset();para mis aplicaciones de reacción, y funciona perfectamente
yussan
44
si no está seguro de que grecaptcha está cargado, useif (window.grecaptcha) grecaptcha.reset();
fred727
Aunque esto vuelve a cargar el captcha, el valor del campo para la respuesta captcha no parece eliminarse, por lo que mi formulario es válido.
Damian Green
58

Si está utilizando la versión 1

Recaptcha.reload();

Si está utilizando la versión 2

grecaptcha.reset();
Dasun
fuente
1
Copié la respuesta aceptada y la volví a publicar 3 años después. Urg.
PR Whitehead
@PRWhitehead Consulte el historial de edición. Por cierto, gracias por el voto negativo.
Dasun
Lo hice, no ha editado la suya, y la agregó por primera vez 3 meses después de que se actualizara la respuesta aceptada para reflejar un cambio en la API, lo que afecta la relevancia de la respuesta inicial y años después de que se agregó por primera vez. Lo rechacé porque esta respuesta aceptada es más útil.
PR Whitehead
2
Agregué esta respuesta porque me enfrenté al mismo problema. Aunque la respuesta aceptada reflejaba la respuesta correcta en el momento, no era lo suficientemente clara. Al menos para mí, es por eso que decidí agregar como una nueva respuesta con una separación clara (la respuesta aceptada no notó las diferencias con las versiones).
Dasun
8 
grecaptcha.reset(opt_widget_id)

Restablece el widget reCAPTCHA. Se puede pasar una identificación de widget opcional; de lo contrario, la función restablece el primer widget creado. (de la página web de Google)

Kutalia
fuente
solo restablece el primer captcha en la página
Maxwell sc
@ Maxwells.c ¿Leíste la publicación? Opcionalmente, puede pasar una identificación de widget y eliminar el enésimo widget. Si no pasa, entonces el primero se reinicia.
Kutalia
1
¿Qué es exactamente la identificación del widget? Intenté pasar la identificación html del recaptcha <div> pero recibí un error "identificación inválida del cliente recaptcha". Estoy pensando que necesito representar el widget explícitamente porque creo que el método render () devuelve la identificación que necesito.
Pete
6

Prueba esto 

<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
          function showRecaptcha() {
            Recaptcha.create("YOURPUBLICKEY", 'captchadiv', {
              theme: 'red',
              callback: Recaptcha.focus_response_field
            });
          }
 </script>

<div id="captchadiv"></div>

Si llama a showRecaptcha, el captchadiv se completará con una nueva instancia de recaptcha.

Tim
fuente
puedes cambiar tu código y llamar a showRecaptcha onload? ¿Te está ayudando?
Tim
6

O simplemente puede simular un clic en el botón Actualizar

// If recaptcha object exists, refresh it
    if (typeof Recaptcha != "undefined") {
      jQuery('#recaptcha_reload').click();
    }
AlxVallejo
fuente
1
Por alguna razón, Recaptchay grecaptchaambos están indefinidos en mi página. Esto funcionó para mí, con una ligera modificación:if( $("#recaptcha_reload").length > 0 ){ ....
Nate-Bit Int
Lo usé para saber cuándo se termina la iteración de una matriz sin contar sus elementos.
m3nda
3

Para usuarios de AngularJS:

$window.grecaptcha.reset();
Marcelo C.
fuente
1
En mi caso sin $ - window.grecaptcha.reset ();
Tony Sepia
3

Para la nueva versión de reCaptcha v2 use:

grecaptcha.reset();
Propósito corporativo
fuente
2

Si está utilizando la Versión 1.0 de la API reCAPTCHA, actualice a la Versión 2.0 (la Versión 1.0 ya no es compatible)

Use grecaptcha.reset();para restablecer el captcha.

s sharif
fuente
0

si está utilizando el nuevo recaptcha 2.0, use esto: para el código detrás:

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

para javascript simple

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>
Sara Khan
fuente