Website-Icon Webdesign-Podcast

Tutorial: Captcha erstellen und einbinden mit reCaptcha für Kontakt-Formulare ect.

Das Problem dürfte jedem bekannt sein, der bereits eine Webseite erstellt hat oder betreibt: Spam über Kontaktformulare oder bei Registrierungen.

Sobald Suchmaschinen die Webseite indexiert haben und sich ein paar Besucher auf ihr tummeln, dann ist auch der Spam nicht weit entfernt. In der Regel hat man wenigstens in der Anfangszeit Ruhe vor den Spammern, aber auch nur weil diese die Webseite noch nicht für sich entdeckt haben.

Ein wirksamer Schutz vor Spam über Formulare ist eigentlich nur ein Captcha, diese gibt es in diversen Formen:

Buchstaben und Zahlen Captcha

Das Buchstaben und Zahlen Captcha ist das beliebteste und auch am meisten verbreitete Captcha. Es werden verzogene / verzerrte Zahlen und Buchstaben auf einem oftmals abstraktem Hintergrund angezeigt.

Wort Captcha

Bei einem Wort Captcha wird ein alltägliches Wort dargestellt von dem dann z.B. der erste und der letze Buchstabe in das Lösungs-Feld eingetragen werden. Das könnte zum Beispiel so aussehen: Bitte tragen Sie den zweiten und vierten Buchstaben des Wortes „Hund“ in das Feld ein – Die Lösung wäre dann: „ud“

Mathe Captcha

Bei einem Mathe Captcha muss wie der Name schon sagt eine mathematische Aufgabe gelöst werden. Dabei sollte die Aufgabe natürlich so simpel wie möglich sein, denn nicht jeder Webseiten-Besucher ist ein Mathegenie – Also Finger weg von Multiplizieren und Dividieren und einfache Additions- oder Subtraktionsaufgaben stellen. Ein entsprechendes Beispiel wäre: 2 + 5 und die Lösung = 7

reCaptcha ist ein Buchstaben und Zahlen Captcha

Das reCaptcha ist ein etwas anderes Captcha. Es stellt zwei natürliche Wörter die in der Regel nur aus Buchstaben bestehen und auch einen Sinn ergeben dar. Damit meine ich, es werden nicht einfach Buchstaben in einer zufälligen Reihenfolge dargestellt, sondern richtige Wörter aus dem Englischen-Sprachgebrauch. Beispiel: could assizze

Das besondere von reCaptcha ist, dass alle Wörter die in dem Captcha auftauchen aus gescannten Büchern stammen und mit jeder Eingabe einem gemeinnützigen Projekt geholfen wird Bücher und Texte zu digitalisieren.

Usability und Accessibility vom reCaptcha

reCaptcha bietet nicht nur die Möglichkeit die zwei Wörter einfach abzutippen und einzugeben, sondern auch die beiden Wörter vorlesen zu lassen um sie dann eintippen zu können. So ist auch Sehbehinderten Menschen die Möglichkeit gegeben, dass Captcha zu lösen und das entsprechend hinterlegte Formular abzuschicken.

Falls der Besucher der Webseite das Captcha nicht entziffern kann, gibt es eine Funktion um eine neue Wortkombination zu laden, dies geschieht via AJAX und der Besucher muss nicht die komplette Seite neu laden.

Für ältere Generationen oder Leute die noch nie ein Captcha gesehen haben, bietet reCaptcha eine integrierte Hilfe die alles genau erklärt.

reCaptcha ist ein Google Dienst und setzt einen Google Account voraus

Seit geraumer Zeit gehört das reCaptcha Projekt zu Google, um einen entsprechenden API Key zu erhalten wird ein Google Account vorausgesetzt. reCaptcha wird von den Google Servern geladen und liegt nicht auf dem eigenen Server.

Wer unter gar keinen Umständen einen Google Account anlegen möchte, für den fällt das reCaptcha System an dieser Stelle flach.

reCaptcha in die eigene Webseite einbinden

Wie bereits erwähnt ist ein Google Account Voraussetzung, damit legt man sich auf der reCaptcha Webseite einen public key und private key an. Diese werden für die Verbindung zur reCaptcha Schnittstelle benötigt.

Es gibt viele Möglichkeiten den reCaptcha Code in eine Webseite einzubinden und zu personalisieren, hierzu steht eine umfangreiche API zur Verfügung. Ich möchte mich hier allerdings mit der einfachen Art und Weise beschäftigen das Captcha einzubauen und zu verwenden.

Wir benötigen dazu nicht mehr als ein Formular und einen PHP-Fähigen Webspace.

Als erstes benötigen wir die PHP-Library von reCaptcha, die ihr inklusive guter Dokumentation auf der Webseite findet.

Dann bindet ihr folgenden Code in euer Formular ein:

 var RecaptchaOptions = {lang:\'de\',theme:\'white\'}; ';
// Aufrufen des Captchas via PHP Funktion
echo recaptcha_get_html($publickey, $error);
?>

Der JavaScript Bereich mit der Varibale „var RecaptchaOptions“ übergibt Einstellungen und Optionen an das eigentliche reCaptcha JavaScript. In diesem Beispiel stellen wir die Sprache auf Deutsch und wählen das weisse Template des Captchas.

Wenn ihr alles richtig gemacht habt, wird auf eurer Webseite nun ein Captcha dargestellt, es sollte ähnlich aussehen wie das auf unserer Kontakt-Seite.

Folgenden Code bindet ihr auf der Seite ein, auf der das Formular validiert wird. Beachtet hier vor allem die beiden IF-Abfragen die den Status des Captchas prüfen und entsprechend handeln.

is_valid) {
		// Das Captcha ist richtig ausgefüllt
        }else{
               $error = $resp->error;
               // Das Captcha ist Falsch, über die Variable $error kann auf die Fehlermeldung zugegriffen werden
        }
}

In den Bereich mit der erfolgreichen Captcha Validierung könnte jetzt z.B. mit PHP mail() eine Email versandt werden oder ein Benutzer registriert werden.

Das war alles. Wer weitere Funktionen des reCaptchas verwenden will oder das Script weiter individualisieren möchte, der sollte sich unbedingt mit der Dokumentation beschäftigen.

Solltet ihr noch Fragen zum reCaptcha haben, so werde ich gerne versuchen euch diese in den Kommentaren zu beantworten.

Viel Spaß damit.

Die mobile Version verlassen