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.

javascript recaptcha

— AhmetB - Google
fonte

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,

29

Importante: la versione 1.0 dell'API reCAPTCHA non è più supportata, eseguire l'aggiornamento alla versione 2.0.

Puoi usare grecaptcha.reset (); per ripristinare il captcha.

Fonte: https://developers.google.com/recaptcha/docs/verify#api-request

— abhiagNitk
fonte

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

— AhmetB - Google
fonte

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();

— Dasun
fonte

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)

— Kutalia
fonte

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.

— Tim
fonte

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();
    }

— AlxVallejo
fonte

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();

— Marcelo C.
fonte

1

Nel mio caso senza $ - window.grecaptcha.reset ();

— Tony Sepia,

3

Per la nuova versione di reCaptcha v2 utilizzare:

grecaptcha.reset();

— Scopo aziendale
fonte

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.

— s sharif
fonte

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>

— Sara Khan
fonte