How to create custom captcha using php with ajax
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
|
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 |
<?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
|
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 |
<!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> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?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.
One thought on “How to create custom captcha using php with ajax”
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!