Dale Mooney Developments

Ok in this tutorial we shall be making a PHP GD captcha image. These are used on alot of big websites when users are filling online forms. They help prevent automated bots from filling forms and cluttering everything up.

Lets start shall we?

of course lets start with the tags

<?php
//Content here
?>

How it works

What we are going to do is create a string of random numbers and letters to be used in the image. We of course need to store that string so we can use it later to check if it matches what is actually being displayed. For this we will use SESSIONS

<?php
//First start the sessions
session_start();

//Now we want to set the header for the page
header(”Content-type: image/png”);

?>

We have set a header this tells the browser that it should display as a image in this case png. THis means if you try to put any other code like HTML on the page all you will get is alot of really crazy looking mess.

<?php
//First start the sessions
session_start();

//Now we want to set the header for the page
header(”Content-type: image/png”);

//Create the random string
$md5 = md5(microtime() * mktime());

?>

Now of md5 usually creates a 32 character string, but we dont want to use all of them just the first 5 characters

<?php
//First start the sessions
session_start();

//Now we want to set the header for the page
header(”Content-type: image/png”);

//Create the random string
$md5 = md5(microtime() * mktime());

//We have cut it down to 5 characters
$string = substr($md5,0,5);

//We have now stored this string into a session and also made it md5 to encrypt it for extra security
$_SESSION['key'] = md5($string);

?>

Creating the image

Now we can start creating the actual image now.

<?php
//First start the sessions
session_start();

//Now we want to set the header for the page
header(”Content-type: image/png”);

//Create the random string
$md5 = md5(microtime() * mktime());

//We have cut it down to 5 characters
$string = substr($md5,0,5);

//We have now stored this string into a session and also made it md5 to encrypt it for extra security
$_SESSION['key'] = md5($string);

//We have created a image 400 x 50 pixels
$im = imagecreatetruecolor(400, 50);

?>

The Colours

Now of course in order to use colours we need to create them using a function.

<?php
//First start the sessions
session_start();

//Now we want to set the header for the page
header(”Content-type: image/png”);

//Create the random string
$md5 = md5(microtime() * mktime());

//We have cut it down to 5 characters
$string = substr($md5,0,5);

//We have now stored this string into a session and also made it md5 to encrypt it for extra security
$_SESSION['key'] = md5($string);

//We have created a image 400 x 50 pixels
$im = imagecreatetruecolor(400, 50);

// Create some colours
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);

?>

We shall use these colours to create our image. We shall use the white for the background of the image and the black for the text.

<?php
//First start the sessions
session_start();

//Now we want to set the header for the page
header(”Content-type: image/png”);

//Create the random string
$md5 = md5(microtime() * mktime());

//We have cut it down to 5 characters
$string = substr($md5,0,5);

//We have now stored this string into a session and also made it md5 to encrypt it for extra security
$_SESSION['key'] = md5($string);

//We have created a image 400 x 50 pixels
$im = imagecreatetruecolor(400, 50);

// Create some colours
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);

//Create the background that is white
imagefilledrectangle($im, 0, 0, 399, 50, $white);

?>

You can see we have created a background or “imagefilledrectangle”.

The properties of imagefilledrectangle

imagefilledrectangle($im,x1,y1,x2,y2,colour);

im - the created image that uses in this case imagecreatetruecolor or anything like imagecreatefromjpeg and so on

x1 - First position of the rectangle so in this case the top left of the rectangle 0 will place in top left corner

Always different

The best images will be making them always change and be very random and not easy to read well easy enough for a human to read anyway.

<?php
//First start the sessions
session_start();

//Now we want to set the header for the page
header(”Content-type: image/png”);

//Create the random string
$md5 = md5(microtime() * mktime());

//We have cut it down to 5 characters
$string = substr($md5,0,5);

//We have now stored this string into a session and also made it md5 to encrypt it for extra security
$_SESSION['key'] = md5($string);

//We have created a image 400 x 50 pixels
$im = imagecreatetruecolor(400, 50);

// Create some colours
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);

