CAPTCHA erstellen

CAPTCHAs sind die Grafiken mit Buchstaben und Zahlen, die einem das Leben schwer machen bei der Anmeldung in Foren, für Newsletters und viele weiteren Geschichten. Das Wort CAPTCHA steht für Completely Automated Public Turing test to tell Computers and Humans Apart.

Als Funktion soll anhand dieser "Wort-Bilder" getestet werden, ob auf der anderen Seite (somit also auf beiden Seiten) ein Computer sitzt und vollautomatisch sich in Foren anmeldet, um diese zuzuspammen.

Dass diese CAPTCHAs teilweise zu einfach sind, so dass auch ein Programm diese über Texterkennung auslesen kann bzw. diese zu komplex sind, so dass selbst Menschen raten müssen (siehe Sam Hocevar), was da wohl stehen könnte, ist ein anderes Thema.

Im folgenden Beispiel werden wir eine CAPTCHA-Clock basteln - didaktisch raffiniert, denn darin ist schön zu sehen, wie man eine fertige Grafik verwenden kann und dort neuen, wechselnden Text unterbringt.

CAPTCHA-Clock - mehr Schutz im Uhrzeigersinn

Vorgehensweise ist, dass man ein Bild für den Hintergrund hat, auf dem dann die Zeichen platziert werden. Hier unsere leere CAPTCHA-Clock - CAPTCHA-Clock deshalb, weil wie bei der Uhr der Inhalt im Kreis im Uhrzeigersinn gelesen wird und dies die meisten CAPTCHA-Roboter aus dem Tritt bringt (bisher habe ich nur lineare CAPTCHAs gesehen :).

Die Grafik erstellen Sie mit einem Grafikprogramm (und für diese Übung laden Sie einfach diese Grafik herunter: mit rechten Maustaste auf das Bild klicken und "Bild speichern unter" wählen ...).

Und nach dem Ausfüllen des Programmes erscheinen dann (jedes Mal andere) Zeichen (hier jedes Mal, wenn die Seite neu aufgerufen wird).

Im ersten Schritt werden wir die Grafik laden und dort die Zeilen platzieren. Erst im nächsten Schritt wollen wir auf der Grafikergänzung ein CAPTCHA basteln - es werden also Zeichen nach Zufall ausgewählt, angezeigt und im Hintergrund in einer SESSION zur Auswertung mitübertragen.

Die Erklärungen finden Sie im Quellcode - achten Sie darauf, dass der Font (hier arial.ttf) auch später auf dem Webserver vorliegt, sonst funktioniert es nicht.

<?php
// Unsere Zeichen in einem Array
$text[0] = "H";
$text[1] = "S";
$text[2] = "L";
$text[3] = "8";
$text[4] = "U";

Header ("Content-type: image/png");

// Laden der Rohdatei, die sich im Verzeichnis befinden muss
$bild = ImageCreateFromPNG ("captcha-clock.png");

// Farben definieren
$farbe_w = ImageColorAllocate ($bild, 255, 255, 255);
$farbe_b = ImageColorAllocate ($bild, 0, 0, 0);

// die verwendete Schrift-Datei arial.ttf muss vorhanden sein
// Aufbau:
// Schriftgröße, Winkel, X-Pos., Y-Pos, Farbe, Schrift, Inhalt
ImageTTFText ($bild, 32, -30, 140,  70, $farbe_b, "arial.ttf",
              $text[0]);
ImageTTFText ($bild, 32, -90, 180, 130, $farbe_b, "arial.ttf",
              $text[1]);
ImageTTFText ($bild, 32,   0, 130, 210, $farbe_b, "arial.ttf",
              $text[2]);
ImageTTFText ($bild, 32,  45,  80, 190, $farbe_b, "arial.ttf",
              $text[3]);
ImageTTFText ($bild, 32,  99,  80, 120, $farbe_b, "arial.ttf",
              $text[4]);

// Ausgabe im Format PNG
ImagePng     ($bild);

// Resourcen wieder freigeben
ImageDestroy ($bild);
?>

Wenn das Programm gestartet wird, sollte nun obiges Bild erscheinen - noch mit immer denselben Zeichen. Spielen Sie mit der Schriftgröße, Farbe und Position.

Zufall in CAPTCHA integrieren

Für Benutzerfreundlichkeit sollen im CAPTCHA nur eindeutige Zeichen vorkommen können - also keine Zeichen, die man gerne verwechselt wie O (Ohhh) und 0 (Null), kein I und i (I wie igitt) oder L und l (wie lustig) oder 1 (eins) und keine 6 und 9, da diese auf dem Kopf stehend zu Missverständnissen führen können. Um es ganz sauber zu machen, nur Großbuchstaben verwenden.

Tipp für die Vorgehensweise: Wie legen uns also ein $array in Kurzschreibweise an (siehe Array), lassen dieses einmal mischen (siehe Kapitel nützliche Array-Funktionen) und dann auf 5 Elemente kürzen (siehe php.net unter array_slice($input, 0, 5);.

Dieses Array kommt dann in eine SESSION, damit wir später die Benutzereingabe mit der wirklichen Kombination vergleichen können (siehe: Sessions).

Basteln Sie nun das CAPTCHA.

Möglicher Lösungweg zum Überprüfen des eigenen Weges.

Einlogg-Script mit CAPTCHA

Und um die Sache abzurunden, basteln Sie nun ein komplettes Formular mit SESSION-Speicherung der Zeichen-Kombination und nach dem Absenden des Formulars mit Kontrolle der vom Benutzer eingegebenen Zeichen.

Integrieren Sie das Captcha nun (siehe unter Einlogg-Script).