Captcha - wie im HTML integrieren?

Matt · 23. April 2014

Ich habe dieses Captcha Beispiel versucht
http://www.php-kurs.com/captcha-erstellen.htm

isoliert läuft es gut, aber wenn ich das dazugehörige HTML Formular bastle, erscheint immer nur das fertige Image. Es scheint, ich habe keine Kontrolle über die Länge und Breite, height and width values werden ignoriert, ich kann es folglich nicht in meine Applikation integrieren. Ich kodierte einfach dies:

<form enctype="multipart/form-data" method="post" action="Captcha.php" />
<h1>Load the image</h1>
<table width="660" border="1">
<tr><td><img src="captcha.php" alt="Captcha" height="128" width="128"> </td>
<td><input name="Verification" type="text" id="verification" size="5" maxlength="5"></td></tr>

</table>
<p><input type="submit" name="submit" value="Upload this File" /></p>
</form>

worauf immer das fertige Bild erscheint, der Table und das Input Feld erscheinen nie. Schade, mir gefällt der grüne Ball .

Wäre dankbar für Tipps.
Matt

The Scout · 23. April 2014

Hallo und willkommen im Forum!
Bitte, lies dir mal das hier durch, das hilft ungemein beim Helfen

Was genau ist dein Fehler? Es soll doch das fertige Bild erscheinen?! Das Bild mitsamt Zeichen drauf wird komplett im Server generiert und dann erst an den Nutzer gesendet. Probleme mit deinem PHP Skript hättest du, wenn KEINE Buchstaben auftauchen würden.
Width und height des Bildes werden beim PHP Code direkt aus dem Hintergrundbild übernommen, entweder du skalierst dieses direkt, mit GIMP oÄ, oder du guckst (zB bei http://www.php.net/) nach Funktionen, um in PHP geladene Bilder zu skalieren. Gibt es auch

Wenn es darum geht, dass das Validieren des Skripts nicht klappt, dann ist dein fehler dein action:

HTML

<form enctype="multipart/form-data" method="post" action="Captcha.php" />

Captcha.php sieht vermutlich ähnlich wie hier aus: Captcha Lösung. Wenn du dir das Skript aber mal ansiehst, dann merkst du, dass da keinerlei Eingabedaten verarbeitet werden!

Hier mal eine Idee, wie dein Einloggskript aussehen könnte:

HTML

<form action="validate.php" method="post"> <!-- kein < />, denn es kommt ein schliessender Tag -->
  <div>
    <img src="captcha.php" alt="Captcha" width="128" height="128" /> <!-- HIER brauchst du das < /> -->
  </div>
  <label>Gib die im Bild zu sehenden Zeichen ein:
    <input type="text" name="verification" size="5" maxlength="5" />
  </label><br />
  <input type="submit" name="submit" value="Captcha lösen" />
</form>

Natürlich ist auch wichtig, welche HTML Version du nutzt, bei HTML 5 ist das < /> sowieso nur optional.

Matt · 24. April 2014

vielen Dank für die rasche Antwort. Ich habe jetzt Deinen HTML Code übernommen, und auch den script ohne Aenderungen, aber das Problem bleibt das gleiche. Der Browser zeigt nur die grüne Kugel, mit den Buchstaben drinne, das ist ok, aber weder das Label noch das Eingabefeld oder der Submit-Button werden angezeigt oder ev. überlappt von dem Image. Somit ist es nicht möglich irgend etwas einzugeben das dann validiert werden könnte.

Werde mich mal schlauzumachen versuchen mit den skalieren. Auf die Schnelle ist mir leider nix gelungen bisher. Für weitere Tipps stets dankbar.
Matt

PHP

<?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, "vera.ttf",
              $text[0]);
ImageTTFText ($bild, 32, -90, 180, 130, $farbe_b, "vera.ttf",
              $text[1]);
ImageTTFText ($bild, 32,   0, 130, 210, $farbe_b, "vera.ttf",
              $text[2]);
ImageTTFText ($bild, 32,  45,  80, 190, $farbe_b, "vera.ttf",
              $text[3]);
