Help with inserting math captcha in registration form

sofia403 · May 24, 2011

Hi, im trying to have a math captcha in my registration form, but having trouble with setting it up in my form. sorry for the large code. If i change the value of $POST['Submit'] to something else like $POST['Submit1'] and then same for the math image captcha then it works, but i would like it to work as part of the form, makes sense? lol right now the form just posts the value and doesnt check for captcha values! if someone could help me out here that would be great! thank you.

<?php
if(isset($POST['Submit'])){
if($POST['Submit'] != $_SESSION['security_number'])
{
$error = "";
}
else
{
$error = "";
}

//NEED TO CHECK IF FIELDS ARE FILLED IN
if( empty($POST['name']) && (empty($POST['email']))){
header("Location:Messages.php?msg=3");
exit();
}
if( empty($POST['pw1']) && (empty($POST['pw2']))){
header( "Location:Messages.php?msg=4" );
exit();
}
$name=$POST['name'];
$email=$POST['email'];

$pw1=$POST['pw1'];
$pw2=$POST['pw2'];

if("$pw1" !== "$pw2" ){
header( "Location:Messages.php?msg=5" );
exit();
}
$ip = $_SERVER['REMOTE_ADDR'];

//connect to the db server , check if uname exist
include('config.php');
$query1=("Select from user where email='$email'");
$result1= mysql_query($query1);
$num1=mysql_num_rows($result1);
if ($num1 > 0) {//Email already been used
header( "Location:Messages.php?msg=11" );
exit();
}else{
$query=("Select from user where uname='$name'");
$result= mysql_query($query);
$num=mysql_num_rows($result);
if ($num > 0) {//Username already exist
header( "Location:Messages.php?msg=6" );
exit();
}else{
//if username does not exist insert user details
$query=( "INSERT INTO user (uname, pw,email,date_joined,ip,level) VALUES ('$name',md5('$pw1'),'$email',NOW(),'$ip','Normal')");
if (@ ($query)) {
header("location:login.php?reg=1");
exit;
}
}
}
mysql_close();
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Registration</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<link href="styleLog.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
function reloadCaptcha()
{
document.getElementById('captcha').src = document.getElementById('captcha').src+ '?' +new Date();
}
</script>
</head>

<body>
<table width="100%" border="0" cellspacing="7" cellpadding="0">
<tr class="temptitle">
<td>New User Registration </td>
</tr>
<tr>
<td>
<form name="form1" action="register.php" method="post">
<table width="657" border="0">
<tr>
<td width="122"><div align="left">Name</div></td>
<td width="525"><input name="name" type="text" size="40"></td>
</tr>
<tr>
<td><div align="left">Email</div></td>
<td><input name="email" type="text" size="40"></td>
</tr>
<tr>
<td><div align="left">Password</div></td>
<td><input name="pw1" type="password" size="40"></td>
</tr>
<tr>
<td ><div align="left">Confirm Password </div></td>
<td><input name="pw2" type="password" size="40"></td>
</tr>
<tr>
<td><img src="math_captcha/image.php" alt="Click to reload image" title="Click to reload image" id="captcha" onclick="javascript:reloadCaptcha()" /></td>
<td><input type="text" name="Submit" value="what's the result?" onclick="this.value=''" /></td>
<td>
</tr>
<tr>
<td></td>
<td> <input name="Submit" type="submit" value="Register"></td>
</tr>
</table>
</form>
<?=$error?>

sneakyimp · May 24, 2011

The idea with captcha is that there is usually a bit of code that creates a captcha image -- a captcha image is an image containing a distorted series of characters which cannot easily be interpreted or recognized by a computer.

the code that creates this image has to store the phrase or characters used in the image so that you can check it somewhere in your code. if you don't bother remembering what chars were used to create the captcha image, then you won't know what to check against your user's input.

the way it should work would be something like this:
1) have your code create a captcha image using some char string and store the char string in a session variable
2) show the user the form that displays the captcha image and whatever else they need to enter to perform the action in question
3) on the page that handles the form submission, check the value entered by the user agaist the char string that you previously stored in session. if they match, perform the action on behalf of the user. if not, show an error message or make them try it again.

sofia403 · May 24, 2011

thanks for reply sneakyimp,

this captcha does work im just not sure how i can integrate with my registration form.

if you use this two scripts below they will work, but i would like to insert captcha in my form. (hich is 3rd script)

INDEX.PHP

