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

73

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
1
@jeroen Menschen mit deaktiviertem Javascript sind ein Randfall, auf den ich verzichten möchte, um Spam-Bots zu vermeiden.
Thanks_in_advance
1
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

Antworten:

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
1
Kleinere Korrektur (entfernen Sie die Klammern nach dem Funktionsnamen):<div class="g-recaptcha" data-sitekey="############-#####" data-callback="enableBtn"></div>
Caedmon
4
@ 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
1
@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
3
Du meinstvar enableBtn = function(){
mplungjan
14
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