Captcha Code

Spamschutz für mein Skript mailscript.php


Tutorial Captcha mit Zahlen

Ich habe mit Hilfe der KI ChatGPT einen kleinen Spamschutz für mein Skript mailscript.php in Form eines Captcha-Codes als PHP-Grafik erstellt und diesen in mein Formular integriert.

Captcha:

Captcha-Bild

Neues Captcha laden 

Bitte speichert das folgende PHP-Skript zur Erstellung der Captcha-Grafik als Datei captcha_image.php und kopiert es in das Stammverzeichnis eures Projekts. Das Stammverzeichnis ist das oberste Verzeichnis eures Projekts, also der Ort, an dem sich auch die Seite mit dem Formular befindet.

Ich habe noch ein komplexes Captcha entwickelt, das ich weiter unten beschreibe. Dieses Captcha enthält eine Mischung aus Zahlen sowie Groß- und Kleinbuchstaben. Nur der Code für die Captcha-Grafik unterscheidet sich, ansonsten ist der Einbau fast gleich.

Den PHP-Code zur Erstellung der Captcha-Grafik könnt ihr selbstverständlich nach euren Wünschen anpassen, zum Beispiel in Bezug auf die Größe oder die Farben.

Achte darauf, einen Editor zu verwenden, der die Kodierung auf "UTF-8" beibehält, wie zum Beispiel den Windows-Editor oder Notepad++


<?php
  // Tommy October 7, 2024
  // Save this code as a file named captcha_image.php

  session_start();

  // Zufallszahlen für die Rechenaufgabe
  $num1 = rand(1, 10);
  $num2 = rand(1, 10);
  $captchaResult = $num1 + $num2;

  // Das richtige Ergebnis in einer Session-Variable speichern
  $_SESSION['captcha_result'] = $captchaResult;

  // Erstelle ein Bild
  $img = imagecreatetruecolor(120, 40);

  // Farben definieren
  $bg_color = imagecolorallocate($img, 255, 255, 255); // Weißer Hintergrund
  $text_color = imagecolorallocate($img, 0, 0, 0); // Schwarzer Text
  $line_color = imagecolorallocate($img, 64, 64, 64); // Graue Linien

  // Fülle den Hintergrund
  imagefilledrectangle($img, 0, 0, 120, 40, $bg_color);

  // Optional: Verwirrende Linien einfügen
  for($i = 0; $i < 5; $i++) {
    imageline($img, rand(0, 120), rand(0, 40), rand(0, 120), rand(0, 40), $line_color);
  }

  // Text für die Rechenaufgabe (Captcha)
  $captcha_text = "$num1 + $num2 = ?";
  imagestring($img, 5, 20, 10, $captcha_text, $text_color);

  // Header für die Bildausgabe
  header("Content-type: image/png");
  imagepng($img);
  imagedestroy($img);
?>


Bitte füge den folgenden zusätzlichen PHP-Code direkt unter den Kommentaren in die bereits heruntergeladene Datei mailscript.php ein, wie im Screenshot unten dargestellt. Die meisten Zeilen sind auskommentiert, aber ich lasse sie so, damit ihr sie ebenfalls testen könnt. Am Ende wird lediglich die Umleitung zur Fehlerseite bei einem falschen Captcha-Code benötigt.

Bitte passt den Namen der Fehlerseite an, auf die bei einem falschen Captcha-Code umgeleitet werden soll. In meinem Fall habe ich diese Fehlerseite so genannt: Kontakt-Captcha.php.


// Optionaler Captcha Spamschutz von Tommy vom 07.10.2024
session_start(); // Startet oder übernimmt die Session

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $captchaUserInput = $_POST['captcha'];
  $captchaCorrectResult = $_SESSION['captcha_result'];

  // Optional: Speichere die Benutzereingabe zur Ausgabe auf anderer Seite
  $_SESSION['captcha_user_input'] = $captchaUserInput;

  // Debugging: Ausgabe der Werte zur Überprüfung
  // echo "Eingabe: " . $captchaUserInput . "<br>";
  // echo "Erwartetes Ergebnis: " . $captchaCorrectResult . "<br>";

  // Überprüfe das Captcha
  if (intval($captchaUserInput) === intval($captchaCorrectResult)) {
    // Debugging: Werte vergleichen - richtig
    // Captcha korrekt - Hier weiter mit dem Senden der Mail
    // echo "Nachricht wurde erfolgreich verschickt!";
    
  } else {
    
    // Debugging: Werte vergleichen - falsch
    // Captcha falsch - Fehlermeldung anzeigen und Link zurück zur Seite
    // echo "Das Captcha wurde falsch beantwortet. Bitte versuche es erneut.<br>";
    // echo '<a href="Mail-Senden.php">Zurück zum Formular</a>';
    
    // Umleitung auf erstellte Fehlerseite und Abbruch vom Script
    header("Location: " . "Kontakt-Captcha.php");
    exit;
  }
}


