Math Captcha Image Validation

slacware

Mar 2 2007, 06:05 PM

This tutorial will show you how to make a basic math CAPTCHA validtion form.

This requires that you have the GD library for PHP installed to work.

This tutorial requires 2 files, login.php and action.php.

The first step is to create a sub-folder to store the temporary images, for the purposes of this tutorial,this folder should be called images. Now upload a image in there called verify.php and chmod just that image(not the folder) to 777 so that image can change as our functions generate new images.

Ok, after you've done that, we can get to the code:

in login.php:

Code:

CODE

<?php

//the first number

$im = ImageCreate(200, 40); //create image

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

$black = ImageColorAllocate($im, 120, 200, 68);

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

$string = rand(1,10); //the first number

$string2=rand(1,10); //the second number

$string3="$string + $string2";

$verification = $string3;

$thevalue=$string+$string2;

ImageFill($im, 0, 0, $black);

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

Imagejpeg($im, "images/verify.jpeg");

ImageDestroy($im);

print "<form action='action.php' method='post'>";

print "Please enter the answer to the math question below to verify your not an evil bot:<br>";

print "<input type='hidden' value='$thevalue' name='hiddenvalue'>";

print "<input type='text' name='yourcode' size='20'><br>";

print "<img src='images/verify.jpeg' border='0'><br><br>";

print "<input type='submit' name='submit' value='submit'></form>";

?>

The first step is to create the image, the ImageCreate function in php does just that. The 200 and the 40 are the dimensions of the image created. The image created is stored in $img. $white and $black define the text color of the numbers and the background color of the image respectively. In this tutorial, the background color is greenish and the text is black for easy contrast.

Next we set the random seed with the srand function. We do this by time so when we do call the random function, we get a different number each time.

Then we generated two numbers between one and ten with the rand() function and store them in $string and $string2. In $string3, we combine them to make the actual text on the image. $string3 is not actually the sum of the numbers, it is just the text string and is not numeric. $thevalue is the actual sum of the two numbers when they are added. There's no real reason to set $verification equal to $string3 because we can just directly use $string3 but I do it by habit.

Then these lines of code:

Code:

CODE

ImageFill($im, 0, 0, $black);

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

Imagejpeg($im, "images/verify.jpeg");

Fill the image with our defined ours and stores the image into images/verify.jpeg.

Now we have to write the form. Its a pretty basic form. We store the actual value of the answer in the form field 'hidden value', which is a non-visible hidden field. The answer to the math question the user types in is $yourcode. Of couse we have to display images/verify.php so people can actually see what the math question really is.

Now we move to action.php:

Code:

CODE

<?php

if(isset($_POST['submit']))

{

   $yourcode=$_POST['yourcode'];

   $hiddenvalue=$_POST['hiddenvalue'];

   if($yourcode==$hiddenvalue)

   {

       print "Correct, put your content here";

   }

   else

   {

      print "You verification code is not right. Please go back and try again.";

   }

}

?>

This is a very simple file that basically gets the two variables from the two input fields from login.php and compares them to see if they are equal. If they are equal, it goes to the "You are correct" case, if they are not equal, it goes to the "your code is incorrect case". In a real application, you would put your actual content in the "You are correct" case and a redirect back to some other page in the "You are incorrect" case.

It is imperative that you use the proper BBcode when listing a programming language. Copied from source Warning.

Comment/Reply (w/o sign-up)

jeffny01

May 22 2007, 04:36 PM

Hello,
I've been looking for a way to add this type of image validation to a form on my company's website.
I'm kinda new to this type of advanced code, so I don't know how to go about adding the code to the
existing form and there's some things you have in your tutorial that I don't quite understand.

"Now upload an image in there called verify.php and chmod just that image(not the folder) to 777 so
that image can change as our functions generate new images."

How do I create a .php image and what do you mean by "chmod" just that image?

Comment/Reply (w/o sign-up)

erk

Dec 3 2008, 09:15 PM

GREAT TUT, THANKs DUDE. Im going to use this, once i get my hosting setup. ;]

Comment/Reply (w/o sign-up)

galexcd

Dec 4 2008, 07:04 AM

QUOTE (jeffny01 @ May 22 2007, 09:36 AM)

what do you mean by "chmod" just that image?

Chmod is a unix command that changes permissions of files. If the server that your website is on is unix you should be able to ssh into it, and chmod the file to 777. Otherwise you could use ftp to do this, or even write a php file to change the permissions of the file. For example, you could write this in a php file:

CODE

<?php
chmod("verify.php",0777);
?>

upload it to the same directory as verify.php and run it once to change it.

QUOTE (jeffny01 @ May 22 2007, 09:36 AM)

How do I create a .php image

A php image really isn't that much different than a php file. The difference is in the headers that it outputs. For example, at the top of a php file that I want to output an image of type jpeg, I would add this header:

CODE

header("Content-type: image/jpeg");

Then once you have an php image you can use GD library to draw shapes, text, and other images to the canvas to be outputted to the user.

Comment/Reply (w/o sign-up)

Quatrux

Dec 4 2008, 10:23 AM

Looks like a nice scripts, I didn't try if it works, but I can suggest that a better way would be to create a little bit more complex things with math, because you're only using + to get the sum, I would suggest to make a random question of subtraction, multiply too, well I guess the script will be more complex, but it will be a better way to do it, also for fun you could add sqrt() for numbers only 4,16,49 and no more.. That it would be easy for a human to enter the true code..