//Create the background that is white
imagefilledrectangle($im, 0, 0, 399, 50, $white);

// The text to draw
$text = $string;
$x = 20; // This will be the starting position of the first letter
$y = 20; //This will always be 20 so the letters will be in the same position, but this can be changed

//We will create a for loop to show all the letters and randomize them
for($i = 0; $i <= 4; $i++){
}

?>

The randomness

We need to randomize the letters so some of them are big some are small some are rotated and so on. We can do this very easy using a function called rand();

<?php
//First start the sessions
session_start();

//Now we want to set the header for the page
header(”Content-type: image/png”);

//Create the random string
$md5 = md5(microtime() * mktime());

//We have cut it down to 5 characters
$string = substr($md5,0,5);

//We have now stored this string into a session and also made it md5 to encrypt it for extra security
$_SESSION['key'] = md5($string);

//We have created a image 400 x 50 pixels
$im = imagecreatetruecolor(400, 50);

// Create some colours
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);

//Create the background that is white

imagefilledrectangle($im, 0, 0, 399, 50, $white);

// The text to draw
$text = $string;
$x = 20; // This will be the starting position of the first letter
$y = 20; //This will always be 20 so the letters will be in the same position, but this can be changed

//We will create a for loop to show all the letters and randomize them
for($i = 0; $i <= 4; $i++){

$fontsize = rand(8,20); //Font size
$rote = rand(0,80);       //Rotate angle
$thefont = rand(0,2);    //Select random font out of 3

//You can choose your own fonts. Remember to put these actual font files in the same directory as this file otherwise it will not work

if($thefont == 0){
$font = ‘arial.ttf’;
}
if($thefont == 1){
$font = “36daysag.ttf”;
}
if($thefont == 2){
$font = “andlso.ttf”;
}

}

?>

Now we have done sorting out some random values for creating the image we can now start using them.

<?php
//First start the sessions
session_start();

//Now we want to set the header for the page
header(”Content-type: image/png”);

//Create the random string
$md5 = md5(microtime() * mktime());

//We have cut it down to 5 characters
$string = substr($md5,0,5);

//We have now stored this string into a session and also made it md5 to encrypt it for extra security
$_SESSION['key'] = md5($string);

//We have created a image 400 x 50 pixels
$im = imagecreatetruecolor(400, 50);

// Create some colours
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);

//Create the background that is white

imagefilledrectangle($im, 0, 0, 399, 50, $white);

// The text to draw
$text = $string;
$x = 20; // This will be the starting position of the first letter
$y = 20; //This will always be 20 so the letters will be in the same position, but this can be changed

//We will create a for loop to show all the letters and randomize them
for($i = 0; $i <= 4; $i++){

$fontsize = rand(8,20); //Font size
$rote = rand(0,80);       //Rotate angle
$thefont = rand(0,2);    //Select random font out of 3

//You can choose your own fonts. Remember to put these actual font files in the same directory as this file otherwise it will not work

if($thefont == 0){
$font = ‘arial.ttf’;
}
if($thefont == 1){
$font = “36daysag.ttf”;
}
if($thefont == 2){
$font = “andlso.ttf”;
}

// Add some shadow to the text
imagettftext($im,$fontsize,$rote,$x,$y+1,$black,$font,$md5[$i]);
//Create the normal text
imagettftext($im,$fontsize,$rote,$x,$y,$black,$font,$md5[$i]);

$x += 20; //Move next letter 20 pixels to the right

}

?>

Conclusion

We have pretty much done now. This can be used for alot of things so please try and mess around with it, but remember it can easily be improved we can add random background images to it and also add random colours for the characters.

Example

Knowing if user inputs correct?

You of course can easily check if the user has input the correct code. If you wish to access the string that was stored then you can use the following.

<?php

$key = $_SESSION['key'];
$userinput = $_POST["key"];

if(md5($userinput) == $key){
echo “Correct input”;
}else{
echo “Incorrect input”;
}

?>

Tags: Captcha, gd, PHP, security

This entry was posted on Saturday, August 30th, 2008 at 5:46 am and is filed under PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.