ImageTTFText ($bild, 32,  99,  80, 120, $farbe_b, "vera.ttf",
              $text[4]);
 
// Ausgabe im Format PNG
imagepng($bild, null, 9);
 
// Resourcen wieder freigeben
ImageDestroy ($bild);




?>







<title>Test a Captcha</title>
<form action="validate.php" method="post"> <!-- kein < />, denn es kommt ein schliessender Tag -->
  <div>
    <img src="captcha.php" alt="Captcha" width="128" height="128" /> <!-- HIER brauchst du das < /> -->
  </div>
  <label>Gib die im Bild zu sehenden Zeichen ein:
    <input type="text" name="verification" size="5" maxlength="5" />
  </label><br />
  <input type="submit" name="submit" value="Captcha lösen" />
</form>

Alles anzeigen

wolf · 24. April 2014

HTML: 45

<img src="captcha.php"

Siehst du den Fehler?

das hier bekomme ich http://jsfiddle.net/wolfwortmann/SAyPU/

nacht

The Scout · 24. April 2014

wolf: Wo ist denn deiner Meinung nach da ein Fehler? Das Skript captcha.php liefert doch am Anfang den image/png Mimeheader, damit passt das auch

Matt: Probier erstmal, die Originalgroesse des Hintergrundbildes als width und height im HTML zu setzen. Wenn dann immer noch nichts angezeigt wird, dann wird es seltsam.

Und wenn es hilft, dann ist das Problem folgendes: Du gibst deinem HTML die angebliche Hoehe und Breite des Bildes (128) mit, darauf verlaesst sich HTML dann. Es hat also die Startecke des Bildes (da wo der Code sitzt) und geht von 128px nach unten und schreibt da dann das naechste Element hin (das Eingabefeld). Da das Bild aber in Echt groesser ist, liegt es ueber dem naechsten Element.
Ergo: Entweder Hintergrundbild in GIMP/Photoshop/whatever skalieren, oder im PHP Skript. Letzteres ist aufwaendiger, aber lohnender, da die Werte dynamisch sein koennen.

Wenn es NICHT hilft, dann habe ich ein Problem, weil erstmal keine Ahnung was falsch sein koennte

wolf · 24. April 2014

Achso zu müde
Wenn es nichts hilft, dann stell doch mal alles relevante (Dateien) in ein zip, irgendwo hin wo wir es diwnloaden können

Matt · 24. April 2014

es geht anscheinend nur dann wenn ich die editierte png-Datei als jpeg sichere und dann die jpeg Datei im HTML referenziere:

PHP

<?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, "vera.ttf",
              $text[0]);
ImageTTFText ($bild, 32, -90, 180, 130, $farbe_b, "vera.ttf",
              $text[1]);
ImageTTFText ($bild, 32,   0, 130, 210, $farbe_b, "vera.ttf",
              $text[2]);
ImageTTFText ($bild, 32,  45,  80, 190, $farbe_b, "vera.ttf",
              $text[3]);
ImageTTFText ($bild, 32,  99,  80, 120, $farbe_b, "vera.ttf",
              $text[4]);




// Bild ist fertig







// Ausgabe im Format JPEG
$dest_file = "captcha-clock-edited.jpg" ;
imagejpeg($bild, $dest_file);
 
// Resourcen wieder freigeben
ImageDestroy ($bild);




?>

Alles anzeigen

HTML

<title>Test a Captcha</title>
<form action="validate.php" method="post"> <!-- kein < />, denn es kommt ein schliessender Tag -->
  <div>
    <img src="captcha-clock-edited.jpg" alt="Captcha" width="128" height="128" /> <!-- HIER brauchst du das < /> -->
  </div>
  <label>Gib die im Bild zu sehenden Zeichen ein:
    <input type="text" name="verification" size="5" maxlength="5" />
  </label><br />
  <input type="submit" name="submit" value="Captcha lösen" />
</form>

jetzt muss ich noch die Eingaben validieren, aber ich denke mit SESSION variablen sollte das ohne Schweiss gehen.
Vielen Dank nochmals!

wolf · 24. April 2014

PHP