<?php
session_start();
if( isset( $POST['secure'] ) )
{
if($POST['secure'] != $_SESSION['security_number'])
{
$error = "OOOK! Here's what you must do: click Start -> Run and write calc.";
}
else
{
$error = "Man, you're good! Your result is correct.";
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP math captcha</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script language="javascript" type="text/javascript">
/ this is just a simple reload; you can safely remove it; remember to remove it from the image too /
function reloadCaptcha()
{
document.getElementById('captcha').src = document.getElementById('captcha').src+ '?' +new Date();
}
</script>
</head>

<h1>PHP Math captcha image</h1>

<strong>Demo</strong>
<form method="post" action="">
    <input type="text" name="secure" value="what's the result?" onclick="this.value=''" />
    <input type="submit" value="am I right?" /><br />
    <span class="explain">click on the image to reload it</span>
    <img src="image.php" alt="Click to reload image" title="Click to reload image" id="captcha" onclick="javascript:reloadCaptcha()" />
</form>
<?=$error?>

</div>

</body>
</html>

IMAGE.PHP

<?php
session_start();

/*===============================================================
	General captcha settings
  ===============================================================*/
// captcha width
$captcha_w = 150;
// captcha height
$captcha_h = 50;
// minimum font size; each operation element changes size
$min_font_size = 12;
// maximum font size
$max_font_size = 18;
// rotation angle
$angle = 20;
// background grid size
$bg_size = 13;
// path to font - needed to display the operation elements
$font_path = 'fonts/courbd.ttf';
// array of possible operators
$operators=array('+','-','*');
// first number random value; keep it lower than $second_num
$first_num = rand(1,5);
// second number random value
$second_num = rand(6,11);

/*===============================================================
	From here on you may leave the code intact unless you want
	or need to make it specific changes. 
  ===============================================================*/

shuffle($operators);
$expression = $second_num.$operators[0].$first_num;
/*
	operation result is stored in $session_var
*/
eval("\$session_var=".$second_num.$operators[0].$first_num.";");
/* 
	save the operation result in session to make verifications
*/
$_SESSION['security_number'] = $session_var;
/*
	start the captcha image
*/
$img = imagecreate( $captcha_w, $captcha_h );
/*
	Some colors. Text is $black, background is $white, grid is $grey
*/
$black = imagecolorallocate($img,0,0,0);
$white = imagecolorallocate($img,255,255,255);
$grey = imagecolorallocate($img,215,215,215);
/*
	make the background white
*/
imagefill( $img, 0, 0, $white );	
/* the background grid lines - vertical lines */
for ($t = $bg_size; $t<$captcha_w; $t+=$bg_size){
	imageline($img, $t, 0, $t, $captcha_h, $grey);
}
/* background grid - horizontal lines */
for ($t = $bg_size; $t<$captcha_h; $t+=$bg_size){
	imageline($img, 0, $t, $captcha_w, $t, $grey);
}

/* 
	this determinates the available space for each operation element 
	it's used to position each element on the image so that they don't overlap
*/
$item_space = $captcha_w/3;

/* first number */
imagettftext(
	$img,
	rand(
		$min_font_size,
		$max_font_size
	),
	rand( -$angle , $angle ),
	rand( 10, $item_space-20 ),
	rand( 25, $captcha_h-25 ),
	$black,
	$font_path,
	$second_num);

/* operator */
imagettftext(
	$img,
	rand(
		$min_font_size,
		$max_font_size
	),
	rand( -$angle, $angle ),
	rand( $item_space, 2*$item_space-20 ),
	rand( 25, $captcha_h-25 ),
	$black,
	$font_path,
	$operators[0]);

/* second number */
imagettftext(
	$img,
	rand(
		$min_font_size,
		$max_font_size
	),
	rand( -$angle, $angle ),
	rand( 2*$item_space, 3*$item_space-20),
	rand( 25, $captcha_h-25 ),
	$black,
	$font_path,
	$first_num);

/* image is .jpg */
header("Content-type:image/jpeg");
/* name is secure.jpg */
header("Content-Disposition:inline ; filename=secure.jpg");
/* output image */
imagejpeg($img);

?>

my registration form REGISTER.PHP

<?php
if(isset($POST['Submit'])){
//NEED TO CHECK IF FIELDS ARE FILLED IN
if( empty($POST['name']) && (empty($POST['email']))){
header("Location:Messages.php?msg=3");
exit();
}
if( empty($POST['pw1']) && (empty($POST['pw2']))){
header( "Location:Messages.php?msg=4" );
exit();
}
$name=$POST['name'];
$email=$_POST['email'];

$pw1=$POST['pw1'];
$pw2=$POST['pw2'];

if("$pw1" !== "$pw2" ){
header( "Location:Messages.php?msg=5" );
exit();
}
$ip = $_SERVER['REMOTE_ADDR'];

//connect to the db server , check if uname exist
include('config.php');
$query1=("Select from user where email='$email'");
$result1= mysql_query($query1);
$num1=mysql_num_rows($result1);
if ($num1 > 0) {//Email already been used
header( "Location:Messages.php?msg=11" );
exit();
}else{
$query=("Select from user where uname='$name'");
$result= mysql_query($query);
$num=mysql_num_rows($result);
if ($num > 0) {//Username already exist
header( "Location:Messages.php?msg=6" );
exit();
}else{
//if username does not exist insert user details
$query=( "INSERT INTO user (uname, pw,email,date_joined,ip,level) VALUES ('$name','$pw1','$email',NOW(),'$ip','Normal')");
if (@ ($query)) {
header("location:login.php?reg=1");
exit;
}
}
}
mysql_close();
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Registration</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<link href="styleLog.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100%" border="0" cellspacing="7" cellpadding="0">
<tr class="temptitle">
<td>New User Registration </td>
</tr>
<tr>
<td>
<form name="form1" action="register.php" method="post">
<table width="657" border="0">
<tr>
<td width="122"><div align="left">Name</div></td>
<td width="525"><input name="name" type="text" size="40"></td>
</tr>
<tr>
<td><div align="left">Email</div></td>
<td><input name="email" type="text" size="40"></td>
</tr>
<tr>
<td><div align="left">Password</div></td>
<td><input name="pw1" type="password" size="40"></td>
</tr>
<tr>
<td ><div align="left">Confirm Password </div></td>
<td><input name="pw2" type="password" size="40"></td>
</tr>
<tr>
<td></td>
<td> <input name="Submit" type="submit" value="Register"></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>

sneakyimp · May 24, 2011

It really sucks to try and read your code when you don't use the code formatting tags. Please learn how to do so.

I see that you are using some kind of javascript function to create your captcha images. Unless I'm mistaken, this javascript uses the PHP script IMAGE.PHP to create the captcha image. Note the line in that script that looks like this:

$_SESSION['security_number'] = $session_var;

This means that every time a particular user accesses the file IMAGE.PHP (for example, if they refresh the captcha image) then this stores a value in $_SESSION var. This is important because $_SESSION vars are how you share values between two different PHP scripts accessed by a given user.

Since your form is using IMAGE.PHP to display the captcha image, this should result in that value being stored in $_SESSION. When someone fills out your form, they need to enter the right captcha code in the text field with name="secure".

then, in the form that handles the form submission, you need to check whatever the user entered in that text field named "secure" against whatever is stored in session.

if( isset( $_POST['secure'] ) ) { // if the user has submitted a text field named "secure"
  if($_POST['secure'] != $_SESSION['security_number']) { // check to see if that value matches the value stored by image.php in $_SESSION
    $error = "OOOK! Here's what you must do: click Start -> Run and write calc.";
  } else {
    $error = "Man, you're good! Your result is correct.";
  }
}

sofia403 · May 24, 2011

hi, sorry about the tags, i will keep it in mind for future posts.

yep javascript is used for reloading the image when you click on it.

and yes thats where im having troubles, if i use that 'secure' in my form then it populates it does math check no problem but doesnt posts my form, i've tried combining my registration form and captcha but always one of them is not working, i just dont know how to make them both to work once i hit submit. agh sorry probably confusing, i know i am, lol

sneakyimp · May 24, 2011

Yes you need to be clearer about what your problem is. This should be pretty simple. Show your form, make sure it has a text input with name="secure" and make sure that it displays your captcha image using image.php. Then, on the form that handles the form submission, make sure you check the "secure" value (either $GET['secure'] or $POST['secure'], depending on your form's method) against the value that image.php stored in $SESSION['security_number']:

if( isset( $_POST['secure'] ) ) { // if the user has submitted a text field named "secure"
  if($_POST['secure'] != $_SESSION['security_number']) { // check to see if that value matches the value stored by image.php in $_SESSION
    $error = "OOOK! Here's what you must do: click Start -> Run and write calc.";
  } else {
    $error = "Man, you're good! Your result is correct.";
  }
}