Actief Topic: [PHP] Captcha

Je kent het vast wel: je wilt bv. een nieuwe mail aanmaken en dan moet je zo'n code overtypen van een plaatje. Dat is captcha en dat kun je zelf ook maken. Ik ga hier een poging doen om uit te leggen hoe. Enige voorkennis van html en php is wel vereist. Een voorbeeld is te vinden op: http://moehahahaha.netau.net/voorbeeld/captcha/. Om de brondcode te zien, moet je "?bron" achter de URL zetten. [index] [title]Het plaatje[/title] Om het plaatje met de random code te maken, maken we het bestand 'captcha.php' met daarin: - er wordt een random, 4 tekens lange code gegenereerd. - deze code wordt (gecodeerd) in een sessie-variabele gezet EN omgezet in een plaatje - tenslotte wordt het plaatje naar de browser verzonden en een stukje code die ervoor zorgt dat het plaatje niet in de cache terecht komt. [u]captcha.php[/u][code=php]<?php session_start(); // het random nr. aanmaken en gecodeerd opslaan in php sessie $CharList="234578qwertyuipasdfhjklzxcvnm"; for ($cnt=1;$cnt<=4;$cnt++) { $randomnr .= $CharList[mt_rand(0,strlen($CharList)-1)]; } $_SESSION['captcha'] = md5($randomnr); // captcha plaatje met nummer maken - afmetingen kun je aanpassen gebruikte font $im = imagecreatetruecolor(100, 35); // Kleurenbepaling $white = imagecolorallocate($im, 255, 255, 255); $grey = imagecolorallocate($im, 128, 128, 128); $black = imagecolorallocate($im, 0, 0, 0); // zwarte rechthoek tekenen - afmetingen kun je aanpassen aan verschillende fonts imagefilledrectangle($im, 0, 0, 200, 35, $black); // een ttf-bestand toevoegen $font = 'ITCBLKAD.TTF'; // schaduw toevoegen imagettftext($im, 35, 0, 22, 24, $grey, $font, $randomnr); // randomnr. toevoegen imagettftext($im, 35, 0, 15, 26, $white, $font, $randomnr); // voorkomen dat afbeelding ge-cached wordt header("Expires: Wed, 1 Jan 1997 00:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); // plaatje verzenden naar browser header ("Content-type: image/gif"); imagegif($im); imagedestroy($im); ?>[/code] Zoals je misschien al gezien hebt, wordt in deze code gebruik gemaakt van het bestand [u]ITCBLKAD.TTF[/u]. Zorg ervoor dat dit bestand in dezelfde map staat als [u]captcha.php[/u]. Download: http://moehahahaha.netau.net/voorbeeld/captcha/ITCBLKAD.TTF [title]Het formulier[/title] Stel dat je de captcha wilt gebruiken bij een inlog-formulier, dan zou die er als volgt uit zien: [code=html]<form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>"> <input type="hidden" name="actie" value="inloggen" /> Gebruikersnaam: <input type="text" name="gebruikersnaam" /><br /> Wachtwoord: <input type="password" name="wachtwoord" /><br /> Typ hier code over die op het plaatje staat.<br /> Er zijn alleen kleine letters en cijfers.<br /> <img name="captcha" src="captcha.php" alt="captcha-plaatje" /><br /> <input type="text" name="captcha_code" /><br /> <input type="submit" value="inloggen" /> </form>[/code] captcha.php is dus gewoon een plaatje. Je moet dit dus niet includen ofso, gewoon als src opgeven van de img-tag. En voor de mensen die het niet weten: De action in regel 1 houd in dat de huidige pagina als action wordt genomen. Je kunt hier natuurlijk ook een andere pagina voor kiezen. Het kan natuurlijk voorkomen dat je net dat ene plaatje krijgt waar je ff niet weet wat er nou staat. Dan is het best handig om het plaatje te vernieuwen. Dat kan met deze javascript-functie: [code=javascript]function change_captcha() { var captcha = document.images.captcha var src = captcha.src.split('?'); captcha.src = src[0] + '?' + Math.random(); }[/code] Zet deze code in de head van je pagina. Voor de beginnelingen onder ons: plak deze code in de head: [code=html] <script type="text/javascript"> //vervang dit door de code die ik zojuist heb gegeven. </script> [/code] Let er wel op dat de img-tag met het captcha-plaatje ook de naam 'captcha' heeft! Deze javascript-functie kan op 2 manieren worden aangeroepen. Met een knop, of met een link. [u]Een knop[/u] [code=html]<input type="button" onclick="change_captcha()" value="Ander plaatje" />[/code] [u]Een link[/u] [code=html]<a href="javascript:void(0);" onclick="change_captcha()">Ander plaatje</a>[/code] [title]De controle[/title] Er moet natuurlijk wel worden gecontroleerd of de code goed is ingetypt. Om dat te controleren moet je controleren of de ingevoerde waarde overeenkomt met de sessie-variabele die we hebben aangemaakt. Maar aangezien we hem met md5-codering hebben opgeslagen, moeten we ingevoerde waarde ook eerst coderen: [code=php]if (md5($_POST['captcha_code']) == $_SESSION['captcha']) { //code als captcha goed is overgetypt } else { //code als captcha niet goed is overgetypt }[/code] [b]Vergeet niet bovenaan de pagina waar deze code staat 'session_start()' te zetten, anders werkt het niet. En met bovenaan de pagina bedoel ik ook echt helemaal bovenaan, dus de eerste regel van de pagina, nog voor het doc-type enzo.[/b] Als er alleen iets moet gebeuren als de code niet goed is overgetypt, een fout genereren bijvoorbeeld, dan krijg je deze code: [code=php]if (md5($_POST['captcha_code']) != $_SESSION['captcha']) { //fout genereren }[/code] [title]Tot slot[/title] [b]Dit was het begin van de tutorial. Er komen nog updates, dus houd deze pagina in de gaten.[/b] [u]Updates[/u] - De 'ik kan het plaatje niet lezen, verander het plaatje'-knop op 14-11-2009 om 21:20 - De bovengenoemde knop verbeteren om 11-08-2010 om 11:54 [u]geplande updates:[/u] - captcha-beveiliging inbouwen in het [url=http://sckripts.nl/forum/T49/Tutorials/php-Mailform/]mailformulier van vlerknozem[/url]