^ An Image Verification Tutorial

				


Image Verification Tutorial

 

 
 


 
I'm sure many of you have logged on to Yahoo!, eBay or even here on Planet 
Source Code and have run across the verification image containing numbers and 
letters that you must plug into an input box for verification. And maybe you 
thought, "What the heck is this for?" or "I wish I knew how to do that." 

You wanna know--then I will show you how.



A script like this is usually used for further security of the user's 
information--or, like on Planet Source Code, so that "unscrupulous people" 
cannot use "HTTP Post code in their submissions to trick people into unknowingly 
voting for them."



Okay, enough talk--let's get started.



First, I assume that you have PHP 4 with the GD library already installed. Also, 
 we will use session functions in this code to pass a varaible from one 
 page to the next.



To create our image, we need to send a header telling the connection that we are 
about to send an image, we do that with the header function:

--------------------------------------------



 /*Send header*/
Header("Content-Type: image/png");



--------------------------------------------

We are going to be working with png images in this tutorial. But if you want to 
use "jpeg", just plug it in where "png" is in the header. (You can also call a 
"gif" image, but because of all the money stuff, most servers don't support it.)

 

 I know your dying to get started building images, but first, we need to 
 get a little more prep work out the way. So, let's put those session 
 functions to work. 

 ---------------------------------------------

 

 /* initialize a session. */

 session_start();

 

 /*We'll set this variable later.*/

 $new_string;

 

 /*register the session variable. */

 session_register('new_string');

 

 -------------------------------------------------

 All we did above was start a new session with the session start function. 
 We will call this session on a different page that we will create later. 
 Second, we created a variable called new_string that we will give a value 
 to later. Lastly, we called the session register function: this function 
 takes the variable we created as an argument minus the "$" sign, also, you 
 must put it inside single quotes only. (An argument refers to the single 
 or comma separated information inside the parenthesis of a function.)

 

With that out the way, we can now begin to create our image. We start this 
 process by calling the create image function, which does 
exactly what it says: Creates an image.
---------------------------------------------



/* set up image*/

/*The first number is the width and the second is the height*/
$im = ImageCreate(200, 40);  



----------------------------------------------
I set the image Create() function to the variable $im. The variable $im will be 
our pointer to the image we just created for the rest of the tutorial. The image 
Create function take only two arguments and the arguments can only be 
integers (numbers). The first argument is the width of the image in pixels, the 
second, you guessed it, is the height. 



Let's give our image some color.
----------------------------------------------



/*creates two variable to store color*/

$white = ImageColorAllocate($im, 255, 255, 255);
$black = ImageColorAllocate($im, 0, 0, 0);



----------------------------------------------

I called the Image Color Allocate function twice. The first time is to set the 
color for white, the second to set the color for black. The function take 4 
arguments: The image pointer variable $im, and the RGB (red, green, blue) 
components that are separated by commas. 
(255, 255, 255, is the code for white, while 0, 0, 0, is the code for black. You 
can play with the numbers to produce any color you want.)

At this point we have a png image and two colors. Now we will create a random 
string generator to place as the verification code inside the image. I won't 
discuss how the random generator code works, but will only lay out the code with 
comments.
------------------------------------------------



/*random string generator.*/
/*The seed for the random number*/

srand((double)microtime()*1000000); 



/*Runs the string through the md5 function--which is a function that encrypts 
a string, changing it into a 32 character string composed of numbers and 
lowercase letters*/


$string = md5(rand(0,9999)); 



/*Creates the new string. The first number is the point in 
the 32 character string where we will pull our string from. In other words, PHP 
will count (beginning at 0) 17 characters into the string. The 18th character in 
will be our beginning point (remember, PHP starts counting from 0). From there, 
PHP counts 5 characters from that point, and thus, we get our five character 
string. The second number is the length of our string--changing this number will 
give us different string lengths.*/

$new_string = substr($string, 17, 5); 

-------------------------------------------------




Moving on--Now let's fill the image with color.

-------------------------------------------------



 /*fill image with black*/
ImageFill($im, 0, 0, $black);



---------------------------------------------------

The Image Fill function is called first. It takes 4 arguments: Again we add the 
image pointer variable $im, the second and third are x, y coordinates in 
our image, 0, 0, being at the top left corner. Our image size is 200x40, 
therefore, the bottom right corner would be 200, 40. The fourth argument tell 
us with what color to fill the image with: In our case it is black.



Now, let's add the string we just created to our image. 

----------------------------------------------------



 /*write string at coordinates (70,10) in the color white. 
(70, 10) puts the string almost in the middle of the image.*/

ImageString($im, 4, 70, 10, $new_string, $white);



-----------------------------------------------------

We have yet another function: Image String, and yes, it adds a string to our 
image. It takes six arguments. The first is the image pointer variable, the 
second argument can be any number from 1 to 5,(which calls for one of the built in fonts). 
The next two arguments are the coordinates, first the x (width) then the y 
(height). This is for the placement of our string. The next argument calls for the string 
variable. In our case it is $new_string. The last argument is the variable containing the color, which is 
$white.



We end the image build by outputting our image using the code below:

-----------------------------------------------------



 /*output to browser*/
ImagePNG($im, "verify.png");

ImageDestroy($im); 



------------------------------------------------------

We have the imagePNG function with two arguments: again, like always the image 
pointer, the second argument names the image "verify.png" and saves the 
image in 
the current directory. If you want the image in a different directory, proceed "verify.png" 
with the path to the directory. 



Hey, we're through building the image. 



Finally, 
input the Image Destroy function, it has one argument: the pointer variable. 
Destroying the image frees up server memory. Your server administrator will like 
you for this. Your code should look like this:

-----------------------------------------------------



<?php

  /*header*/
Header("Content-Type: image/png");

 

 /* initialize a session. */

 session_start();

 

 /*We'll set this variable later.*/

 $new_string;

 

 /*register the session variable. */

 session_register('new_string');



 /*You will need these two lines below.*/

 echo "<html><head><title>Verification</title></head>";
echo "<body>";

/* set up image, the first number is the width and the 
second is the height*/
$im = ImageCreate(200, 40); 


/*creates two variables to store color*/
$white = ImageColorAllocate($im, 255, 255, 255);
$black = ImageColorAllocate($im, 0, 0, 0);


/*random string generator.*/
/*The seed for the random number*/

srand((double)microtime()*1000000); 


/*Runs the string through the md5 function*/
$string = md5(rand(0,9999)); 



/*creates the new string. */
$new_string = substr($string, 17, 5);



 /*fill image with black*/
ImageFill($im, 0, 0, $black);


 /*writes string */
ImageString($im, 4, 96, 19, $new_string, $white);



/* output to browser*/
ImagePNG($im, "verify.png");

ImageDestroy($im); 

?>

---------------------------------------------------

Now place a form input box below our image (see the code below), and ask the 
user to input the string they see in the image in the text box. Append this code 
to the bottom of the code above, before the "?>." 

---------------------------------------------------



/*I plugged our image in like I would any other image.*/

echo "<img src=\"verify.png\">";
echo "<br><br>";
echo "Type the code you see in the image in the box below. (case sensitive)";

echo " <form action=\"formhandler.php\" method=post>";
echo "<input name=\"random\" type=\"text\" value=\"\">";
echo "<input type=\"submit\">";
echo "</form>";
echo "</body>";
echo "</html>";



 
 
---------------------------------------------------

 With that done, we must now create a new file and name it formhandler.php. 
 We will put the code below into it.

---------------------------------------------------

 

<?php

 /*This starts the session that we created on the 
 last page*/

 session_start(); 

 

 /*This trims the random variable of any white space 
 that the user may have unknowingly put in.*/

 $random = trim($random);



 /*Below is a conditional statement: In English it reads, if 
the string that the user put into the text box is equal to what is in the image 
then print to the screen, "You are verified."  If they are not equal it tells the 
user to go back and try again.*/

 

 /*We can use the variable $new_string because we 
 registered it into our session on the last page, it retains its value that 
 it had on the first page.*/

 if ($new_string == $random){
echo "You are verified";

}

else{
echo "Please go back and get verified.";

}
?>



There you are. Try it out. IF you have any trouble send me an e-mail. And that's 
that.

 

 Thanks to comments left below, this article has been updated by the 
 Author.

 Please Rate this Tutorial!!!