In php all graphics are done using the gd library. So, first you need to make sure that you have the gd2 extension enabled on your machine.
There are two small scripts in this tutorial:(1) image.php - generates the image and displays the form and (2) verify.php - verifies the string typed in matches.
Script 1 - image.php
<?php
/*tell browser that an image is coming */
Header("Content-Type: image/png");
/* initialize a session - used to store the verification string. */
session_start();
/* grab the session id - use it for the image name to avoid collisions for multiple users */
$sessionid = session_id();
/* create an image big enough to hold 4 characters */
$im = ImageCreate(40, 40);
/* use white for text, black for image background */
$white = ImageColorAllocate($im, 255, 255, 255);
$black = ImageColorAllocate($im, 0, 0, 0);
/*seed the random string generator.*/
srand((double)microtime()*1000000);
/*muck it up*/
$string = md5(rand(0,9999));
/*get 4 characters from the random string (32 characters long) */
$new_string = substr($string, 12, 4);
/*save in session so we can test to verify on the form receipt */
$_SESSION['new_string'] = $new_string;
/*paint the background of the image */
ImageFill($im, 0, 0, $black);
/*writes string into image $im using font, x, y, string, color */
ImageString($im, 4, 4, 10, $new_string, $white);
/* send the image to the browser (mime component) */
ImagePNG($im, "$sessionid.png");
ImageDestroy($im);
?>
<html>
<head>
<title>Image Verify</title>
</head>
<body>
Type the code you see in the image in the box below. (case insensitive)
<img src="<? echo $sessionid;?>.png">
<form action="verify.php" method="post">
<input name="verify" type="text" value="">
<input type="submit">
</form>
</body>
</html>
?>
Some notes on image.php:
- Many sites use interesting effects on the string presented. I guess the idea is that some machine could do character recognition on the same font over and over. You can vary the font using gd routines.
- Many sites use varying colors and/or patterns applied to the image. Again, I am assumed to avoid recognition routines. You would have to develop a series of patterns and pick a random one to apply in the particular instance.
- Almost any random generator will do. You may be able to use a sufficiently large enough set of prefabricated images/'random' strings so you can just pull up image x instead of the bothering with generating one from scratch. Although it doesn't appear to be an expensive process.
- I am using the session id for the image name to avoid collisions on a higher traffic site.
- Be sure to mark the image for deletion. I don't think this is automatic.
Script 2 - verify.php
<?php
/*This starts the php session stuff*/
session_start();
/*grab the value entered*/
$random = trim($_POST['verify']);
/*grab the random string we stored*/
$new_string = $_SESSION['new_string'];
/*make sure they are the same*/
if (strtolower($new_string) == strtolower($random)){
echo "Success";
}
else{
echo "Try again.";
}
?>
Notes on verify.php:
- I think this is fairly clean session use.
- You may want to force the image.php page to expire so that people/programs can't just go back and try again.
Note: the code is using the php session to store a random string. You may want to disable php session id being displayed in the url. |