//setzen
$_SESSION['textarray'] = $text;
//ausgeben
echo "<pre>";
print_r($_SESSION['textarray']);
//löschen
unset($_SESSION['textarray']);

The Scout · 24. April 2014

Wenn du das als jpeg erstellst, dann musst du Die Zeile 10 folgendermaßen ändern:

PHP: 10

// Dem Browser mitteilen, dass ein JPEG Bild kommt
header("Content-type: image/jpg");

flo96 · 28. April 2014

ich hab das so gemacht:

PHP

<?php
	// Sicherheitsabfrage - Zufallszahlen generieren
	$Z0 = array(mt_rand(1, 9), mt_rand(1, 9));
	$Z1 = max($Z0); 
	$Z2 = min($Z0);
	$Spam = $Z1 . " + &#" . (48 + $Z2) . ";";
	$Schutz = md5($Z1 + $Z2);
?>
<?php 
	//Variablen deklarieren um gesendete Objekte einfacher zu packen
	$geschlecht = $_POST['geschlecht'];
	$alter = $_POST['altersgruppe'];
	$fund = $_POST['fund'];
	$gekegelt = $_POST['gekegelt'];
	$meinung = $_POST['meinung'];
	$gastwar = $_POST['gastwar'];
	$gastsein = $_POST['gastsein'];
	$nachricht = $_POST['nachricht'];
	$zip = $_POST["zip"];
	$zip2 = $_POST["zip2"];
	$fehler['sicherheit'] = (md5($_POST["zip"]) != ($_POST["zip2"]));
	$fehler = array("sicherheit"=>"",);
	$sicherheit = 'test';
?>
<?php
    error_reporting(E_ALL); /*testphase alle fehler/warnings ect ausgeben*/




    if(isset($_POST['senden'])){ /*wenn button "senden" gedrückt*/




        $fehler = array(); /*$fehler ist anfangs ein leeres array*/




        /*eingabefelder ect prüfen*/
        if(isset($_POST['geschlecht'])){
            $geschlecht = $_POST['geschlecht'];
        }else{
            $fehler[] = 'Sie haben kein Geschlecht gewählt!';
        }




        if(isset($_POST['altersgruppe']) and $_POST['altersgruppe'] != 'Bitte wählen'){
            $alter = $_POST['altersgruppe'];
        }else{
            $fehler[] = 'Bitte geben Sie Ihre Altersgruppe an!';
        }




         if(isset($_POST['fund']) and $_POST['fund'] != 'Bitte wählen'){
            $fund = $_POST['fund'];
        }else{
            $fehler[] = 'Bitte geben Sie an, wie Sie uns gefunden haben!';
        }




        if(isset($_POST['gekegelt'])){
            $gekegelt = $_POST['gekegelt'];
        }else{
            $fehler[] = 'Sie haben nicht gewählt, ob Sie schon einmal bei uns gekegelt haben!';
        }




        if(isset($_POST['meinung'])){
            $meinung = implode(', ',$_POST['meinung']);
        }else{
            $fehler[] = 'Bitte sagen Sie uns Ihre Meinung!';
        }




        if(isset($_POST['gastwar'])){
            $gastwar = $_POST['gastwar'];
        }else{
            $fehler[] = 'Bitte sagen Sie uns, ob Sie einmal Gastkegler gewesen sind!';
        }




        if(isset($_POST['gastsein'])){
            $gastsein = $_POST['gastsein'];
        }else{
            $fehler[] = 'Bitte sagen Sie uns, ob Sie einmal Gastkegler sein wollen!';
        }




		//Variablen für Mail deklarieren
		$empfaenger = "******";
		$betreff = "Eine neue Teilnahme an der Umfrage";
		$text = "
			 Geschlecht: ".$geschlecht."
			 Altersgruppe: ".$alter."
			 Gefunden über: ".$fund."
			 Schon mal gekegelt: ".$gekegelt."
			 Website: ".$meinung = (is_array($meinung))?implode(', ',$meinung):$meinung."
			 Gastkegler gewesen: ".$gastwar."
			 Gast sein: ".$gastsein."
			 Anregungen/Wünsche/Sonstiges: ".$nachricht."
			";

        /*rechenaufgabe checken
        $_POST['zip'] ist die benutzer eingabe -- seine lösung (eingabefeld name="zip")
        $_POST['zip2'] ist der md5 hash der richtigen lösung (hiddefield name="zip2")
            es muss nun also die benutzereingabe (des benutzers lösung)
            in einen md5 hash gewandelt werden um zu prüfen, ob beide hashes gleich sind.
        */
        if(md5($_POST['zip']) != $_POST['zip2']){
            $fehler[] = 'Die Rechenaufgabe ist leider falsch!';
        }







        /*fehler vorhanden?*/
        if(empty($fehler)){
            /*keine fehler aufgetaucht*/
            $mail = mail($empfaenger, $betreff, $text , 'From: noreply@dietotenkoepfe.de ' . "\n" . 'Content-Type:text/plain; charset="UTF-8"');
        }else{
            /*es gibt fehler -> fehler ausgeben*/
            foreach($fehler as $err){
                echo $err.'<br>';
            }
        }
    } /*if(isset($_POST['senden'])) -ENDE*/







    /*für erneute verwendung des rechenaufgabe neue zahlen ect generieren*/
    $Z0 = array(mt_rand(1, 9), mt_rand(1, 9)); /*ein array mit zufälligen zahlen von 1-9*/
    $Z1 = max($Z0); /*aus dem array den max wert holen (größte zahl)*/
    $Z2 = min($Z0); /*aus dem array den min wert holen (kleinstee zahl)*/
    $Spam = $Z1 . " + &#" . (48 + $Z2) . ";"; /*der string (die rechenaufgabe) erstellen*/
    $Schutz = md5($Z1 + $Z2); /*den md5 hash erstellen (hash wert der richtigen lösung)*/
