Allgemein, PHP / MySQL

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

WordPress Entwickler und Webdesigner

Update: Für diesen Artikel / Inhalt liegt eine überarbeitete bzw. angepasste Version vor. Weitere Details findest du in folgendem Artikel: Google reCAPTCHA einbinden und Spam abwehren.

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.

Anzeige:




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:

<?php
// Einbinden der reCaptcha PHP Library
require_once('recaptchalib.php');
 
$publickey = "xxx"; // Public Key
$privatekey = "xxx"; // Private Key
// Einstellungen für das reCaptcha
echo '<script type="text/javascript"> var RecaptchaOptions = {lang:\'de\',theme:\'white\'}; </script>';
// 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.

<?php
// Einbinden der reCaptcha PHP Library
require_once('recaptchalib.php');
 
$publickey = "xxx"; // Public Key
$privatekey = "xxx"; // Private Key
 
// Rückgabe Werte vom reCaptcha zurücksetzen, falls bereits ein Wert besteht
$resp = null;
$error = null;
 
// Abfrage ob das Captcha ausgefüllt wurde
if ($_POST["recaptcha_response_field"]) {
        $resp = recaptcha_check_answer ($privatekey,
                                        $_SERVER["REMOTE_ADDR"],
                                        $_POST["recaptcha_challenge_field"],
                                        $_POST["recaptcha_response_field"]);
 
        if ($resp->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.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

12 Antworten zu “Tutorial: Captcha erstellen und einbinden mit reCaptcha für Kontakt-Formulare ect.”

  1. Danke, das ist sehr hilfreich. Doch welches ist nun die einfachste Art von den Möglichkeiten, welche Du vorgestellt hast? Absolute Sicherheit ist für mich nicht so wichtig, es soll einfach und schnell gehen.

  2. Hey, das Mathecaptcha hört sich lustig an, aber entweder bin ich PHP Technisch doch ein schlimmerer Noob als ich dachte, oder ich bin einfach nur doof ^^.

    Wie müsste der Code denn sein, wenn ich ein Mathe Captcha machen will und wo müsste ich die Beispiele – da ich immer im Hinterkopf habe, das dieses dann ja darauf zurückgreift – einbauen?

    Ich danke schonmal im Voraus und finde das die Seite sehr gut und leicht erklärbar gemacht wurde. Respekt.

    Gruß Rodney

  3. Hallo, ich habe jetzt zum ersten Mal den Hintergrund zu reCaptcha erfahren. Er war mir bisher überhaupt nicht bekannt. Das ist ja wirklich ein tolles Projekt.
    Werde meinen Blog wohl auch wieder umstellen und reCaptcha verwenden 😉

  4. Hallo

    Ich habe auch ein grosses Problem mit Spamanfragen über das Kontaktformular.
    Die Seite wurde mit Modx Evolution erstellt.
    Zugang habe ich. aber ich kenne mich da nicht aus, da ich die Seite nicht erstellt habe.
    Bitte hilf mir und schreib mir genau wie und was ich zu machen habe, dass ich nichts kaputt mache.

    LG

  5. Das Codebeispiel ist vielleicht etwas zu minimal, es sollte nicht nur überprüft werden ob das captcha *falsch* ausgefüllt wurde sondern zusätzlich ob überhaupt ein captcha eingegeben wurde:

    Sprich bei

    if ($_POST[„recaptcha_response_field“]) {

    } else {
    die(„kein captcha eingegeben.“);
    }

    Zwar ist das Skript so gedacht das man den mail-code im Block von is_valid eingibt, aber dann gibt es keine Rückmeldung wenn man das captcha nicht eingegeben hat; wenn jemand (unbedacht) den Code drunter setzt ist der Schutz wirkungslos.

    Ansonsten guter Einstieg, hat mir sehr geholfen.

    P.S. get_html unterstützt optional auch SSL als dritten Parameter

  6. ich habe den code 1:1 kopiert eingefügt die key#s gesetzt und ab dem teil wir mein dokument ( meine seite abgeschnitten bzw es wir nix mehr angezeigt und auch geladen … als ob nachdem code nichts mehr kommt was ist da los ?

  7. Hallo in die Runde,

    ich bin auf der Suche nach einem wirklich sicherem CAPTCHA!
    Auf einigen Seiten habe ich das Beispiel Play CAPTCHA gefunden, also kleine Spiele wie zum Beispiel Werkzeug in einen Korb legen oder einem Kartoffelkopf Augen und Nase anstecken und sowas….
    Ich kann mir Vorstellen, das dieses wohl die sicherste Art ist, da Robots so eine Aufgabe nicht meistern können, so denke ich. Hat jemad Erfahrungen damit, wo ich sowas her bekomme oder muss ich mich wirkliuch selber hinsetzen um das zu programmieren in Java oder PHP ?

    • Hallo Daniel,

      im Grunde verfolgt ReCaptcha den selben Ansatz, mit den Bilderrätseln.
      Die Bilderrätsel sind ja nichts anderes als ein kleines Spiel bei dem gewisse Bilder bzw. Motive geordnet bzw. ausgewählt werden müssen.

      Ich würde daher auf ReCaptcha setzen anstatt eine eigene Lösung zu bauen. ReCaptcha hat sich bisher als extrem effektiv erwiesen und die meisten Nutzer sind den Dialog bereits gewohnt.

      Beste Grüße
      Pascal

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.