Google reCAPTCHA mit JavaScript validieren

Last updated 18. Oktober 2021

Inhalt

Registrieren Sie die Site und erhalten Sie API-Schlüssel

Google reCAPTCHA ist eine beliebte Wahl zum Schutz der Website-Formulare vor Spam und Bots. Das reCAPTCHA fordert Benutzer auf, einfache Rätsel zu lösen, die für Menschen leicht, für Bots jedoch schwierig sind. Als Ergebnis kann man seinen Serverplatz sparen, da unnötige Spam-Einträge in die Datenbank eingefügt werden. Es spart uns auch Zeit, da wir nie Spam-Kommentare in unserem Postfach erhalten.

Wenn wir ein Google reCAPTCHA in Website-Formularen hinzufügen, müssen wir einen Code schreiben, um die Antwort von reCAPTCHA zu validieren. Wenn eine Antwort gültig ist, sollte nur unser Formular fortfahren.

Es gibt zwei Möglichkeiten, die Antwort zu validieren, eine serverseitig und die andere clientseitig. In diesem Artikel konzentrieren wir uns auf die clientseitige Validierung und untersuchen daher, wie Sie Google reCAPTCHA mit JavaScript validieren.

Wenn Sie nach einer serverseitigen Validierung suchen, lesen Sie bitte den Artikel Using Google reCAPTCHA On Your Website Forms With PHP.

Registrieren Sie die Site und erhalten Sie API-Schlüssel

Um zu beginnen, müssen Sie Ihre Site hier registrieren – https://www.google.com/recaptcha/admin.

Wählen Sie die Option "reCAPTCHA v2", die ein Kontrollkästchen "Ich bin kein Roboter" anzeigt.

Sobald Sie Details in das obige Formular eingegeben haben, erhalten Sie Ihren Site-Schlüssel und Ihren Geheimschlüssel. Da es sich um die clientseitige Validierung handelt, benötigen wir nur einen Site Key.

Wenn Sie es auf einem lokalen Server testen möchten, fügen Sie ‘localhost’ als Domäne hinzu.

Google reCAPTCHA mit JavaScript validieren

Zuerst müssen Sie Ihrem Formular Google reCAPTCHA hinzufügen. Sie können dies mit dem folgenden Code tun.

<form method="post" onsubmit="return submitUserForm();">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
    <div id="g-recaptcha-error"></div>
    <input type="submit" name="submit" value="Submit" />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>

Im obigen Code verwende ich onsubmitevent. Dies liegt daran, dass wir beim Absenden eines Formulars durch den Benutzer die reCAPTCHA-Antwort überprüfen und ihm dann das Absenden eines Formulars gestatten müssen.

Dann habe ich dem Attribut ‘data-callback’ ein ‘verifyCaptcha’ als Namen einer Callback-Funktion hinzugefügt. Ich werde diese Rückrufmethode verwenden, um die Fehlermeldung zu entfernen, sobald die Validierung bestanden wurde. Ich habe auch ein div mit der ID ‘g-recaptcha-error’ hinzugefügt, um die Fehlermeldung anzuzeigen.

Sie sollten den Platzhalter "YOUR_SITE_KEY" durch Ihren tatsächlichen Websiteschlüssel ersetzen.

Schließlich schreiben wir einen JavaScript-Code, der die reCAPTCHA-Antwort verarbeitet. Und basierend auf der Antwort zeigt es entweder eine Fehlermeldung an oder lässt das Formular fortfahren.

<script>
function submitUserForm() {
    var response = grecaptcha.getResponse();
    if(response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha() {
    document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>

In der Methode erhalten submitUserFormwir die reCAPTCHA-Antwort mit grecaptcha.getResponse(). Dies ist eine integrierte Funktion des Google reCAPTCHA-Dienstes.

Wenn die Antwort ungültig ist, wird 0 zurückgegeben. Dies bedeutet, dass ein Benutzer reCAPTCHA noch nicht validiert hat. Und so wirft es einen Fehler aus und hängt an das div an, das die ID ‘g-recaptcha-error’ hat.

Wenn Google reCAPTCHA eine gültige Antwort sendet, gebe ich einen wahren Wert zurück, wodurch das Formular weitergeführt werden kann.

Die verifyCaptchaMethode erhält einen Aufruf, wenn Sie alle Rätsel von reCAPTCHA lösen. Wir entfernen dann die Fehlermeldung, sobald ein Rätsel gelöst ist.

Unser endgültiger Code lautet:

<form method="post" onsubmit="return submitUserForm();">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
    <div id="g-recaptcha-error"></div>
    <input type="submit" name="submit" value="Submit" />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitUserForm() {
    var response = grecaptcha.getResponse();
    if(response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha() {
    document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>

Ich hoffe, Sie verstehen, wie Sie Google reCAPTCHA mit JavaScript validieren. Probieren Sie es in Ihrem Projekt aus und teilen Sie Ihre Gedanken oder Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net