?>




<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
<table class="mitgliedsantrag" cellspacing="5">
    <tr>
        <th colspan="4">Wir bitten Sie um Ihre Meinung</th>
    </tr>
    <tr>
        <td class="erklaerung" colspan="4">Bitte füllen Sie alle mit <span class="pflichtfeld1">*</span> gekennzeichneten Felder aus (Pflichtfelder)</td>
    </tr>
    <tr>
        <td><span class="pflichtfeld1">*</span> Welches Geschlecht haben Sie?</td>
        <td>&nbsp;</td>
        <td><input type="radio" name="geschlecht" value="männlich" />&nbsp;männlich</td>
        <td><input type="radio" name="geschlecht" value="weiblich" />&nbsp;weiblich</td>
    </tr>
    <tr>
        <td><span class="pflichtfeld1">*</span> Welcher Altersgruppe gehören Sie an?</td>
        <td>&nbsp;</td>
        <td colspan="2">
            <select name="altersgruppe">
                <option value="Bitte wählen">Bitte wählen</option>
                <option value="12-16">12-16</option>
                <option value="17-21">17-21</option>
                <option value="22-26">22-26</option>
                <option value="27-31">27-31</option>
                <option value="32-45">32-45</option>
                <option value="46-72">46-72</option>
            </select>
            <br>
        </td>
    </tr>
    <tr>
        <td><span class="pflichtfeld1">*</span> Wie haben Sie uns gefunden?</td>
        <td>&nbsp;</td>
        <td colspan="2">
            <select name="fund">
                <option value="Bitte wählen">Bitte wählen</option>
                <option value="Google">Google</option>
                <option value="Facebook">Facebook</option>
                <option value="Werbung">Werbung</option>
                <option value="Bekannte/Verwandte">Bekannte/Verwandte</option>
                <option value="Mitglieder">Mitglieder</option>
            </select>
            <br>
        </td>
    </tr>
    <tr>
        <td><span class="pflichtfeld1">*</span> Haben Sie schon einmal gekegelt?</td>
        <td>&nbsp;</td>
        <td><input type="radio" name="gekegelt" value="ja" />&nbsp;ja</td>
        <td><input type="radio" name="gekegelt" value="nein" />&nbsp;nein</td>
    </tr>
    <tr>
        <td><span class="pflichtfeld1">*</span> Wie finden Sie unsere Website?
            <br>
            &nbsp;&nbsp;<span class="hilfetext">(Mehrfachnennung mit STRG möglich)</span></td>
        <td>&nbsp;</td>
        <td colspan="2">
            <select name="meinung[]" multiple="multiple">
                <option value="interessant">Interessant</option>
                <option value="informativ">Informativ</option>
                <option value="zu wenig Info's">Zu wenig Informationen</option>
                <option value="mehr Bilder/Impressionen">Mehr Bilder/Impressionen</option>
                <option value="der HAMMER">Der HAMMER</option>
                <option value="verbesserungswürdig">Verbesserungswürdig</option>
            </select>
            <br>
		</td>
    </tr>
    <tr>
        <td><span class="pflichtfeld1">*</span> Waren Sie schon einmal bei uns Gastkegler?</td>
        <td>&nbsp;</td>
        <td><input type="radio" name="gastwar" value="ja" />&nbsp;ja</td>
        <td><input type="radio" name="gastwar" value="nein" />&nbsp;nein</td>
    </tr>
    <tr>
        <td><span class="pflichtfeld1">*</span> Könnten Sie sich vorstellen, bei uns Gastkegler zu sein?</td>
        <td>&nbsp;</td>
        <td colspan="2">
            <select name="gastsein">
                <option value="Bitte wählen">Bitte wählen</option>
                <option value="ja">ja</option>
                <option value="nein">nein</option>
                <option value="vielleicht">vielleicht</option>
                <option value="war schon">war schon</option>
            </select>
            <br>
		</td>
    </tr>
    <tr>
        <td>&nbsp;&nbsp;Anregungen/Wünsche/Sonstiges<br>
            &nbsp;&nbsp;<span class="hilfetext">(Optional)</span>
        </td>
        <td><!--<span class="nachrichtlength">min. 10 Zeichen</span>--></td>
        <td colspan="2"><textarea rows="5" name="nachricht" class="nachricht"></textarea></td>
    </tr>
    <tr>
        <td><span class="pflichtfeld1">*</span> Spam-Schutz</td>
        <td colspan="3">
            <?php echo $Spam;?>
            <input type="number" name="zip" size="4" autocomplete="off">
            <input type="hidden" name="zip2" value="<?php echo $Schutz;?>">
			<br>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="right"><input type="submit" id="login" name="senden" value="Senden" /></td>
        <td colspan="2" class="left"><input type="reset" id="zuruecksetzen" value="Zurücksetzen" /></td>
    </tr>
