// phpShack / PHP and MySQL Tutorials / Auto Image Verification
 

Navigation





  

Auto Image Verification

In this tutorial I am going to show you how to create one of those cool and sometimes annoying little verification images you see on forms you fill out. Where the image displays a string of characters and you have to enter them into a field to prove your human. This is a security measure to keep spam and automated scripts out.

A few requirements to get started:

  • You must have the GD Library installed
  • You must have True Type font support enabled

If you have those things then you can continue. We will start out with the script itself.

First off we are going to start our session and create a string of 5 random characters.


PHP Code Example:
<?
// image.php
session_start(); //Start the session

// Create our random characters and put them into the variable $rand_char
$rand_char=substr(shal(rand()),0,5); 
?>

Now we are going to put the md5 sum of our characters into a session variable so we can carry it to our form. And then split each individual character up into its own variable.
PHP Code Example:
<?
// Here we put the md5 sum into the session variable image_value
$_SESSION['image_value'] = md5($rand_str);

// This is where we split each individual character into a variable
$character1=substr($rand_str,0,1);
$character2=substr($rand_str,1,1);
$character3=substr($rand_str,2,1);
$character4=substr($rand_str,3,1);
$character5=substr($rand_str,4,1); 
?>

Ok so far we have a 5 character string that is split up into 5 individual variables. Now we can start working on our image itself. I created a simple image in Photoshop as a base that has alot of noise in it. The noise makes it hard for a automated script to read the letters.

You can view and download the noise.png image here
You are welcome to use this image on your own site or create your own.

To use this image in our script we use the imagecreatefrompng() function. If you decide to use a gif or jpeg just replace png with whatever type it is.
PHP Code Example:
<?
/* This creates the image from our png file with the noise in it. 
   We will put the text string on top of this image. */
$image=imagecreatefrompng("./noise.png"); 
?>

Now we set the location of our font and the color of the text to black.
PHP Code Example:
<?
$font = "fontname.ttf"; // Tells the script where our font is located and it's name.
$black = imagecolorallocate($image, 0,0,0); // Sets color to black 
?>

Finally, now we start inserting the characters we generated on top of the noise.png image.
First lets talk about the imagettftext() function. Here is the syntax:
<?
imagettftext (image, size, angle, int x, int y, int color, fontfile, text)
?>

I want to focus on the float angle value. Some people like to create a random number for the angle, but I don't like that because sometimes the number six or nine can get turned around and look like the oposite. So I just put the values I want in by hand. Here is our code:
PHP Code Example:
<?
imagettftext($image, 30, -10, 10, 35, $black, $font, $character1);
imagettftext($image, 30, 20, 40, 35, $black, $font, $character2);
imagettftext($image, 30, -35, 70, 35, $black, $font, $character3);
imagettftext($image, 30, 25, 100, 35, $black, $font, $character4);
imagettftext($image, 30, -15, 130, 35, $black, $font, $character5);
?>

Now we will output our finished image and destroy the image. It is very important to destroy the image or it will fill up the servers memory and cause some problems.
PHP Code Example:
<?
imagejpeg($image);
imagedestroy($image);
?>

Now that we have our script finished we can make our form do display our image.

Basically all we do is <img src="image.php"> to display out random image. And do a if statement to check if they entered the characters correctly. Here is out code for our form
PHP Code Example:
<?
session_start(); // Start a session
?>
<HTML>
<HEAD>
<TITLE>Verification Image</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY>
<?
if(isset($_POST['Submit']))
{
$number = $_POST['number'];
if(md5($number) != $_SESSION['image_value'])
echo '<h1>Incorrect! Try Again</h1>';
else
{
echo '<h1>Your string is valid!</h1>';
}
}
?>
<form name="verify_form" method="post" action="#">
<table cellspacing="0" width="600" align="center">
<tr><td colspan=2 align="center">
<font size="1" face="Geneva, Arial, Helvetica, sans-serif"><strong><font size="2">
Enter the characters shown in the image.<br>
</font></td></tr>
<tr><td align="center" colspan=2><input name="number" type="text" id="number"></td></tr>
<tr><td colspan=2 align="center"><img src="./random_image.php"></td></tr>
<tr><td colspan=2 align="center"><input name="Submit" type="submit"
value="Submit"></td></tr>
</table>
</form>
</BODY>
</HTML> 

The following code from our form just checks to see if the form has been submitted, and if it has it takes the md5 sum of the characters they entered and compares it to the md5 sum we put in our session variable.
PHP Code Example:

<?
if(isset($_POST['Submit']))
{
$number = $_POST['number'];
if(md5($number) != $_SESSION['image_value'])
echo '<h1>Incorrect! Try Again</h1>';
else
{
echo '<h1>Your string is valid!</h1>';
}
}
?>