Come ricaricare ReCaptcha usando JavaScript?


177

Ho un modulo di iscrizione con AJAX, quindi desidero aggiornare l'immagine di Recaptcha ogni volta che si verifica un errore (ovvero nome utente già in uso).

Sto cercando un codice compatibile con ReCaptcha per ricaricarlo utilizzando JavaScript.


1
Non preoccuparti. Perché cambiare CAPTCHA se viene utilizzato il nome utente?
SLaks

18
@SLaks : probabilmente perché prima controlla captcha e poi controlla l'utente - e una volta usato captcha non è più valido. Al contrario, l'utente malintenzionato può facilmente sbagliare il server e ottenere l'elenco di tutti gli utenti che usano la forza bruta senza essere disturbati da captcha.
Tomasz Nurkiewicz,

1
@TomaszNurkiewicz AGGIORNAMENTO: l'utente malintenzionato non sarà in grado di inviare lo stesso re-captcha per la convalida più di una volta. Quindi no, la forza bruta non è possibile qui. Il motivo per aggiornare il captcha è semplicemente consentire all'utente di inserirlo nuovamente.
Tony Sepia,

Credo che un abile attaccante possa sfruttare gli attacchi di temporizzazione per trovare quali dati sono sbagliati a seconda di dove si trova la validazione del bot; Preferisco mantenere il mio come primo controllo e rifiutare immediatamente qualsiasi cosa se falliscono, inoltre aiuta a ridurre il carico sul mio server, quindi non eseguo query DB quando verranno rifiutate comunque
Steve Byrne,

Risposte:



370

Per reCaptcha v2, utilizzare:

grecaptcha.reset();

Se stai usando reCaptcha v1 ( probabilmente no ):

Recaptcha.reload();

Ciò avverrà se è presente un Recaptcha già caricato su window.

(Aggiornato in base al commento di @ SebiH di seguito.)


20
Per chiunque utilizzi il nuovo reCAPTCHA: la riga è ora cambiata in grecaptcha.reset();( documentazione )
SebiH

lo sto usando grecaptcha.reset();per le mie app di reazione e funziona perfettamente
yussan

4
se non sei sicuro che grecaptcha sia caricato, usaif (window.grecaptcha) grecaptcha.reset();
fred727

Anche se questo ricarica il captcha, il valore del campo per la risposta captcha non sembra essere rimosso, lasciando il mio modulo valido.
Damian Green,

58

Se si utilizza la versione 1

Recaptcha.reload();

Se stai usando la versione 2

grecaptcha.reset();

1
Copia la risposta accettata e ripubblicata 3 anni dopo. Urg.
PR Whitehead,

@PRWhitehead Si prega di consultare la cronologia delle modifiche. A proposito, grazie per il voto negativo.
Dasun,

L'ho fatto, non hai modificato il tuo e l'hai aggiunto per la prima volta 3 mesi dopo l'aggiornamento della risposta accettata per riflettere una modifica all'API, influendo sulla pertinenza della risposta iniziale e anni dopo che è stata aggiunta per la prima volta. L'ho declassato perché questa risposta accettata è più utile.
PR Whitehead

2
Ho aggiunto questa risposta perché ho affrontato lo stesso problema. Sebbene la risposta accettata riflettesse la risposta corretta al momento, non era abbastanza chiara. Almeno per me, ecco perché ho deciso di aggiungere una nuova risposta con una chiara separazione (la risposta accettata non ha notato le differenze rispetto alle versioni).
Dasun

8
grecaptcha.reset(opt_widget_id)

Reimposta il widget reCAPTCHA. È possibile passare un ID widget opzionale, altrimenti la funzione ripristina il primo widget creato. (dalla pagina Web di Google)


ripristina solo il primo captcha nella pagina
Maxwell sc

@ Maxwells.c Hai mai letto il post? Facoltativamente, è possibile passare un ID widget ed eliminare l'ennesimo widget. Se non si passa, il primo viene ripristinato.
Kutalia,

1
Che cos'è esattamente l'ID del widget? Ho provato a passare l'ID HTML del recaptcha <div> ma ho ricevuto un errore "ID client recaptcha non valido". Sto pensando di dover rendere esplicitamente il widget perché penso che il metodo render () restituisca l'id di cui ho bisogno.
Pete,

opt_widget_id è facoltativo ed è l'id restituito dalla chiamata di rendering, sebbene, se mancante, si riferirà al primo widget di ricaptcha creato (se hai un solo widget, questo sarà sufficiente).
frzsombor

6

Prova questo

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

Se chiami showRecaptcha, captchadiv verrà popolato con una nuova istanza di recaptcha.


puoi cambiare il tuo codice e chiamare showRecaptcha onload? Ti sta aiutando?
Tim

6

Oppure potresti semplicemente simulare un clic sul pulsante di aggiornamento

// If recaptcha object exists, refresh it
    if (typeof Recaptcha != "undefined") {
      jQuery('#recaptcha_reload').click();
    }

1
Per qualche ragione, Recaptchae grecaptchasono entrambi indefiniti nella mia pagina. Questo ha funzionato per me, con una leggera modifica:if( $("#recaptcha_reload").length > 0 ){ ....
Nate-Bit Int

L'ho usato per sapere quando è finita l'iterazione di un array senza contare i suoi elementi.
m3nda,

3

Per gli utenti di AngularJS:

$window.grecaptcha.reset();

1
Nel mio caso senza $ - window.grecaptcha.reset ();
Tony Sepia,


2

Se si utilizza la versione 1.0 dell'API reCAPTCHA, eseguire l'aggiornamento alla versione 2.0 (la versione 1.0 non è più supportata)

Utilizzare grecaptcha.reset();per ripristinare il captcha.


0

se stai usando il nuovo recaptcha 2.0 usa questo: per il codice dietro:

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

per javascript semplice

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.