Tags:    php

Hvad er en Captcha?

Captcha[url=http://www.captcha.net][1][/url] (Completely Automated Public Turing test to tell Computers and Humans Apart). Som forkortelsen antyder er det en test der bruges til at finde ud af om en bruger er et menneske, eller en computer. Dette kan bestå af f.eks. et billede med noget tekst der kan være roteret, farvet og fyldt med streger og mønstrer. På den måde gør man det svært for computere at se hvad der egentlig står.


Eksempel på captcha fra et andet script jeg har lavet.

Hvad bruges det til?

En Captcha bruges normalt når man skal oprette en bruger på et forum, skrive en kommentar på en blog for at forhindre den pågældende blog eller forum i at blive spammet af robotter med "gode tilbud".

Før vi går i gang

I denne artikel bruger jeg gdLib til at tegne med og artiklen er nok en del nemmere at forstå hvis du har en smule erfaring med det. Men jeg forsøger at kommentere på bedste vis, så alle kan være med.

Lad os komme i gang med noget kode!

Det første vi gør er at lave nogle indstillinger for vores captcha, kommenteret på bedste vis . Session_start() skal vi bruge senere for at gemme ordet.

<?php
session_start();

/* Indstillinger */
$config['font'] = 'verdana.ttf'; //skriftypen vi kommer til at skrive med
$config['fontsize'] = 12;
$config['wordlength'] = 5; //antal bogstaver i vores captcha
$config['characters'] = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; //de tegn der må bruges i vores tilfældige ord.

Den overstående kode skulle være til at forstår så vi går straks videre med at generere et tilfældigt ord.

$len = strlen($config['characters']);

for ($i = 0; $i < $config['wordlength']; $i++)
{
    $captcha .= substr($config['characters'], mt_rand(0, $len - 1), 1); //her genererer vi det ord der senere skal vises på billedet
}

Det der sker er, at der kopieres et par tilfældige bogstaver ud af vores $config['characters'] som jo bestemmer hvilke tegn der må bruges. Antallet af tegn i ordet bestemmes af $config['wordlength'].

Efter vi har genereret vores tilfældige ord vil vi gerne gemme det så vi senere kan tjekke om brugeren indtastede det korrekte. Vi gemmer det i en session sådan så vi kan hente det fra en hver anden php-fil. For at højne sikkerheden gemmer vi det som en MD5-hash.

$_SESSION['key'] = md5($captcha);

Design af billedet

Nu da vi har fået genereret et tilfældigt ord og gemt det til senere brug, er det tid til at lave det billede som brugeren skal kunne læse ordet fra. Her har man sådan set frie hænder til at lave hvad man vil. Man skal bare huske på en ting, jo mere avanceret billedet er, desto sværere bliver det for brugeren at aflæse det. En captcha der er for svær at tyde kan føre til irritation af brugeren og derved også få brugeren til ikke at gide besøge siden igen.
Med det i tankerne går vi i gang med designet.
Jeg vil lave et relativt simpelt billede med tilfældige streget som baggrund og roteret tekst til at vise ordet med.

Vi starter med at oprette vores "lærred" og give dette en hvid baggrundsfarve.

$im = imagecreate($config['width'], $config['height']);
$bg = imagecolorallocate($im,255,255,255);

Herefter tegner jeg 10 forskelligfarvede streger og tilfældige længder. Her benytter jeg funktionen imageline som har 6 parametre.

1. Billedet der skal tegnes på.
2. Startpunkt i x-aksen.
3. Startpunkt i y-aksen.
4. Slutpunkt i x-aksen.
5. Slutpunkt i y-aksen.
6. Farven på stregen.

for ($i = 0; $i <= 10; $i++)
{
    imageline($im,mt_rand(0,$config['width']),mt_rand(0,$config['height']),mt_rand(0,$config['width']),mt_rand(0,$config['height']),imagecolorallocate($im,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255)));
}

Til slut placerer vi vores ord på billedet ved hjælp af funktionen imagettftext. Funktionen vil have 8 parametre som er:

1. Billedet vi vil tegne på.
2. Størrelsen på teksten.
3. Vinklen på teksten.
4. Startpunkt på x-aksen.
5. Startpunkt på y-aksen.
6. Farven på teksten.
7. Skrifttypen der skal bruges.
8. Den egentligt tekst.

Da jeg gerne vil have at bogstaverne har forskellige farver bliver jeg nødt til at skrive et bogstav af gangen.

for ($i = 1; $i < $config['wordlength'] + 1; $i++)
{
    imagettftext($im,$config['fontsize'],mt_rand(-40,40),$i * 18,mt_rand(20,40),imagecolorallocate($im,mt_rand(0,200),mt_rand(0,200),mt_rand(0,200)),$config['font'],$captcha[$i-1]);
}

