ReCaptcha 2.0: Aktivieren Sie die Schaltfläche Senden bei Rückruf, wenn Recaptcha erfolgreich ist

Ich habe eine sehr einfache Form wie folgt. Ich möchte es so gestalten, dass die Schaltfläche Senden deaktiviert und erst aktiviert wird, nachdem der Benutzer die ReCaptcha erfolgreich abgeschlossen hat.

Ich gehe davon aus, dass ich dafür Javascript / jQuery benötige.

Googles Dokumentation zu ReCaptcha 2.0 scheint wirklich spärlich und dicht zu sein (für mich jedenfalls). Ich würde mich über einige Hinweise freuen:

<form action="something.php" method="post">
    Name: <input type="text" size="40" name="name"><br><br>
    <div class="g-recaptcha" data-sitekey="############-#####"></div>
    <input type="submit" value="Submit" >
</form>

— Danke im Voraus
quelle

Angenommen, das Captcha ist das Letzte vor dem Senden-Button, dann führen Sie nur eine Verzögerung für Ihre Besucher ein. Und was ist, wenn Javascript deaktiviert ist?

— Jeroen

@jeroen Menschen mit deaktiviertem Javascript sind ein Randfall, auf den ich verzichten möchte, um Spam-Bots zu vermeiden.

— Thanks_in_advance

Ist die Methode tatsächlich sicher? Kann ein Spam-Bot das Formular nicht trotzdem ohne eine Schaltfläche zum Senden senden?

— Daniel Blythe

@ user1883050, Sie haben eine Antwort nicht als richtig markiert. Hast du das zum Laufen gebracht?

— Colecmc

Hat es jemand in der realen Welt getestet? Ich denke, Bots brauchen keine Schaltfläche zum Senden, sie verwenden Formular-URL und Eingabefelder und Beiträge ... Oder ist dies nur der Teil des Verfahrens, um Benutzern das Senden von Formularen ohne Aktivieren des Kontrollkästchens nicht zu ermöglichen?

— Gediminas

144

Ich habe das gleiche auf meiner Testseite gemacht. Ich habe jedoch einen Button verwendet, anstatt zu senden, also hier:

Sie müssen die Eigenschaft data-callback="enableBtn"data-callback hinzufügen, die die nach Abschluss von recaptcha angegebene Funktion ausführt.

<div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div>

und setzen Sie die ID der Schaltfläche auf die gewünschte ID und deaktivieren Sie sie:

<input type="button" value="Submit" id="button1" disabled="disabled">

Machen Sie dann auf Javascript eine Funktion, um die Schaltfläche zu aktivieren

 function enableBtn(){
   document.getElementById("button1").disabled = false;
 }

ich hoffe es hilft.

— panda.o24
quelle

Kleinere Korrektur (entfernen Sie die Klammern nach dem Funktionsnamen):<div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div>

— Caedmon

@ panda.o24 Wirklich hilfreich und das funktioniert bei mir. Etwas verwirrt. Ist das Captcha bereits vollständig überprüft, wenn der Rückruf aufgerufen wird? Wenn ja, wozu dient der geheime Schlüssel, den Sie bei der Registrierung erhalten? Ich ging davon aus, dass irgendwo im Rückruf-Javascript ein Ajax-Anruf bei Google notwendig sein würde? Habe ich das falsch verstanden

— Ifinlay

@ifinlay Der Validierungsbildschirm wird in einen <iframe> gerendert, der zur Laufzeit in das DOM eingefügt wird. Der Inhalt des Iframes ist dafür verantwortlich, Google anzurufen und die Validierung durchzuführen. Sie können das Gleiche auf der Serverseite tun, dies erfordert jedoch den geheimen Schlüssel, möglicherweise zum Schutz vor XSS?

— Lee

Du meinstvar enableBtn = function(){

— mplungjan

data-expired-callbackSie sollten auch ein Attribut festlegen, mit dem die Schaltfläche wieder deaktiviert werden kann, wenn der Benutzer zu lange wartet und die Captcha-Prüfung abläuft. developer.google.com/recaptcha/docs/display

— Blazemonger