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

Please follow and like us:

3 thoughts on “How to create custom captcha using php with ajax”

oprol evorter says:

December 25, 2019 at 3:34 am

My programmer is trying to persuade me to move to .net from PHP. I have always disliked the idea because of the costs. But he’s tryiong none the less. I’ve been using WordPress on a number of websites for about a year and am anxious about switching to another platform. I have heard good things about blogengine.net. Is there a way I can import all my wordpress content into it? Any help would be greatly appreciated!

SEO SERVICES says:

January 22, 2020 at 9:07 pm

I think this is a real great blog post.Thanks Again. Awesome.

smoretraiolit says:

April 13, 2020 at 11:36 pm

Perfect work you have done, this web site is really cool with excellent information.

3 thoughts on “How to create custom captcha using php with ajax”

Leave a Reply Cancel reply