Form validation with Captcha image

In this tutorial I will show you how to create a captcha image to protect your form submissions.

Nowadays the spammers make more and more trouble for site administrators as they submit spams to forums, guestbooks, and registration forms and so on. To protect ourselves against spam robots it’s a good solution to extend our forms with a Captcha image. This image contains a security code which is only readable for humans and not for robots.

 

In this tutorial I will show you how you can generate such images on the fly with PHP and how to integrate it into your own form. First of all we need to split the task into 2 parts.

 

• We need a PHP code which generates an image with a random code
• We need a form where we check security code during processing.

 

Let’s begin with the image generation. If you think about it a bit we have to fulfill the following requirements:

 

• Randomly generated code.
• Randomly generated background image with some noise.
• Randomly positioned characters.

 

So first create a background image. You can create it using the imagecreate function and pass the width and height as parameter.  It is quite simple.

 

<?php
$width  = 120;
$height =  40;

$image = @imagecreate($width, $height) or die('Cannot initialize GD!');
?>

 

Afterwards we add some criss-cross lines to the background. If you increase the number of execution the background will be more complex. For this task we can use imageline function which draws a line from point Ax,Ay to point Bx,By with a color C. To make it always different we generated all coordinates with mt_rand functions. The color is created with the imagecolorallocate function. The code part looks like this:

 

<?php
for( $i=0; $i<10; $i++ ) {
   imageline($image, 
         mt_rand(0,$width), mt_rand(0,$height), 
         mt_rand(0,$width), mt_rand(0,$height), 
         imagecolorallocate($image, mt_rand(150,255), 
                                    mt_rand(150,255), 
                                    mt_rand(150,255)));
}
?>

 

Now it’s time to add a random security code to the image.  To do this we first create a variable which contains all available characters. Later we will select a character one by one from this string randomly as follows:

 

<?php
$baseList = 
'0123456789abcdfghjkmnpqrstvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
for( $i=0, $x=0; $i<$length; $i++ ) {
   $actChar = substr($baseList, rand(0, strlen($baseList)-1), 1);
   $x += 10 + mt_rand(0,10);
   imagechar($image, mt_rand(3,5), $x, mt_rand(5,20), $actChar, 
      imagecolorallocate($image, mt_rand(0,155), mt_rand(0,155), mt_rand(0,155)));
   $code .= strtolower($actChar);
}
?>

 

If we have a character we need to add it to the image. For this we use imagechar function. However during the positioning we again use some randomizing just to make our Captcha image more complex.

 

At least we store the selected character in a separate variable which will be used later. The PHP code for this task looks like this:

 

<?php
header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);

$_SESSION['securityCode'] = $code;
?>

 

Finally we create the image and send it to the browser to display it.

 

The very last step is to store the collected characters, our code in a session variable. Later during the form processing this variable will be used.

 

You can find the complete Captcha image generator code on the last page of this tutorial.

 

article index
page 1 - current : untitled page
page 2 : Form processing
page 3 : Complete code