 |
All Articles Advanced Validating Forms with Random Generated Images | PHP Articles | |||||||
|---|---|---|---|---|---|---|---|
|
| Main Menu | |||||
|---|---|---|---|---|---|
|
|
|
| Validating Forms with Random Generated Images |
|
|
|
| Monday, 28 August 2006 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
In PHP validation of forms using randomly generated images is achieved by using something known as CAPTCHA (completely automated public Turing test to tell computers and humans apart). You may be thinking just exactly what is a captcha? Well you are likely to have already seen them across the web. They are those little images with a code on the front that you type into a box in order to submit something. This kind of system helps to prevent automatic submitting of an operation by some kind of program or robot. In this tutorial I will show you how to make a CAPTCHA. It’s not the most advanced captcha available because it uses a simple system font and nothing more. How does a CAPTCHA work? To put it simply a captcha works by generating a random string, writing it to an image, then storing the string inside of a session or cookie or by some other method. This is then checked when the form or operation is performed. Below is a step-by-step layout of how it works. 1. Random text generated 2. Text written to image 3. Text stored in session/cookie/database 4. Image displayed to user 5. User enters the code 6. User entered code is checked against the stored key 7. If they match then something is done Creating the random text Right now we are up to generating the random text. To do this I will use the php functions, microtime() and mktime() to generate a number. This number will then be encrypted using md5(). With this 32 character long encrypted string we will then use substr() to cut it down to a 5 letter long string. This is our random text. Note: You may notice session_start() at the top of this script, this is to start the session which will be used later.... <?php //Start the session so we can store what the code actually is. session_start(); //Now lets use md5 to generate a totally random string $md5 = md5(microtime() * mktime()); /* We dont need a 32 character long string so we trim it down to 5 */ $string = substr($md5,0,5); ?> Next we will write this string to the image and output it to the user Writing the text to the image Now that we have the text to write we actually need to write it to the image and display it to the user. This is made fairly easy with GD. <?php /* Now for the GD stuff, for ease of use lets create the image from a background image. */ $captcha = imagecreatefrompng("./captcha.png"); /* Lets set the colours, the colour $line is used to generate lines. Using a blue misty colours. The colour codes are in RGB */ $black = imagecolorallocate($captcha, 0, 0, 0); $line = imagecolorallocate($captcha,233,239,239); /* Now to make it a little bit harder for any bots to break, assuming they can break it so far. Lets add some lines in (static lines) to attempt to make the bots life a little harder */ imageline($captcha,0,0,39,29,$line); imageline($captcha,40,0,64,29,$line); ?> As you can see from the code above we are loading the basic image from CAPTCHA.png instead of building the image itself, which could be a little complex for this basic tutorial. When we use colour in GD we need to allocate the colour to a variable, we do this with imagecolorallocate(). Once we have the colours stored inside of the respected variables, we then use them to draw the lines through the image. This is to make the robots job of cracking the captcha just that little bit harder. Finally we have to write the text to the image which is made easy with imagestring() . The only thing left to do on this image is to output it which is done by setting the content type of the page to image/png with header() and outputting the image to the browser with imagepng(). It is also worth mentioning that the string is encrypted and stored in the session variable $_SESSION['key'] <?php /* Now for the all important writing of the randomly generated string to the image. */ imagestring($captcha, 5, 20, 10, $string, $black); /* Encrypt and store the key inside of a session */ $_SESSION['key'] = md5($string); /* Output the image */ header("Content-type: image/png"); imagepng($captcha); ?> Check if the user entered the code correctly You require simple text form that requires a code to be entered, a simple text field called code or something similar should do nicely. Then you just display the image to the user with a simple <img xsrc="captcha.php" border="0"> tag. Now assuming that this form has been submitted we need to check if the code matches what was on the image, after all this is the whole point of a captcha system. You can do this in any php file as long as the form described above submits to it. For basic checking we will use the code below. <?php session_start(); //Encrypt the posted code field and then compare with the stored key if(md5($_POST['code']) != $_SESSION['key']) { die("Error: You must enter the code correctly"); }else{ echo 'You entered the code correctly'; } ?> The session_start() you see here simply continues the session from the previous page, easy enough. Then its just a case of simple text matching which you can see is done by the if statement. Improvements and Conclusion Well that is all there is to CAPTCHA images just a simple writing of text to an image and storing of the text (key). However the captcha I just described how to build is just an example. If you're feeling adventurous you could try the following things: • Use a TTF font • Move the lines randomly • Randomly position the text on the image • Rotate the text randomly • Use words instead of that string (ie: have a randomly picked word out of say a file of about 1000)
Only registered users can write comments! |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| < Prev | Next > |
|---|
| Syndicate |
|---|
|
|
|
| Login Form |
|---|