jQuery - js + html 로 구현된 캡챠 인증

캡챠는 기계는 인식할 수 없으나 사람은 쉽게 인식할 수 있는 텍스트, 이미지를 통해 사람과 기계를 구별합니다. 

기존 이미지를 이용하지 않고 js와 html로만 캡챠를 구현할 수 있습니다. 아래는 실제로 적용한 것이며 이미지를 클릭하면 랜덤으로 문자가 바뀝니다.

<style>
.input-val {
  width: 200px;
  height: 32px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
#canvas {
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: pointer;
}
.btn {
  display: block;
  margin-top: 20px;
  height: 32px;
  width: 100px;
  font-size: 16px;
  color: #fff;
  background-color: #457adb;
  border: none;
  border-radius: 50px;
}
</style>

<div class="code">
  <input type="text" value="" placeholder="Please enter the verification code (not case sensitive)" class="input-val">
  <canvas id="canvas" width="100" height="30"></canvas>
  <button class="btn">Submit</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  var show_num = [];
  draw(show_num);
  
  $("#canvas").on('click',function(){
    draw(show_num);
  })
  $(".btn").on('click',function(){
    var val = $(".input-val").val().toLowerCase();
    var num = show_num.join("");
    if(val==''){
      alert('Please enter the verification code!');
    }else if(val == num){
      alert('Submission is successful!');
      $(".input-val").val('');
      // draw(show_num);
      
    }else{
      alert('The verification code is wrong! Please re-enter!');
      $(".input-val").val('');
      // draw(show_num);
    }
  })
})

//Generate and render the verification code graphics
function draw(show_num) {
  var canvas_width=$('#canvas').width();
  var canvas_height=$('#canvas').height();
  var canvas = document.getElementById("canvas");//Get the canvas object, actor
  var context = canvas.getContext("2d");//Get the canvas drawing environment, the stage where the actors perform
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
  var aCode = sCode.split(",");
  var aLength = aCode.length;//Get the length of the array
  
  for (var i = 0; i <4; i++) {//The for loop here can control the digits of the verification code (if you want to display 6 digits, change 4 to 6)
  var j = Math.floor(Math.random() * aLength);//Get a random index value
  // var deg = Math.random() * 30 * Math.PI / 180;//Generate random radians between 0 and 30
  var deg = Math.random()-0.5; //Generate a random radian
  var txt = aCode[j];//Get a random content
  show_num[i] = txt.toLowerCase();
  var x = 10 + i * 20;//The x coordinate of the text on the canvas
  var y = 20 + Math.random() * 8;//The y coordinate of the text on the canvas
  context.font = "bold 23px Microsoft Yahei";
  
  context.translate(x, y);
  context.rotate(deg);
  
  context.fillStyle = randomColor();
  context.fillText(txt, 0, 0);
  
  context.rotate(-deg);
  context.translate(-x, -y);
  }
  for (var i = 0; i <= 5; i++) {//Display lines on the verification code
  context.strokeStyle = randomColor();
  context.beginPath();
  context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
  context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
  context.stroke();
  }
  for (var i = 0; i <= 30; i++) {//A small dot is displayed on the verification code
  context.strokeStyle = randomColor();
  context.beginPath();
  var x = Math.random() * canvas_width;
  var y = Math.random() * canvas_height;
  context.moveTo(x, y);
  context.lineTo(x + 1, y + 1);
  context.stroke();
  }
}

//Get random color values
function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
}
</script>

출처: https://gist.github.com/edwardlorilla/cabd413d922127a55f3cc543393d2ce4