captcha code in php with javascript

 

INTRODUCTION OF CAPTCHA CODE

 Presently, living has changed the dimension with the introduction of the Internet to mankind, ways people connect to each other, advertising, shopping, education, etc. Consequently, system security has become the most important issue for any websites since there are many methods used to intrude the system over the internet. People have developed techniques, systems, programs and software systems that can replace a normal human being to do a job; such kinds of jobs include entering of data into systems, generate data automatically, handling events that occur on or within a system. As a matter of fact, web sites must ensure that the services are supplied to legitimate human users rather than bots to prevent service abuse. To thwart automated attacks, services often ask users to solve a puzzle before being given access to a service. Human Interactive Proofs (HIPs), focus on automation tests that virtually all humans can pass but current computer programs fail. Completely Automated Public Turing test to tell Computers and Humans Apart (CAPTCHA) was an acronym that was coined in 2000. It is a type of challenge-response test that only a human completes successfully

CAPTCHAs are designed to be simple problems that can be quickly solved by humans, but are difficult for computers to solve. Using Captchas, services can distinguish legitimate users from computer bots while requiring minimal effort by the human user . In the procedure, a computer or a program creates a test for its user, who is expected to be a human. The test is meant for the humans, that is, it is to be solvable only by humans and not any other machine, system or program. The user is required to provide a correct response to the test and then the user is permitted to access the work. When a correct response is received, it is presumed that the response arrived because of a human user. CAPTCHA techniques have been classified into four categories: - Text based Captcha. - Audio based Captcha. - Image based Captcha. - Video based Captcha. Each type is suitable to serve different group of users.

CAPTCHA is an acronym for Completely Automated Public Turing test to tell Computers and Humans apart. CAPTCHA systems are used as a security mechanism in web applications. Text-Based CAPTCHA is the most widely used CAPTCHA. Due to the wide popularity the text-based CAPTCHAs are more vulnerable to attacks. Hence there is an immense need to improve the strength of the text-based CAPTCHA to hinder many of such breaking attacks. This paper proposes a simple text based CAPTCHA approach that thwarts many of the breaking attacks and provides reliable and usable way to distinguish between humans and computers.

create simple captcha code in php with javascript validation

in this post i will show you step by step how to create captcha code in php using java script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">

var code;

function createCaptcha() {

  //clear the contents of captcha div first 

  document.getElementById('captcha').innerHTML = "";

  var charsArray =

  "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

  var lengthOtp = 4;

  var captcha = [];

  for (var i = 0; i < lengthOtp; i++) {

    //below code will not allow Repetition of Characters

    var index = Math.floor(Math.random() * charsArray.length + 1); //get the next character from the array

    if (captcha.indexOf(charsArray[index]) == -1)

      captcha.push(charsArray[index]);

    else i--;

  }

  var canv = document.createElement("canvas");

  canv.id = "captcha";

  canv.width = 100;

  canv.height = 50;

  var ctx = canv.getContext("2d");

  ctx.font = "25px Georgia";

  ctx.strokeText(captcha.join(""), 0, 30);

  //storing captcha so that can validate you can save it somewhere else according to your specific requirements

  code = captcha.join("");

  document.getElementById("captcha").appendChild(canv); // adds the canvas to the body element

}

function validateCaptcha() {

  event.preventDefault();

  debugger

  if (document.getElementById("cpatchaTextBox").value == code) {

    // alert("Valid Captcha")

  }else{

    alert("Invalid Captcha. try Again");

    createCaptcha();

    $(".cap").val(null);

  }

}

</script>

<body onload="createCaptcha()">

<form accept-charset="UTF-8" action="profile.php" method="POST">

<div id="captcha"></div>

<input type="text" class="cap" placeholder="Captcha" id="cpatchaTextBox" onchange="validateCaptcha()" required/>

<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">

</form>

</body>