Nun muss noch das Formular im "Code Editor" um die Captcha-Eingabe erweitert werden. Dabei muss der Verweis zur Datei captcha_image.php als absolute URL eingetragen werden, da Mobirise einen relativen Verweis falsch generieren würde. Ersetzt also meinen Domain-Namen mit eurem Domain-Namen als Verweis zur Datei. Ich habe diesen "Captcha-Bereich" in meinem Formular zwischen dem letzten Feld "Nachricht" und dem Senden-Button platziert, wie ihr unten im Screenshot sehen könnt.


<!-- Captcha-Bereich -->
<div class="col-md-3 mbr-form">
  <label mbr-text mbr-theme-style="display-7" for="captcha" class="form-control-label mbr-fonts-style">Captcha:</label>
  <img id="captchaImage" style="max-width: 100px;" src="https://www.mobirise-tutorials.com/captcha_image.php" alt="Captcha-Bild">
  <br>
  <input type="text" name="captcha" required="required" class="form-control" placeholder="Ergebnis eingeben" autocomplete="off" maxlength="2">
</div>

<div style="padding-top: 25px; padding-bottom: 25px;" class="col-md-12">
  <a href="javascript: void();" onclick="reloadCaptcha(); return false;" class="text-primary">Neues Captcha laden</a>
</div>


Fügt das JavaScript mit der AJAX-Funktion zum Neuladen des Captchas in den Bereich "End of <body> code" der Seiteneinstellungen ein. Achtet dabei auf die id="captchaImage" von der Captcha-Grafik aus dem Formularcode oben und auch wieder auf die Angabe der gleichen absoluten URL. Das Script hängt an die URL einen Zeitstempel, damit der Browser das Bild nicht aus dem Cache laden kann:

<!-- JavaScript für das Neuladen des Captchas -->
<script>
  function reloadCaptcha() {
    // Erzeugt eine zufällige Zahl, um das Bild zu aktualisieren und den Cache zu umgehen
    var timestamp = new Date().getTime();
    document.getElementById('captchaImage').src = 'https://www.mobirise-tutorials.com/captcha_image.php?' + timestamp;
  }
</script>

mailscript

Captcha-Code zur Prüfung der Eingabe in Datei mailscript.php

Code Editor

Einbau vom Captcha Formular Code im Code Editor

Tutorial Captcha Variante mit Zahlen & Buchstaben

Hier habe ich als Alternative eine komplexe Captcha-Grafik erstellt, die Zahlen sowie Klein- und Großbuchstaben enthält. Diese Variante habe ich auf dieser Testseite eingebaut.

Captcha:

Captcha-Bild

Neues Captcha laden 

Bitte baut alles genau so ein, wie oben beschrieben. Lest auch alle meine detaillierteren Beschreibungen, die weiter oben stehen. Nur der Code für die komplexe Captcha-Grafik ändert sich, den ihr wieder als Datei captcha_image.php speichert. Kopiert diese Datei in das Stammverzeichnis eures Projekts, eben genauso wie bereits oben beschrieben.

Da hier auch Buchstaben verwendet werden, muss diesem Skript eine Schriftart zugewiesen werden. Diese .ttf Datei kopiert ihr ebenfalls in das Stammverzeichnis des Projektes oder ihr müsst den Pfad anpassen. Ich habe hier den Font Jost-Regular.ttf verwendet, den ihr im Internet, zum Beispiel von Google Fonts downloaden könnt. Natürlich könnt ihr auch jeden anderen TrueType Font wählen. Hier könnt ihr auch meine Schrift downloaden als:

Jost-Regular.ttf 


