{"id":24608,"date":"2021-05-22T11:51:00","date_gmt":"2021-05-22T08:51:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24608"},"modified":"2021-10-18T02:40:05","modified_gmt":"2021-10-17T23:40:05","slug":"google-recaptcha-mit-javascript-validieren","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/google-recaptcha-mit-javascript-validieren\/","title":{"rendered":"Google reCAPTCHA mit JavaScript validieren"},"content":{"rendered":"

Google reCAPTCHA ist eine beliebte Wahl zum Schutz der Website-Formulare vor Spam und Bots. Das reCAPTCHA fordert Benutzer auf, einfache R\u00e4tsel zu l\u00f6sen, die f\u00fcr Menschen leicht, f\u00fcr Bots jedoch schwierig sind. Als Ergebnis kann man seinen Serverplatz sparen, da unn\u00f6tige Spam-Eintr\u00e4ge in die Datenbank eingef\u00fcgt werden. Es spart uns auch Zeit, da wir nie Spam-Kommentare in unserem Postfach erhalten.<\/p>\n

Wenn wir ein Google reCAPTCHA in Website-Formularen hinzuf\u00fcgen, m\u00fcssen wir einen Code schreiben, um die Antwort von reCAPTCHA zu validieren. Wenn eine Antwort g\u00fcltig ist, sollte nur unser Formular fortfahren.<\/p>\n

Es gibt zwei M\u00f6glichkeiten, 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.<\/p>\n

Wenn Sie nach einer serverseitigen Validierung suchen, lesen Sie bitte den Artikel Using Google reCAPTCHA On Your Website Forms With PHP<\/a>.<\/p>\n

Registrieren Sie die Site und erhalten Sie API-Schl\u00fcssel<\/h3>\n

Um zu beginnen, m\u00fcssen Sie Ihre Site hier registrieren \u2013 <\/a>https:\/\/www.google.com\/recaptcha\/admin<\/a>.<\/p>\n

\"Google<\/a><\/p>\n

W\u00e4hlen Sie die Option "reCAPTCHA v2", die ein Kontrollk\u00e4stchen "Ich bin kein Roboter" anzeigt.<\/p>\n

Sobald Sie Details in das obige Formular eingegeben haben, erhalten Sie Ihren Site-Schl\u00fcssel und Ihren Geheimschl\u00fcssel. Da es sich um die clientseitige Validierung handelt, ben\u00f6tigen wir nur einen Site Key.<\/p>\n

Wenn Sie es auf einem lokalen Server testen m\u00f6chten, f\u00fcgen Sie ‚localhost‘ als Dom\u00e4ne hinzu.<\/p>\n

Google reCAPTCHA mit JavaScript validieren<\/h3>\n

Zuerst m\u00fcssen Sie Ihrem Formular Google reCAPTCHA hinzuf\u00fcgen. Sie k\u00f6nnen dies mit dem folgenden Code tun.<\/p>\n

<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script><\/code><\/pre>\n
Im obigen Code verwende ich onsubmit<\/code>event. Dies liegt daran, dass wir beim Absenden eines Formulars durch den Benutzer die reCAPTCHA-Antwort \u00fcberpr\u00fcfen und ihm dann das Absenden eines Formulars gestatten m\u00fcssen.<\/p>\n
Dann habe ich dem Attribut ‚data-callback‘ ein ‚verifyCaptcha‘ als Namen einer Callback-Funktion hinzugef\u00fcgt. Ich werde diese R\u00fcckrufmethode verwenden, um die Fehlermeldung zu entfernen, sobald die Validierung bestanden wurde. Ich habe auch ein div mit der ID ‚g-recaptcha-error‘ hinzugef\u00fcgt, um die Fehlermeldung anzuzeigen.<\/p>\n
Sie sollten den Platzhalter "YOUR_SITE_KEY" durch Ihren tats\u00e4chlichen Websiteschl\u00fcssel ersetzen.<\/p>\n
Schlie\u00dflich schreiben wir einen JavaScript-Code, der die reCAPTCHA-Antwort verarbeitet. Und basierend auf der Antwort zeigt es entweder eine Fehlermeldung an oder l\u00e4sst das Formular fortfahren.<\/p>\n
<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
In der Methode erhalten submitUserForm<\/code>wir die reCAPTCHA-Antwort mit grecaptcha.getResponse()<\/code>. Dies ist eine integrierte Funktion des Google reCAPTCHA-Dienstes.<\/p>\n
Wenn die Antwort ung\u00fcltig ist, wird 0 zur\u00fcckgegeben. Dies bedeutet, dass ein Benutzer reCAPTCHA noch nicht validiert hat. Und so wirft es einen Fehler aus und h\u00e4ngt an das div an, das die ID ‚g-recaptcha-error‘ hat.<\/p>\n
Wenn Google reCAPTCHA eine g\u00fcltige Antwort sendet, gebe ich einen wahren Wert zur\u00fcck, wodurch das Formular weitergef\u00fchrt werden kann.<\/p>\n
Die verifyCaptcha<\/code>Methode erh\u00e4lt einen Aufruf, wenn Sie alle R\u00e4tsel von reCAPTCHA l\u00f6sen. Wir entfernen dann die Fehlermeldung, sobald ein R\u00e4tsel gel\u00f6st ist.<\/p>\n
Unser endg\u00fcltiger Code lautet:<\/p>\n
<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script>\n<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
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\u00e4ge im Kommentarbereich unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n