I koden ganger jeg $i med 18. Dette er for at lave mellemrum mellem bogstaverne. Dette kan ændres alt efter behag.
Derudover tager jeg et tilfældigt tal mellem -40 og 40 som er den vinkel det enkelte bogstav skal have. Dette kan selvfølgelig også ændres efter behag.

Til slut fortæller vi browseren at vi giver den et png-billede. Hvis vi ikke gjorde det, ville browseren tro det var tekst og derfor vise en masse mystiske tegn istedet for billedet.

header("Content-type: image/png"); //fortæller browseren at dette er et png-billede
imagepng($im); //hvorefter vi giver browseren billedet

imagedestroy($im); //fjerner billedet fra serverens hukommelse

Nu skulle den samlede kode gerne ligne noget i den her retning.

captcha.php

<?php
session_start();

/* Indstillinger */
$config['width'] = 150;
$config['height'] = 50;
$config['font'] = 'verdana.ttf';
$config['fontsize'] = 16;
$config['wordlength'] = 5;
$config['characters'] = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; //de tegn der må bruges i vores tilfældige ord.


$len = strlen($config['characters']);

for ($i = 0; $i < $config['wordlength']; $i++)
{
    $captcha .= substr($config['characters'], mt_rand(0, $len - 1), 1); //her genererer vi det ord der senere skal vises på billedet
}

$_SESSION['key'] = md5($captcha);

$im = imagecreate($config['width'], $config['height']);
$bg = imagecolorallocate($im,255,255,255);

for ($i = 0; $i <= 10; $i++) //vi tegner 10 streger i forskellige farver
{
    imageline($im,mt_rand(0,$config['width']),mt_rand(0,$config['height']),mt_rand(0,$config['width']),mt_rand(0,$config['height']),imagecolorallocate($im,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255)));
}

for ($i = 1; $i < $config['wordlength'] + 1; $i++) //vi bogstaverne i ordet i forskellige farver og roterer dem.
{
    imagettftext($im,$config['fontsize'],mt_rand(-40,40),$i * 18,mt_rand(20,40),imagecolorallocate($im,mt_rand(0,200),mt_rand(0,200),mt_rand(0,200)),$config['font'],$captcha[$i-1]);
}

header("Content-type: image/png"); //fortæller browseren at dette er et png-billede
imagepng($im); //hvorefter vi giver browseren billedet

imagedestroy($im); //fjerne billedet fra serverens hukommelse

?>

Du kan nu teste det på din hjemmeside og konstatere at det virker (forhåbenligt ).


Eksempel på vores færdige captcha

Hvordan bruger man det så?

Nu når vi er nået så langt som at have lavet billedet vil vi også gerne vide hvordan det bruges i praksis.
Til dette formål laver jeg et simpelt eksempel som viser en tekst hvis man skriver det rigtige ord.

captcha_sample.php

<?php

session_start();

if (isset($_POST['submit'])) //vi tjekker om der er trykket på submit-knappen
{
    if (md5($_POST['captcha']) == $_SESSION['key']) //vi tager det brugeren indtaster, hasher det og sammenligner med det der stod
    {
        //koden er rigtig og vi sender mailen
        echo "Du tastede den rigtige kode. Tillykke!";
    }
    else
    {
        //koden var ikke rigtig
        echo "Du indtastede ikke det der stod i billedet!";
    }
}
?>

<form method="POST">
    <img src="captcha.php" />
    <br />
    Indtast overstående sikkerhedskode her:
    <br />
    <input type="text" name="captcha" />
    <br />
    <input type="submit" name="submit" value="OK" />
</form>

Afrunding, hvad kan gøre bedre?

Som du sikkert har lagt mærke til skelner vi mellem store og små bogstaver. Dette kan vi rette på 2 måder. Enten ved at fjerne alle store bogstaver fra vore konfiguration eller ved at konvertere ordet til små bogstaver inden vi gemmer det. På den måde vil billedet stadig vise store og små bogstaver og derfor vil vi ikke slække på sikkerheden.
Dette kan gøres ved at rette en enkelt linje i vores captcha-script.

$_SESSION['key'] = md5($captcha);
//rettes til
$_SESSION['key'] = md5(strtolower($captcha));

For en sikkerheds skyld konverterer vi også brugerens input til små bogstaver i vores test-fil, skulle brugeren have gjort sig umage og skelnet mellem store og små bogstaver .

if (md5($_POST['captcha']) == $_SESSION['key'])
//rettes til
if (md5(strtolower($_POST['captcha'])) == $_SESSION['key'])

Nu da vi er helt færdige er det bare at gå i gang med at lege med scriptet og finde måder at gøre det bedre på. Se evt. http://www.php.net/gd for at få en liste over de funktioner gdLib har. Der skulle være masser at gå i gang med.

Jeg håber artiklen her kan hjælpe dig med at holde din side fri for spam samt at have givet dig en idé om hvad gdLib kan bruges til.

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X