PHP RECAPTCHA script using iframe
Captcha image verification method is the most popular and effective method to prevent spamming. A recaptcha script is one where verification image of captcha script can be reloaded or refreshed by the user. So when user is confused or can't read clearly the image text he or she has the option to reload image to get a new image. This method not only helps user, it also give extra level of security in preventing spamming.
An iframe object probably gives the easiest solution in developing recaptcha script. In this method an iframe object holding the captcha image is placed over the main document. Whenever users require refreshing the image, only the document inside the iframe getting refreshed producing a new verification image while the main window remains unchanged. Thus to develop a recaptcha script with the help of an iframe we need the following objects.
- A PHP script which will generate captcha image;
- A PHP or HTML document holding that captcha image.
PHP captcha image script
As the modern OCR software are very smart in detecting text from image so it is necessary to generate more complex captcha image to make it unreadable for those software. Few common methods used by the web developers to mislead them are,
- Adding small amount of noise in captcha image;
- Adding background pattern image;
- Adding shadow to the image text;
- slightly bending the image text by 3 to 10 degree with horizontal;
I write a captcha image generator script below. This script generates JPEG image of two random words of character length 9. The code of this script is very easily understandable and you can edit according to your requirement. You can download and save that code in a PHP file as 'img.php'.
function random_text($length='')
{
$str='abcdefghijkmnpqrstuvwxyz23456789';
$random='';
if(empty($length)){$length=rand(3,6);}
for($i=0; $i<$length; $i++){$random.=$str{rand(0,strlen($str)-1)};}
return $random;
}
function verification_code($session_name)
{
$x=random_text();
$y=random_text(9-strlen($x));
$random=$x.' '.$y;
$_SESSION[$session_name]=md5($random);
return array($x,$y);
}
function generate_image($s)
{
$width=160;
$height=60;
$font = 'arialbi.ttf';
$text_size=16;
$left_margin=5;
$top_margin=5;
$background_jpg='';
$shadow_width=2;
$background_color=rand(200,255);
$text_colorbase=rand(50,100);
$shadow_color=rand(128,150);
$text_angle=rand(-10,10);
header('Content-type: image/jpg');
$im=@imagecreatefromjpeg($background_jpg);
if(!$im){
$im = imagecreatetruecolor($width, $height);
$background_color=imagecolorallocate($im, $background_color, $background_color, $background_color);
imagefilledrectangle($im, 0, 0, $width, $height, $background_color);
}
$text_color=imagecolorallocate($im, $text_colorbase,$text_colorbase,$text_colorbase);
$shadow_color=imagecolorallocate($im, $shadow_color, $shadow_color, $shadow_color);
$text=verification_code($s);
$size=imagettfbbox($text_size,(-1)*$text_angle,$font,$text[0]);
$x=($size[6]>$size[0])? $size[6]-$size[0] : 0;
$y=(($size[1]>$size[3])? $size[1]:$size[3])-(($size[7]>$size[5])? $size[5]:$size[7]);
$w=(($size[2]>$size[4])? $size[4] : $size[2])-(($size[6]>$size[0])? $size[0] : $size[6]);
$left=$left_margin+$x;
$top=$top_margin+$y;
imagettftext($im, $text_size, (-1)*$text_angle, $left+$shadow_width, $top+$shadow_width, $shadow_color, $font, $text[0]);
imagettftext($im, $text_size, (-1)*$text_angle, $left, $top, $text_color, $font, $text[0]);
$size=imagettfbbox($text_size,$text_angle,$font,$text[1]);
$y=(($size[1]>$size[3])? $size[1]:$size[3])-(($size[7]>$size[5])? $size[5]:$size[7]);
$top=$top_margin+$y;
imagettftext($im, $text_size, $text_angle, $left+$shadow_width+$w+10, $top+$shadow_width, $shadow_color, $font, $text[1]);
imagettftext($im, $text_size, $text_angle, $left+$w+10, $top, $text_color, $font, $text[1]);
add_noise($im,$width,$height,$text_colorbase,50);
imagejpeg($im);
imagedestroy($im);
}
function add_noise(&$im,$w,$h,$c,$n)
{
$color=imagecolorallocate($im, $c,$c,$c);
for($m=0;$m<$n;$m++){
$x1=rand(0,$w);
$x2=$x1+2;
$y1=rand(0,$h);
$y2=$y1+2;
imagefilledrectangle($im,$x1,$y1,$x2,$y2,$color);}
}
session_start();
generate_image('captcha');
?>
Now we shall design the code holding that JPEG image from file 'img.php'. In desiging this page we must be careful that user can't open this page by direct typing of its URL. Please download and save that code in another PHP file as 'captcha.php'.
<script type="text/javascript">
if (top.frames.length==0){top.location='http://localhost';}
</script>
<html><body style="margin:0;padding:0;">
<img style="margin:0;padding:0;border:none;float:left;clear:left;" src="img.php" />
</body></html>
Carefully look over the above code, the JavaScript code used at the top of the page actually detecting the frame and if not found it will be redirected to your home page.
Adding iframe
To use this recaptcha script you have to add an iframe object holding the recaptcha image to your main document where you want to display it. Insert the following line of code to get the recaptcha script working.
<script type="text/javascript">
<!--
function reloadImage(){document.getElementById('captcha_frame').contentWindow.location.reload(true);}
-->
</script>
<iframe id="captcha_frame" frameborder="0" SCROLLING="NO" src="captcha.php" style="margin:0;padding:0;width:160px;height:60px;border:1px solid #a0a0a0;"></iframe>
<img title="Reload image" style="cursor:pointer;margin:0;padding:0;border:1px solid #a0a0a0;" src="reload.gif" alt="Reload" onclick="javascript:reloadImage()" />
In the above code the purpose of JavaScript function relodeImage() is to reload the iframe document, i.e. to refresh the captcha image.
View demo
