CAPTCHA is an acronym which stands for "Completely Automated Public Turing test to tell Computers and Humans Apart". The way that it does this is to display an image that has some characters displayed in it which you are required to enter into a form field. As the image is styled to make it difficult for computers to read what those characters are the computer cannot fill out the field hence spam spiders are unable to fill in the field correctly. Unfortunately, this can also have the effect of making it impossible for some people to tell what value to fill in as well. Some CAPTCHA scripts attempt to resolve this problem by providing an audio file equivalent to the CAPTCHA image. Computers can't convert the audio file contents into the value to enter into the form field and so the audio file also serves to tell computers and people apart.

So now that we know what a CAPTCHA is let's look at how we can create a simple one. Let's look at creating a simple imager CAPTCHA and we'll leave adding an audio file equivalent for a later tutorial.

Let's create a really simple CAPTCHA script that we can add to our form. Here's some really basic code that will generate a CAPTCHA image from PHP.

$md5 = md5(microtime() * mktime());
$string = substr($md5,0,5);
$captcha = imagecreatefrompng("captcha.png");
$black = imagecolorallocate($captcha, 0, 0, 63);
$line = imagecolorallocate($captcha,63,63,63);
imagestring($captcha, 5, 10, 5, $string, $black);
$_SESSION['nspam'] = $string;
header("Content-type: image/png");

This script starts by creating a session. We need a session so that the value displayed in the CAPTCHA image can be passed to the script that will process the form in a session field. The session field can then be compared to what was entered in the form field. If we don't establish a session then the script processing the form has no way to tell what value was displayed in the image.

The second line of our script generates a random string of hexadecimal characters using the current time (in milliseconds) and MD5 encryption. This gives us a string consisting of numbers and the letters A through F which will be suitable for our purposes. The third line simply grabs the first five characters of this result as that ought to be sufficient for us to have our visitors enter into the form.

The fourth line reads in an existing image using the imagecreatefrompng() function which we will use as the background for the CAPTCHA image that we are creating. For this you need an image that has some variety in colours that will help to make it difficult for OCR software to read the text that will be added into the image while still providing sufficient contrast to allow people to read it.

The next two lines using the imagecolorallocate() function define two colours that we are going to use when we add our content in front of the background in order to create our final image.

Just to make things a little more difficult for the computers, the next three lines of code use the imageline() function to draw three lines across the background using a colour similar to what we will use for the characters we are about to display.

The imagestring() function on the next line adds our five randomly selected characters into the image in front of the background image and the three lines previously added. This gives us the final image that we will display.

Next we set up a session variable containing the same value that we just added to the image. This session variable gets passed to subsequent pages and will allow the script processing the form to tell if the correct value was entered.

The final two lines of our script set the header to identify this as a PNG image and writes the final content of our image out into the page where we called it from.

Now that we have our CAPTCHA script we need to set up an image tag in our page to display the image and a form field for our visitors to enter the value from the image into the form. The code for these two fields might look like this (if we saved the above PHP script as testimg.php):

<img src="testimg.php" width="60" height="25" alt="" />
<input type="text" name="aspam" value=" " size="10" maxlength="10" />

The final step in the processing is to include a session_start call at the top of the script processing the form and to add a test into that script to compare the value passed in the session to that posted from the form. Using the names that we have given those fields in the above code we would compare $_SESSION['nspam'] with $_POST['aspam'] and if they are not equal then the wrong value was entered into the form field and we can abort the processing of the form.

Wondering what a CAPTCHA image looks like that is generated using the above code? Well here is an example: and the background image into which we are inserting the CAPTCHA text looks like this: . You may copy this background image and the above code to use as the starting point for creating your own CAPTCHA image if you wish to do so.

One thing to note with using a script like this is that if your visitor uses their back button to return to the web page that a new value for the CAPTCHA may be generated without the image being displayed being updated to display the new value.

Here are a few sites offering more advanced CAPTCHA scripts for if you do not wish to write your own?


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow