How to create CAPTCHA image verification in PHP and jQuery

How to create CAPTCHA image verification in PHP and jQuery

{ 3 Comments }

inShare

Captcha is the simple verification on your web forms that the user is a human or a computer. Its used to prevent spammerson your website. If you use captcha on your web forms its hard for spam bots to submit data to web site. The reason to write this tutorial is to demonstrate how to create captcha image in your application using PHP and jQuery.

DOWNLOAD CODEDEMO

We have used Fonts to generate text and create a random alpha-numeric word with background texture to prevent OCR readers. Used GD library to generate images.

index.php

File contains PHP code to load captcha image and text box to input visible word.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<?php // Session start must be the first line, whether you include it or not :) session_start(); if(empty($_POST)) {     echo '<script type="text/javascript" src="jquery-1.8.0.min.js"></script>    <script type="text/javascript"> $(document).ready(function(){ $("#new").click(function() { $("#captcha").attr("src", "captcha.php?"+Math.random()); });     }); </script> <form method="post" action="index.php"> <span style="float: left;margin-top: 7px;margin-right:10px;">CAPTCHA Code:</span> <img src="captcha.php" border="0" alt="CAPTCHA!" id="captcha"><a href="#new" id="new"><img src="reload.png" style="width: 35px;margin-left:10px;" /></a> <br /> Enter CAPTCHA: <input type="text" name="key" value="" /> <br /><br /> <input type="submit" value=" Verify Captcha " /> </form>'; } else {     if(strlen($_SESSION['key']) && $_POST['key'] == $_SESSION['key'])     {         echo "Captcha Verified!!!";     }     else     {         echo "Invalid Captcha.... <a href='index.php'>try again</a>";     } } ?>

HTML is mixed to show image and input box and accept post data on the same page to verify. Create session of given captcha word once you submit that word it check that word with saved session word. Include jQuery library to reload captcha image onClick event $(“#captcha”).attr(“src”, “captcha.php?”+Math.random()); this line change src of visible image captcha.php generate captcha image every time it generate random word.

1	if(strlen($_SESSION['key']) && $_POST['key'] == $_SESSION['key'])

Check submitted word if match then show valid else invalid.

captcha.php

File contains PHP Code to generate captcha image.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95

<?php session_start();   class CaptchaSecurityImages {   /* select the type of font, must be used in directoy in which script is being called into */   var $font = 'CALIBRI.TTF';     function generateCode($characters) {     $possible = '23456789ABCDEFGHJKLMNPQRSTUVWXYZ';     $possible = $possible.$possible.'2345678923456789';     $code = '';     $i = 0;     while ($i < $characters) {         $code .= substr($possible, mt_rand(0, strlen($possible)-1), 1);       $i++;     }     return $code;   }     function CaptchaSecurityImages($width = 145,$height = 35, $characters = 6) {     $code = $this->generateCode($characters);     $font_size = $height * 0.60;     $image = @imagecreate($width, $height) or die('Cannot initialize new GD image stream');       /* set the colours */     $bgR = mt_rand(0, 255); $bgG = mt_rand(0, 255); $bgB = mt_rand(0, 255);     $background_color = imagecolorallocate($image, $bgR, $bgG, $bgB);     $noise_color = imagecolorallocate($image, abs(100 - $bgR), abs(100 - $bgG), abs(100 - $bgB));     $text_color = imagecolorallocate($image, abs(255 - $bgR), abs(255 - $bgG), abs(255 - $bgB));       /* generate random dots in background */     for($i = 0; $i < ($width*$height) / 3; $i++) {       imagefilledellipse($image, mt_rand(0,$width), mt_rand(0,$height), 1, 1, $noise_color);     }       /* generate random lines in background */     for($i = 0; $i < ($width*$height) / 150; $i++) {       imageline($image, mt_rand(0,$width), mt_rand(0,$height), mt_rand(0,$width), mt_rand(0,$height), $noise_color);     }       /* set random colors */     $w = imagecolorallocate($image, abs(100 - $bgR), abs(100 - $bgG), abs(100 - $bgB));     $r = imagecolorallocate($image, abs(100 - $bgR), abs(100 - $bgG), abs(100 - $bgB));       /* Draw a dashed line, 5 red pixels, 5 white pixels */     $style = array($r, $r, $r, $r, $r, $w, $w, $w, $w, $w);     imagesetstyle($image, $style);     imageline($image, 0, 0, $width, $height, IMG_COLOR_STYLED);     imageline($image, $width, 0, 0, $height, IMG_COLOR_STYLED);       /* create random polygon points */     $values = array(         mt_rand(0, $width), mt_rand(0, $height),         mt_rand(0, $height), mt_rand(0, $width),         mt_rand(0, $width), mt_rand(0, $height),         mt_rand(0, $height), mt_rand(0, $width),         mt_rand(0, $width), mt_rand(0, $height),         mt_rand(0, $height), mt_rand(0, $width),         mt_rand(0, $width), mt_rand(0, $height),         mt_rand(0, $height), mt_rand(0, $width),         mt_rand(0, $width), mt_rand(0, $height),         mt_rand(0, $height), mt_rand(0, $width),         mt_rand(0, $width), mt_rand(0, $height),         mt_rand(0, $height), mt_rand(0, $width),);       /* create Random Colors then set it to $clr */     $r = abs(100 - mt_rand(0, 255));     $g = abs(100 - mt_rand(0, 255));     $b = abs(100 - mt_rand(0, 255));     $clr = imagecolorallocate($image, $r, $g, $b);       /* create filled polygon with random points */     imagefilledpolygon($image, $values, 6, $clr);       $textbox = imagettfbbox($font_size, 0, $this->font, $code) or die('Error in imagettfbbox function');     $x = ($width - $textbox[4])/2;     $y = ($height - $textbox[5])/2;     imagettftext($image, $font_size, 0, $x, $y, $text_color, $this->font , $code) or die('Error in imagettftext function');       /* pretty it */     imageantialias($image, 100);     imagealphablending($image, 1);     imagelayereffect($image, IMG_EFFECT_OVERLAY);       /* output captcha image to browser */     header('Content-Type: image/jpeg');     imagejpeg($image);     imagedestroy($image);     $_SESSION['key'] = $code;   } }   $captcha = new CaptchaSecurityImages(145, 35, rand(4, 6));   ?>

This file create image with random string and show in png format on form $captcha = new CaptchaSecurityImages(145, 35, rand(4, 6)); width and height given with random number of latter here we select 4,6 it randomly show 4-6 latter captcha.

Hope you found this tutorial helpful please comment your views and problem faced in configuration.