How to create custom captcha using php with ajax

May 1, 2019 XpertPhp Comments 3 comments

We will learn how to create custom captcha using PHP with ajax. normally captcha is used for security purpose and only human users can pass through. computers or bots are not solving a captcha. so we will learn about captcha that how to create captcha in PHP.

We will create a jpeg image and add that image on font-family, font-color, and font-size. in last we will pass the random character in the jpg image to create jpg image. so whenever we will refresh the page that time generates new captcha code. you can see below code.

captcha.php

<?php 
	session_start();
	$img=imagecreate(185,50);
	
	$green=imagecolorallocate($img,0,200,0);
	$gray=imagecolorallocate($img,230,230,230);
	$gray1=imagecolorallocate($img,150,150,150);
	
	imagefill($img,0,0,$gray);
	imageline($img,3,3,7,23,$gray);
	
	$str='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
	
	$ver="";
	
	for($i=1;$i<=6;$i++)
	{
		$ver=$ver.substr($str,rand(0,61),1);
	}
	
	$font="captcha.ttf";
	$_SESSION['cap']=$ver;
	
	imagettftext($img,30,2,25,40,$green,$font,$ver);
	
	header("content-type:image/jpeg");
	
	imagejpeg($img);
		
	imagedestroy($img);
?>

<?php

session_start();

$img=imagecreate(185,50);

$green=imagecolorallocate($img,0,200,0);

$gray=imagecolorallocate($img,230,230,230);

$gray1=imagecolorallocate($img,150,150,150);

imagefill($img,0,0,$gray);

imageline($img,3,3,7,23,$gray);

$str='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

$ver="";

for($i=1;$i<=6;$i++)

{

$ver=$ver.substr($str,rand(0,61),1);

}

$font="captcha.ttf";

$_SESSION['cap']=$ver;

imagettftext($img,30,2,25,40,$green,$font,$ver);

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

imagejpeg($img);

imagedestroy($img);

Now, we will create a form using bootstrap and pass the “captcha.php” file in the image src attribute. so captcha image will be shown. we will use the ajax on click button and pass the captcha code. you can see below code.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>How to create custom captcha using php with ajax</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function() {
	   $(".btnSubmit").click(function(e){	
		  var ver = $("#ver").val();
		  var wver = $("#wver").val();
		  $.ajax({
                  type:'POST',
                  url:'match.php',
                  data:{ver:ver, wver:wver},
                  success:function(data){
                    //alert(data.success);
	               $("#error").html(data);
                  }

               });
	  });
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Custom Captcha form using php with ajax</h2>
  <form action="" class="col-lg-4">
	<div class="form-group">
		<span id="error"></span><br>
	</div>
    <div class="form-group">
      <img src="captcha.php" id="captcha">
	  <input type="hidden" id="wver" value="<?php echo $ver;?>">
    </div>
    <div class="form-group">
	  <label for="captcha">Enter The Above Code Here:</label>
	  <input type="text" id="ver" class="form-control">
    </div>
	<input type="button" value="I Accept" class="btn btn-default btnSubmit">
  </form>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>How to create custom captcha using php with ajax</title>

$(document).ready(function() {

$(".btnSubmit").click(function(e){

var ver = $("#ver").val();

var wver = $("#wver").val();

$.ajax({

type:'POST',

url:'match.php',

data:{ver:ver, wver:wver},

success:function(data){

//alert(data.success);

$("#error").html(data);

}

});

</script>

</head>

<body>

<h2>Custom Captcha form using php with ajax</h2>

</div>

</div>

<label for="captcha">Enter The Above Code Here:</label>

</div>

</form>

</div>

</body>

</html>

We will call “match.php” file using ajax and we will check the captcha code is true or false by using session. finally, it will return the true or false message. you can see below code.

match.php

<?php session_start();
	
	$msg=array();
	
	if($_SESSION['cap']!=$_POST['ver'])
	{
		$msg[]="Dont't match word verification";
	}
	
	if(!empty($msg))
	{
		foreach($msg as $k)
		{
		  echo '<font color="red"><li>'.$k.'</font>';
		}
		
	}
	else
	{
	  echo '<font color="Green">Done ! Sucessfully Matched</font><br>';
	}
	
?>

<?php session_start();

$msg=array();

if($_SESSION['cap']!=$_POST['ver'])

{

$msg[]="Dont't match word verification";

}

if(!empty($msg))

{

foreach($msg as $k)

{

echo '<font color="red"><li>'.$k.'</font>';

}

else

{

echo '<font color="Green">Done ! Sucessfully Matched</font><br>';

}

We have shared demo Url. So you can see below Url.

Show Demo