Wie lade ich ReCaptcha mit JavaScript neu?

177

Ich habe ein Anmeldeformular bei AJAX, damit ich das Recaptcha-Bild jedes Mal aktualisieren kann, wenn ein Fehler auftritt (dh der Benutzername wird bereits verwendet).

Ich suche nach einem mit ReCaptcha kompatiblen Code, um ihn mit JavaScript neu zu laden.

javascript recaptcha

— AhmetB - Google
quelle

1

Mach dir keine Sorgen. Warum das CAPTCHA ändern, wenn der Benutzername verwendet wird?

— SLaks

18

@SLaks : wahrscheinlich, weil er zuerst Captcha und dann den Benutzer überprüft - und sobald Captcha verwendet wird, ist es nicht mehr gültig. Wenn Sie dies umgekehrt tun, kann der böswillige Benutzer den Server leicht beschädigen und die Liste aller Benutzer mit Brute Force abrufen, ohne sich um Captcha zu kümmern.

— Tomasz Nurkiewicz

1

@TomaszNurkiewicz UPDATE: Der böswillige Benutzer kann nicht mehr als einmal dasselbe Re-Captcha zur Validierung einreichen. Also nein, Bruteforce ist hier nicht möglich. Der Grund für das Aktualisieren des Captchas besteht darin, dass der Benutzer es einfach erneut eingeben kann.

— Tony Sepia

Ich glaube, ein erfahrener Angreifer könnte Timing-Angriffe ausnutzen, um herauszufinden, welche Daten falsch sind, je nachdem, wo sich die Bot-Validierung befindet. Ich ziehe es vor, meine als erste Prüfung beizubehalten und alles sofort abzulehnen, wenn sie fehlschlagen. Außerdem wird die Belastung meines Servers verringert, sodass ich keine DB-Abfragen durchführe, wenn sie sowieso abgelehnt werden

— Steve Byrne,

29

Wichtig: Version 1.0 der reCAPTCHA-API wird nicht mehr unterstützt. Bitte aktualisieren Sie auf Version 2.0.

Sie können grecaptcha.reset () verwenden; Captcha zurücksetzen.

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

— abhiagNitk
quelle

370

Verwenden Sie für reCaptcha v2:

grecaptcha.reset();

Wenn Sie reCaptcha v1 verwenden ( wahrscheinlich nicht ):

Recaptcha.reload();

Dies ist möglich, wenn bereits ein Recaptcha auf dem Computer geladen ist window.

(Aktualisiert basierend auf dem Kommentar von @ SebiH unten.)

— AhmetB - Google
quelle

20

Für alle, die das neue reCAPTCHA verwenden: Die Zeile wurde jetzt geändert in grecaptcha.reset();( Dokumentation )

— SebiH

Ich benutze dies grecaptcha.reset();für meine Reaktions-Apps und es funktioniert perfekt

— Yussan

4

Wenn Sie nicht sicher sind, ob Grecaptcha geladen ist, verwenden Sieif (window.grecaptcha) grecaptcha.reset();

— fred727

Obwohl das Captcha dadurch neu geladen wird, scheint der Feldwert für die Captcha-Antwort nicht entfernt zu werden, sodass mein Formular gültig bleibt.

— Damian Green

58

Wenn Sie Version 1 verwenden

Recaptcha.reload();

Wenn Sie Version 2 verwenden

grecaptcha.reset();

— Dasun
quelle

1

Kopierte die akzeptierte Antwort und postete sie 3 Jahre später erneut. Urg.

— PR Whitehead

@PRWhitehead Bitte beachten Sie den Bearbeitungsverlauf. Übrigens, danke für die Ablehnung.

— Dasun

Ich habe es getan, Sie haben Ihre nicht bearbeitet und Sie haben sie 3 Monate nach der Aktualisierung der akzeptierten Antwort hinzugefügt, um eine Änderung der API widerzuspiegeln. Dies wirkt sich auf die Relevanz der ursprünglichen Antwort und Jahre nach ihrer ersten Hinzufügung aus. Ich habe es abgelehnt, weil dies die akzeptierte Antwort nützlicher ist.

— PR Whitehead

2

Ich habe diese Antwort hinzugefügt, weil ich vor dem gleichen Problem stand. Obwohl die akzeptierte Antwort die richtige Antwort zu der Zeit widerspiegelte, war sie nicht klar genug. Zumindest für mich habe ich mich deshalb entschlossen, eine neue Antwort mit klarer Trennung hinzuzufügen (die akzeptierte Antwort hat die Unterschiede zu den Versionen nicht bemerkt).

— Dasun

8

grecaptcha.reset(opt_widget_id)

Setzt das reCAPTCHA-Widget zurück. Eine optionale Widget-ID kann übergeben werden, andernfalls setzt die Funktion das zuerst erstellte Widget zurück. (von der Google-Webseite)

— Kutalia
quelle

es wird nur das erste Captcha auf der Seite zurückgesetzt

— Maxwell sc

@ Maxwells.c Hast du den Beitrag überhaupt gelesen? Optional können Sie eine Widget-ID übergeben und das n-te Widget löschen. Wenn Sie nicht bestehen, wird der erste zurückgesetzt.

— Kutalia

1

Was genau ist die Widget-ID? Ich habe versucht, die HTML-ID von recaptcha <div> zu übergeben, habe jedoch die Fehlermeldung "ungültige recaptcha-Client-ID" erhalten. Ich denke, ich muss das Widget explizit rendern, weil ich denke, dass die render () -Methode die ID zurückgibt, die ich brauche.

— Pete

6

Versuche dies

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

Wenn Sie showRecaptcha aufrufen, wird das Captchadiv mit einer neuen Recaptcha-Instanz gefüllt.

— Tim
quelle

Sie können Ihren Code ändern und showRecaptcha onload aufrufen? Hilft dir das?

— Tim

6

Oder Sie simulieren einfach einen Klick auf die Schaltfläche "Aktualisieren"

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

— AlxVallejo
quelle

1

Aus irgendeinem Grund Recaptchaund grecaptchabeide sind auf meiner Seite undefiniert. Dies funktionierte für mich mit einer geringfügigen Änderung:if( $("#recaptcha_reload").length > 0 ){ ....

— Nate-Bit Int

Ich habe das verwendet, um zu wissen, wann die Iteration eines Arrays beendet ist, ohne seine Elemente zu zählen.

— m3nda

3

Für AngularJS-Benutzer:

$window.grecaptcha.reset();

— Marcelo C.
quelle

1

In meinem Fall ohne $ - window.grecaptcha.reset ();

— Tony Sepia

3

Für die neue Version von reCaptcha v2 verwenden Sie:

grecaptcha.reset();

— Unternehmenszweck
quelle

2

Wenn Sie Version 1.0 der reCAPTCHA-API verwenden, aktualisieren Sie bitte auf Version 2.0 (Version 1.0 wird nicht mehr unterstützt).

Verwenden Sie grecaptcha.reset();diese Option, um das Captcha zurückzusetzen.

— s sharif
quelle

0

Wenn Sie neues Recaptcha 2.0 verwenden, verwenden Sie Folgendes: für den Code dahinter:

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

für einfaches Javascript

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

— Sara Khan
quelle