Implementing CAPTCHA using PHP

How to implement a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) using PHP

Implementing CAPTCHA using PHP

Steps involved in this tutorial:

1. Create a background image, the more messier the more better.
2. Load a font file to display the CAPTCHA text
3. Generate a random unique text
4. Store the generated text in a Session variable to be used later for validation
5. Write the CAPTCHA text to the image created in Step 1
6. Generate the CAPTCHA image
7. Also created a php page with the CAPTCHA image, a text box for input and a Submit button to show a working model (this step is not explained in detail, its simple PHP code, download and check the source files)

Click here for a working model

The first thing I did was opened Photoshop and created this image to use as a background image

If you don’t have Photoshop don’t worry, any image editor will do. Even M$ Paint is enough. Just create an image with random colors. Save the image in PNG format with filename captcha.png. If you don’t like PNG , save in the format you like and use the appropriate function to load image.

Ok now the background image is ready.

Using the php function imagecreatefrompng load the image we just created using the code

$captchaImage = imagecreatefrompng("captcha.png");

Next using the php function imageloadfont , load a font to display the CAPTCHA text.

The parameter of the imageloadfont function is a font filename. I tried using a TTF font file. But somehow it doesn’t work. The possible reason for this, from php.net (http://au3.php.net/manual/en/function.imageloadfont.php)

“ The font file format is currently binary and architecture dependent. This means you should generate the font files on the same type of CPU as the machine you are running PHP on.”

So I created a GD Font (.gdf) file. You can create a .gdf file from TTF using http://www.wedwick.com/wftopf.exe or http://www.puremango.co.uk/cm_fontmaker_114.php or download some good GDF fonts from http://www.widgnet.com/gdf_fonts/fonts.html
After loading the font the next step is to generate a random, unique string to use as CAPTCHA text. This is how the CAPTCHA text is created

 $captchaText = substr(md5(uniqid('')),-9,9);

Generate a string using uniqid(), MD5 it, extract the last 9 characters using substr()

Now store this generated text in some session variable for later validation. You can also store this generated text in a cookie or database instead of a session variable.

Now write this generated string on the background image we created earlier. For this we use the function imagestring()

Output the image in PNG format using imagepng() . Now you will have an image with a random, unique string written in it.

Another advantage of this code is, to display the CAPTCHA image you only need to include a image tag in your webpage and give the source as capthca.php. Then the CAPTCHA image will be displayed.

Eg :

 <img src="captcha.php" name="captcha" width="233" height="49" >

I have also created a php file to show its working. You can download the full files with some additional GD fonts here.

<?php
/***
 * File : captcha.php
 * Description : Creating a captha image and
 * store the text in a session variable
 * Author : Kiran Paul V.J. aka kiranvj aka human
 * License : Freeware
 * Last update : 22-Aug-2007
 */

  // Initialize session data
session_start();
// all images in this file is of PNG format,
// there is not specific reason for that.
// this line is used to set the header of the page
// setting the header to image/png means this page
// contians data of image->PNG type
header("Content-type: image/png");

// create a new image resource from a file
$captchaImage = imagecreatefrompng("captcha.png")
or die("Cannot Initialize new GD image stream");

//Loads a new font from a file
$captchaFont = imageloadfont("anonymous.gdf");

// Create the captcha text with some manipulation
$captchaText = substr(md5(uniqid('')),-9,9);

// stores the captha text in a session variable
$_SESSION['session_captchaText'] = $captchaText;

// Allocating color for captcha text to be used
// in imagestring function
$captchaColor = imagecolorallocate($captchaImage,0,0,0);

// drawing the string 
imagestring($captchaImage,$captchaFont,15,5,$captchaText,$captchaColor);

// Outputs the captha image in PNG format.
// You can change the image format using
// imagejpeg,imagegif ,imagewbmp etc.
imagepng($captchaImage);

//frees memory
imagedestroy($captchaImage);
?>

Download full source