Wie kann ich js einchecken, dass der Nutzer das Kontrollkästchen in Google Recaptcha aktiviert hat?

78

Ich habe vor dem Ende des Kopfes Folgendes hinzugefügt

<script src='https://www.google.com/recaptcha/api.js'></script>

Ich habe dies vor dem Ende des Formulars hinzugefügt

<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>

Ich kann das Recaptcha ähnlich wie https://developers.google.com/recaptcha/ sehen.

Wenn der Benutzer jedoch Daten drückt, ohne das Kontrollkästchen zu aktivieren, werden die Daten gesendet. Gibt es einen anderen Code, den ich hinzufügen muss, um zu überprüfen, ob der Benutzer das Kontrollkästchen aktiviert hat? Hoffentlich in js?

javascript jquery checkbox recaptcha Hallo Universum
quelle
1
Haben Sie diese Seite gelesen: developer.google.com/recaptcha/docs/verify
Daniel A. White
yeep .. kann nicht scheinen, um herauszufinden, wie dies funktioniert
Hallo Universum
Sie sollten dies auf Ihrem Backend-Server anfordern. Es wäre nicht sehr sicher für den Browser, dies alleine zu tun.
Daniel A. White
Das ist gut. Wie kann man das vom Frontend anfordern, vielleicht mit jquery?
Hallo Universum

Antworten:

186

Google hat eine Rückrufoption, wenn das Kontrollkästchen aktiviert ist.

Fügen Sie dies Ihrem Formularelement hinzu:

data-callback="XXX"

Beispiel:

<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>

Und ein Deaktivierungsattribut für Ihre Senden-Schaltfläche.

Beispiel:

<button id="submitBtn" disabled>Submit</button>

Erstellen Sie dann eine Rückruffunktion und schreiben Sie den gewünschten Code.

Beispiel:

function recaptchaCallback() {
    $('#submitBtn').removeAttr('disabled');
};
slinky2000
quelle
1
@mohanenb: Es soll nur das Senden verhindern, es soll nicht wie üblich die Serverseite überprüfen.
Halfbit
2
Wie kann man ein Timeout-Problem lösen? Wenn jemand das reCaptcha überprüft und dann einige Minuten lang kein Formular sendet, läuft reCaptcha ab, aber der Benutzer kann das Formular weiterhin senden.!
Akshay Kapoor
2
@AkshayKapoor Daten-abgelaufen-Rückruf
xinthose
4
Nur ein Kopf hoch, um die Funktion recaptchaCallback () außerhalb des Dokuments zu platzieren. Bereits so, dass sie vom Captcha-Steuerelement erreicht werden kann. Andernfalls wird der Fehler console.log wie "ReCAPTCHA konnte die vom Benutzer bereitgestellte Funktion nicht finden:" angezeigt.
ForTheWin
1
Diese Lösung lediglich eine Funktion aufruft , wenn das Captcha ist gelöst, aber bietet keine Funktion zu überprüfen , ob das Captcha wurde gelöst.
João Pimentel Ferreira
71

Sie können auch das zu überprüfende grecaptcha-Objekt aufrufen. grecaptcha.getResponse();ist leer, wenn nicht markiert, und hat den Bestätigungscode, wenn aktiviert.

grecaptcha.getResponse().length === 0 wenn nicht markiert

function isCaptchaChecked() {
  return grecaptcha && grecaptcha.getResponse().length !== 0;
}

if (isCaptchaChecked()) {
  // ...
}
Olafur Tryggvason
quelle
Aber wie bekomme ich grecaptcha.getResponse ()?
Nitin Dhomse
Es wird geladen, sobald Sie Googles Recaptcha laden. Teil des Pakets
Olafur Tryggvason
Ich habe versucht, aber nicht funktioniert, Konsole Debug sagt >> "Uncaught ReferenceError: grecaptcha ist nicht definiert"
silvachathura
Skript sollte zuerst recaptcha laden, versuchen, es asynchron oder mit setTimeout
Denys Klymenko
2
var isCaptchaChecked = (grecaptcha && grecaptcha.getResponse().length !== 0);
Jaybro
8

Um zu überprüfen, ob Google Recaptcha aktiviert ist oder nicht, können Sie dies mit dem folgenden Code tun: 

<script>

if(grecaptcha && grecaptcha.getResponse().length > 0)
{
     //the recaptcha is checked
     // Do what you want here
     alert('Well, recaptcha is checked !');
}
else
{
    //The recaptcha is not cheched
    //You can display an error message here
    alert('Oops, you have to check the recaptcha !');
}

</script>
MUSTAPHA GHLISSI
quelle
4

Um zu überprüfen, ob Google Recaptcha v2 aktiviert ist oder nicht, können Sie dies mit dem folgenden Code tun: 

var checkCaptch = false;
     var verifyCallback = function(response) {
        if (response == "") {
             checkCaptch = false;
         }
         else {
             checkCaptch = true;
         }
     };
     $(document).ready(function() {
         $("#btnSubmit").click(function() {
             if (checkCaptch && grecaptcha.getResponse()!="") {
                  //Write your success code here
             }
         });
     })
Manish Vadher
quelle
3

Lassen Sie den Browser die Arbeit für Sie erledigen! (basierend auf der Antwort von slinky2000)

Hinweis: Dies dient nur dazu, das Senden einer "versehentlich" ungeprüften Wiederholung zu verhindern. Sie müssen das Recaptcha noch auf der Serverseite überprüfen, da es einem Bot egal ist ...

Fügen Sie ein unsichtbares Eingabe-Tag mit einem required=trueAttribut direkt unter dem hinzu div.g-recaptcha.

<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none; 
position:absolute; 
bottom:0;'>

Schließen Sie beide Breiten a divmit ein position=relative;, um das bottom:0;Obige auf den Boden von Recaptcha zu zeigen.

Jetzt bittet der Browser freundlich, dieses Feld auszufüllen und auf die Zusammenfassung zu zeigen.

Jetzt brauchen wir den Rückruf: 

<div class="g-recaptcha" data-callback="recaptchaCallback" ...

und

function recaptchaCallback() { 
    $('#recaptcha_check_empty').val(1);
}
Halbbit
quelle