Comment/Reply (w/o sign-up)

Nabb

Dec 4 2008, 10:38 AM

A bot to bypass this could easily be made, seeing as you have the answer in the source. You would probably have the same level of security if the question was text.

Comment/Reply (w/o sign-up)

ragav.bpl

Jan 5 2009, 01:36 PM

QUOTE (slacware @ Mar 2 2007, 11:35 PM)

This tutorial will show you how to make a basic math CAPTCHA validtion form.

This requires that you have the GD library for PHP installed to work.

This tutorial requires 2 files, login.php and action.php.

The first step is to create a sub-folder to store the temporary images, for the purposes of this tutorial,this folder should be called images. Now upload a image in there called verify.php and chmod just that image(not the folder) to 777 so that image can change as our functions generate new images.

Ok, after you've done that, we can get to the code:

in login.php:

Code:

CODE

<?php

//the first number

$im = ImageCreate(200, 40); //create image

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

$black = ImageColorAllocate($im, 120, 200, 68);

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

$string = rand(1,10); //the first number

$string2=rand(1,10); //the second number

$string3="$string + $string2";

$verification = $string3;

$thevalue=$string+$string2;

ImageFill($im, 0, 0, $black);

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

Imagejpeg($im, "images/verify.jpeg");

ImageDestroy($im);

print "<form action='action.php' method='post'>";

print "Please enter the answer to the math question below to verify your not an evil bot:<br>";

print "<input type='hidden' value='$thevalue' name='hiddenvalue'>";

print "<input type='text' name='yourcode' size='20'><br>";

print "<img src='images/verify.jpeg' border='0'><br><br>";

print "<input type='submit' name='submit' value='submit'></form>";

?>

The first step is to create the image, the ImageCreate function in php does just that. The 200 and the 40 are the dimensions of the image created. The image created is stored in $img. $white and $black define the text color of the numbers and the background color of the image respectively. In this tutorial, the background color is greenish and the text is black for easy contrast.

Next we set the random seed with the srand function. We do this by time so when we do call the random function, we get a different number each time.

Then we generated two numbers between one and ten with the rand() function and store them in $string and $string2. In $string3, we combine them to make the actual text on the image. $string3 is not actually the sum of the numbers, it is just the text string and is not numeric. $thevalue is the actual sum of the two numbers when they are added. There's no real reason to set $verification equal to $string3 because we can just directly use $string3 but I do it by habit.

Then these lines of code:

Code:

CODE

ImageFill($im, 0, 0, $black);

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

Imagejpeg($im, "images/verify.jpeg");

Fill the image with our defined ours and stores the image into images/verify.jpeg.

Now we have to write the form. Its a pretty basic form. We store the actual value of the answer in the form field 'hidden value', which is a non-visible hidden field. The answer to the math question the user types in is $yourcode. Of couse we have to display images/verify.php so people can actually see what the math question really is.

Now we move to action.php:

Code:

CODE

<?php

if(isset($_POST['submit']))

{

    $yourcode=$_POST['yourcode'];

    $hiddenvalue=$_POST['hiddenvalue'];

    if($yourcode==$hiddenvalue)

    {

        print "Correct, put your content here";

    }

    else

    {

       print "You verification code is not right. Please go back and try again.";

    }

}

?>

This is a very simple file that basically gets the two variables from the two input fields from login.php and compares them to see if they are equal. If they are equal, it goes to the "You are correct" case, if they are not equal, it goes to the "your code is incorrect case". In a real application, you would put your actual content in the "You are correct" case and a redirect back to some other page in the "You are incorrect" case.

It is imperative that you use the proper BBcode when listing a programming language. Copied from source Warning.

Actually i appreciate your work dude and i am shortly going to launch my new website where i am going to use many of the scripts which are very antique.
I mean i am not going to use any script which is already very famous and is used by thousands of member across web. I am searching for many of these type of scripts. I would be glad to have some more scripts like this one.
Thankyou....

Comment/Reply (w/o sign-up)

rpgsearcherz

Jan 5 2009, 06:30 PM

Very, very nice system set up here.

It really seems so easy too,lol.

I hope you don't mind but I plan on using this to dissect and learn more about php and how it works. It seems to hit on a lot of the parts of the language(generation, comparison, etc.) so it should be helpful to me.

Thanks for it,

.

Comment/Reply (w/o sign-up)

Mordent

Jan 6 2009, 06:43 PM

I'd have to say that the script seems pretty nice. Shame it wasn't their own creation, but ah well. Anyway, I'll admit to being completely unaware that PHP could be used to create images prior to reading this. Well...I was "aware" in the context that I'd seen image validation before, but not "aware" as in seeing how simple it appears to do. Actually a pretty handy thread, considering I've been trying to find ways to manipulate images in a consistent way (adding an icon to the top left), and this could have pointed me in the right direction. Cheers.

Comment/Reply (w/o sign-up)

Pankyy

Feb 7 2009, 05:54 AM

To avoid bots reaching the real captcha code ( or at least make it harder for them ) you have to use the php function to create a gif from an image and the numbers you used. It isn't foolproof, but a common bot won't be able to go through it.

Comment/Reply (w/o sign-up)