Een captcha (een afkorting van "completely automated public
Turingtest to tell computers and humans apart")
is een reactietest die in de gegevensverwerking wordt gebruikt om te bepalen of er al dan niet sprake is van een
menselijke gebruiker. Het wordt gebruikt om geautomatiseerde handelingen te beveiligen tegen bots die diverse online
diensten gebruiken. In deze totorial leg ik uit hoe je een visuele captcha kunt maken. Hierbij gebruiken wij het GD
Library, waarvan al tutorials online zijn. Ik raad je aan om de GD Library tutorials van Tibbah eerst leest en onder
de knie hebt. GD Library Deel 1,
GD Library Deel 2.
Helaas kan je tegenwoordig ook met captchas er nooit zeker meer van zijn of hij wel goed werkt tegen bots,
vanwege projecten die captchas alsnog kunnen uitlezen zoals Pwntcha.
Vandaar dat men ze zo moeilijk mogelijk maakt, maar helaas zijn deze ook niet altijd evengoed te lezen door de
menselijke bezoekers.
In deze tutorial gaan we een captcha maken die meerdere fonts gebruikt, die per karakter zijn
eigen font, x-as locatie, y-as locatie, kleur en draaihoek heeft. In deze tutorial maken we een image
gebaseerd op een code van 4 óf 5 karakters lang. Aan het eind van deze tutorial leg ik ook nog even uit hoe je deze
captcha zou kunnen gaan toepassen, om er voor te zorgen dat de captcha natuurlijk ook werkt. Mocht je nog geen goeie
fonts hebben, kijk dan even op DaFont. Gebruik alleen TrueType Fonts!
(extentie: .ttf/.TTF)
$code = 'D5KP9'; // even een testcode aanmaken, zie paragraaf 5 voor een voorbeeld keygen.
$image = imagecreatetruecolor (300, 60); // maakt de image met de groote van 300px breed, en 60px hoog
$aFonts = array ('font1.ttf', 'font2.ttf', 'font3.ttf', 'font4.ttf'); // zet alle beschikbare fonts in een array
$aCode = str_split ($code); // zet alle karakters apart in een array
for ($i = 0; $i < count ($aCode); $i++) // een for-lus maken voor het aantal karakters dat de $aCode array bevat
{
$fontcolor = imagecolorallocate ($image, // kleurencombinatie maken voor de image variabel ($image)
rand (190, 255), // rood,
rand (190, 255), // groen,
rand (190, 255)); // blauw, deze geven de nieuwe kleur per karakter
if (count ($aCode) == 4) // de volgende locaties (x-as) aanmaken voor een code van 4 karakters lang
{
$pos[0] = rand (15, 55); // locatie aanmaken (x-as) voor de eerste karakter
$pos[1] = rand (80, 120); // locatie aanmaken (x-as) voor de tweede karakter
$pos[2] = rand (145, 185); // locatie aanmaken (x-as) voor de derde karakter
$pos[3] = rand (210, 250); // locatie aanmaken (x-as) voor de vierde karakter
}
if (count ($aCode) == 5) // de volgende locaties (x-as) aanmaken voor een code van 5 karakters lang
{
$pos[0] = rand (10, 45); // locatie aanmaken (x-as) voor de eerste karakter
$pos[1] = rand (65, 100); // locatie aanmaken (x-as) voor de tweede karakter
$pos[2] = rand (120, 155); // locatie aanmaken (x-as) voor de derde karakter
$pos[3] = rand (175, 210); // locatie aanmaken (x-as) voor de vierde karakter
$pos[4] = rand (230, 265); // locatie aanmaken (x-as) voor de vijfde karakter
}
imagettftext ($image, // image voorbereiden voor de image variabel ($image)
rand (14, 18), // fontgrootte, willekeurig getal laten kiezen tussen de 13 en 19
rand (-30, 30), // draaihoek, willekeur getal laten kiezen tussen de -31 en de 31
$pos[$i], // karakter positie breedte toewijzen, hebben we al voorbereid ($pos[])
rand (50, 20), // karakter positie hoogte, kiezen tussen de 51 en de 19
$fontcolor, // fontkleur toewijzen, hebben we al voorbereid ($fontcolor)
$aFonts[rand (0, 3)], // font, willekeurig font toewijzen uit de array ($aFonts)
$aCode[$i]); // code toewijzen, op volgorde van de array
}
imagepng ($image, 'captcha.png'); // de .png image aanmaken als captcha.png
imagedestroy ($image); // de handel afronden, en klaar!
?>
Hier heb je een voorbeeld hoe je deze captcha kunt toepassen, alhoewel je hem wel eerst even in een funtie moet plaatsen. Noem de functie even 'captcha_generator ();'. Ik geef even een script voor het genereren van een code, zodat je die kan gebruiken.
<?PHP
function code_generator($length)
{
$generated_key = "";
while (strlen($generated_key) < $length)
{
$generate = mt_rand(48, 90);
if ($generate < 58 || $generate > 64) $generated_key .= strtolower(chr($generate));
}
return $generated_key;
}
?>
Nu ga je naar je bestand toe waar je de captcha wilt plaatsen, en daar doe je het volgende:
<?PHP
if ($_SERVER['REQUEST_METHOD'] != "POST") // Controleren of er niet ergens is gedrukt op een knop
{
// er is nergens op een knop gedrukt, maar gewoon handmatig gerefreshed..
$_SESSION['code'] = ""; // de $_SESSION['code'] leeg gooien
$code = code_generator(rand (4,5)); // een nieuwe key maken
}
if (empty ($_SESSION['code'])) // controleren of de sessie leeg is
{
// de sessie is leeg, de code toewijzen aan de sessie
$_SESSION['code'] = $code;
}
captcha_generator ($_SESSION['code']); // het genereren van de image
echo '<img src="captcha.png" alt="">'; // captcha image weergeven
?>
Je zult met sessions moeten werken, anders wordt de variabel bij het submitten steeds overschreven, en dan zou het nooit werken. Nu zul je een formulier moeten maken, die later wordt gecontroleerd met de $_SESSION['code']. Houd er rekening mee dat, dat als er iets fout is ingevoerd (dus ook de captcha inhoud) dat je de $_SESSION['code'] leeg gooit! Doe je dat niet, dan krijg je elke keer bij het submitten dezelfde code, en dat wil je niet neem ik aan. Succes ermee zou ik zeggen.
Ik hoop dat mensen die deze tutorial gebruiken, da die hier flink wat verder mee komen. Mocht je nog vragen hebben, kan je die altijd op het forum posten. Mocht je onduidelijkheden tegen komen tijdens de tutorial zelf, dan kan je die altijd bij de reacties plaatsen over deze tutorial zodat ik dit kan aanpassen! Mocht je fouten tegen komen, breng mij daar dan ook een van op de hoogte.
Bronnen: sitemasters.be, php.net, wikipedia.com, ervaring
Code Generator: door Arnold
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.31) 