<?php
  // Tommy October 7, 2024
  // Save this code as a file named captcha_image.php

  session_start();
  
  // Funktion zum Erzeugen einer zufälligen Zeichenfolge (Zahlen, Klein- und Großbuchstaben)
  function generateCaptchaString($length = 6) {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i < $length; $i++) {
      $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString;
  }
  
  // Generiere eine zufällige Zeichenfolge
  $captchaString = generateCaptchaString(6);
  
  // Speichere die Zeichenfolge in einer Session-Variable
  $_SESSION['captcha_result'] = $captchaString;
  
  // Erstelle ein Bild
  $img = imagecreatetruecolor(150, 50);
  
  // Farben definieren
  $bg_color = imagecolorallocate($img, 255, 255, 255); // Weißer Hintergrund
  $text_color = imagecolorallocate($img, 0, 0, 0); // Schwarzer Text
  $line_color = imagecolorallocate($img, 64, 64, 64); // Graue Linien
  
  // Fülle den Hintergrund
  imagefilledrectangle($img, 0, 0, 150, 50, $bg_color);
  
  // Optional: Verwirrende Linien einfügen, um Bots zu erschweren
  for ($i = 0; $i < 5; $i++) {
    imageline($img, rand(0, 150), rand(0, 50), rand(0, 150), rand(0, 50), $line_color);
  }
  
  // Zeichne die zufällige Zeichenfolge auf das Bild
  imagettftext($img, 20, 0, 30, 35, $text_color, __DIR__ . '/Jost-Regular.ttf', $captchaString);
  
  // Header für die Bildausgabe
  header("Content-type: image/png");
  imagepng($img);
  imagedestroy($img);
?>


Bitte füge den folgenden zusätzlichen PHP-Code direkt unter den Kommentaren in die bereits heruntergeladene Datei mailscript.php ein, wie bereits oben beschrieben. 

Hier erfolgt lediglich eine Anpassung der Überprüfung vom gesamten String, der in Kleinbuchstaben umgewandelt wird. Daher spielt es keine Rolle, ob die Buchstaben in Groß- oder Kleinschreibung vorliegen. Ansonsten bleibt alles gleich.


// Optionaler Captcha Spamschutz von Tommy vom 07.10.2024
session_start(); // Startet oder übernimmt die Session

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $captchaUserInput = $_POST['captcha'];
  $captchaCorrectResult = $_SESSION['captcha_result'];

  // Optional: Speichere die Benutzereingabe zur Ausgabe auf anderer Seite
  $_SESSION['captcha_user_input'] = $captchaUserInput;

  // Debugging: Ausgabe der Werte zur Überprüfung
  // echo "Eingabe: " . $captchaUserInput . "<br>";
  // echo "Erwartetes Ergebnis: " . $captchaCorrectResult . "<br>";

  // Überprüfe das Captcha (Groß- und Kleinschreibung ignorieren)
  if (strtolower($captchaUserInput) === strtolower($captchaCorrectResult))
{
    // Debugging: Werte vergleichen - richtig
    // Captcha korrekt - Hier weiter mit dem Senden der Mail
    // echo "Nachricht wurde erfolgreich verschickt!";
    
  } else {
    
    // Debugging: Werte vergleichen - falsch
    // Captcha falsch - Fehlermeldung anzeigen und Link zurück zur Seite
    // echo "Das Captcha wurde falsch beantwortet. Bitte versuche es erneut.<br>";
    // echo '<a href="Mail-Senden.php">Zurück zum Formular</a>';
    
    // Umleitung auf erstellte Fehlerseite und Abbruch vom Script
    header("Location: " . "Kontakt-Captcha.php");
    exit;
  }
}


Nun muss noch das Formular im "Code Editor" um die Captcha-Eingabe erweitert werden. Auch hier bleibt alles gleich wie bereits oben beschrieben. Das Captcha habe ich hier auf eine Breite von 150px etwas größer dargestellt, damit es besser zu erkennen ist. Weiterhin habe ich das Eingabefeld hier auf 6 Zeichen verlängert.


<!-- Captcha-Bereich -->
<div class="col-md-3 mbr-form">
  <label mbr-text mbr-theme-style="display-7" for="captcha" class="form-control-label mbr-fonts-style">Captcha:</label>
  <img id="captchaImage" style="max-width: 150px;" src="https://www.mobirise-tutorials.com/captcha_image.php" alt="Captcha-Bild">
  <br>
  <input type="text" name="captcha" required="required" class="form-control" placeholder="Ergebnis eingeben" autocomplete="off" maxlength="6">
</div>

<div style="padding-top: 25px; padding-bottom: 25px;" class="col-md-12">
  <a href="javascript: void();" onclick="reloadCaptcha(); return false;" class="text-primary">Neues Captcha laden</a>
</div>

Impressum | Datenschutz | Spenden

Copyright © Mobirise-Tutorials.com Thomas Frei-Herrmann
Private Homepage