</table>
</form>
</p>
<br>
<br>
<?php 
	if(isset($_POST['senden']) AND $mail)
	{
		echo 'E-Mail erfolgreich versandt';
	}
	elseif(isset($_POST['senden']))
	{
		echo 'Es ist ein Fehler aufgetreten';
	}
?>

Alles anzeigen

wolf · 28. April 2014

Und du glaubst, bots könnten nicht rechnen?!
Sorry aber das ist kein Schutz gegen spam Accounts.
Es hilft allerhöchstens gegen nervige 6. klässler, die nach dem 3. Mail keine Lust mehr haben.
Und wofür haust du den wert durch md5? :0

cottton · 28. April 2014

Zwecks bots:
ich vermute, dass bots generell keine selbstgeschriebenen Logins angehen. Dabei kommt es wohl auf die Form und die url an.
Ich bin seit Jahren mit unserer Seite im Netz und habe nicht einen bot erlebt (nutze kein captcha o.ä.).
Ein bot muss ja geschrieben werden (logisch). Und die werden sicherlich relativ dynamisch auf die bekanntesten Loginsysteme (wie zB hier das Burning Board) geschrieben.

wolf · 28. April 2014

Worfür dann überhaupt ein capatcha?

Naja, nach de ich hier mal nen Link zu meiner Seite gepostet habe, hat sich jemand von euch den Spaß gemacht mir 40 mal zu schreiben
Evtl um mich darauf aufmerksam zu machen, ich weiß es nicht

cottton · 28. April 2014

Dann sicher via F5, schätze ich =)
Muss man halt unterbinden.

Captcha - wie im HTML integrieren?

Jetzt mitmachen!

Teilen