Image verification has become an integral part in any online registration process. It is important to know whether the other side that is filling the form is really a human or any robot or automatic scripts so, its time to look at how it really works.
To achieve this with PHP, you need to have the GD library installed. The whole procedure is quite simple. You generate a random number and then stamp it over a picture and there you go, you have your own verification number on a nice picture.
The coding is also quite simple as the algorithm mentioned above. Enough of words and let’s take a look at the coding to make the things go clear.
//verification.php
$alphanum = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
// generate the5 digit verification code
$rand = substr(str_shuffle($alphanum), 0, 5);
//create image from a given jpeg to write our code
$image = imagecreatefromjpeg("background.jpg");
//allocate the text color of the code
$textColor = imagecolorallocate($image, 0, 0, 0);
// write the code on the background image
imagestring ($image, 5, 5, 8, $rand, $textColor);
// send the content type header so the image is //displayed properly
header(‘Content-type: image/jpeg’);
// send the image to the browser
imagejpeg($image);
// destroy the image to free up the memory
imagedestroy($image);
?>
Save the above code as verification.php and preview it in your browser and there you have it.
How it works
In the above program, we created a string of alphanumeric characters. Then the sting was shuffled using str_shuffle(string) function. We then extracted the first five characters of the shuffled string using the substr(string,starting_position,no_of_chars). The extracted characters were then stored as our random code. We then created a image from the given image and wrote our code on the image using the imagestring(image,font,x_pos,y_pos,string,string_color). (Refer the imagettftext() function for better result).
And finally the image was fed to the browser using the imagejpeg(image) function for jpeg image. For a complete reference on the functions used in above codes, you can log on to the official site of php,
http://www.php.net/ and get your copy of php manual for free.
Now you have your verification code, but what about using it to verify the users. They say life is full of options and so does php offers a variety of options to pass a variable between the web pages. You can pass the random code generated to any other page either using sessions or cookies variables, using the form submission method or the rather insecure URL method. Let’s try it using session variables. For this you need to have some modifications on your verification.php file or whatever you named it. first of all initialize a session and then assign the random number to a session variable.
//mod_verification.php
Session_start();
$alphanum = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
// generate the5 digit verification code
$rand = substr(str_shuffle($alphanum), 0, 5);
//assign session variable the verification code
$_SESSION[‘variable’]=$rand;
//create image from a given jpeg to write our code
$image = imagecreatefromjpeg("background.jpg");
//allocate the text color of the code
$textColor = imagecolorallocate($image, 0, 0, 0);
// write the code on the background image
imagestring ($image, 5, 5, 8, $rand, $textColor);
// send the content type header so the image is //displayed properly
header(‘Content-type: image/jpeg’);
//save the final image as image.jpg
imagejpeg($image,”image.jpg”);
echo “<img src=\”image.jpg\”>”;;
echo "Type the code you see in the image in the box below. (case sensitive)";
?>
<form action=check.php method=post>
<input name=code type=text > //place to type the code
<input type=submit> //submit button
</form>
With that done, we must now create a new file and name it check.php and see if it works.
//check.php
Session_start();
//retrieve the posted variable via forn
$typed=$_POST[‘code’];
//retrieve the session variable
$var=$_SESSION[‘variable’];
echo “The verification code was $var and you typed $typed”;
if($var==$typed)
{
echo “you are verified”;
}
?>
There you are, with your own image verification tool.
