What does the graphic verification code do:
It can prevent: malicious password cracking, ticket fraud, forum flooding, and effectively prevent a hacker from continuously trying to log in to a specific registered user using a specific program to violently crack.
Verification codes generally prevent batch registration, which is difficult for the human eye, let alone a machine. Many websites use verification code technology to prevent users from using robots to automatically register, log in, and spam. The so-called verification code is to generate a picture from a series of randomly generated numbers or symbols, and add some interference to the picture.
For example, randomly draw a few straight lines and draw some dots (to prevent OCR). The user can identify the verification code information with the naked eye, enter the form and submit it for website verification. Only after successful verification can a certain function be used.
How to implement graphic verification code
principle:
1. Create canvas element and set parameters such as width and height
2. Draw complex background and foreground noise interference lines on the canvas to increase the difficulty of identification.
3. Randomly generate numbers/letters and draw text by rotating, moving, and deforming
4. After the drawing is completed, save the generated verification code in the code attribute of the instance
5. The user enters the verification code and compares it with the value in the code attribute for verification.
6. If verification fails, the verification code graphic and code value will be regenerated.
Specifically, the main steps are:
- Set canvas parameters during initialization and define text character array
- The refresh method is used to generate verification code graphics - draw background color and rectangular box
- - Randomly generate text, set style and rotate to draw
- - Draw interference lines and noise
- The validate method is used to compare the value entered by the user and the verification code
- The security of calling refresh to regenerate the verification code graphic captcha lies in the background interference lines, noise points and distortion of the text, making it impossible for the machine to accurately recognize the text. At the same time, the value of the verification code is stored in the memory and is not stored in the database. It is cleared after verification, ensuring that it is a new verification code every time. This is the basic process and principle of a typical front-end graphic verification code implementation. The verification code style, text, length, etc. can be customized as needed.
Code:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形验证码</title>
</head>
<style>
#app{
margin-top: 160px;
width: 500px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid pink;
}
#my_body{
width: 200px;
display: flex;
align-items: center;
justify-content: space-between;
}
#code_input{
width: 120px;
height: 20px;
line-height: 20px;
}
#code_input:focus {
outline: 0;
}
#my_button{
width: 50px;
height: 24px;
}
#v_container{
margin-bottom: 50px;
width: 200px;
height: 50px;
}
</style>
<body>
<div id="app">
<div id="v_container" ></div>
<div id="my_body">
<input type="text" id="code_input" value="" placeholder="请输入验证码"/>
<button id="my_button">验证</button>
</div>
</div>
</body>
<script src="gVerify.js"></script>
<script>
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function(){
var res = verifyCode.validate(document.getElementById("code_input").value);
if(res){
alert("验证正确");
}else{
alert("验证码错误");
}
}
</script>
</html>js
!(function(window, document) {
function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数
this.options = { //默认options参数值
id: "", //容器Id
canvasId: "verifyCanvas", //canvas的ID
width: "100", //默认canvas宽度
height: "30", //默认canvas高度
type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
code: ""
}
if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型
for(var i in options) { //根据传入的参数，修改默认参数值
this.options[i] = options[i];
}
}else{
this.options.id = options;
}
this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
this.options.letterArr = getAllLetter();
this._init();
this.refresh();
}
GVerify.prototype = {
/**版本号**/
version: '1.0.0',
/**初始化方法**/
_init: function() {
var con = document.getElementById(this.options.id);
var canvas = document.createElement("canvas");
this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
canvas.id = this.options.canvasId;
canvas.width = this.options.width;
canvas.height = this.options.height;
canvas.style.cursor = "pointer";
canvas.innerHTML = "您的浏览器版本不支持canvas";
con.appendChild(canvas);
var parent = this;
canvas.onclick = function(){
parent.refresh();
}
},
/**生成验证码**/
refresh: function() {
this.options.code = "";
var canvas = document.getElementById(this.options.canvasId);
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
}else{
return;
}
ctx.textBaseline = "middle";
ctx.fillStyle = randomColor(180, 240);
ctx.fillRect(0, 0, this.options.width, this.options.height);
if(this.options.type == "blend") { //判断验证码类型
var txtArr = this.options.numArr.concat(this.options.letterArr);
} else if(this.options.type == "number") {
var txtArr = this.options.numArr;
} else {
var txtArr = this.options.letterArr;
}
for(var i = 1; i <= 4; i++) {
var txt = txtArr[randomNum(0, txtArr.length)];
this.options.code += txt;
ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小
ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
ctx.shadowOffsetX = randomNum(-3, 3);
ctx.shadowOffsetY = randomNum(-3, 3);
ctx.shadowBlur = randomNum(-3, 3);
ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
var x = this.options.width / 5 * i;
var y = this.options.height / 2;
var deg = randomNum(-30, 30);
/**设置旋转角度和坐标原点**/
ctx.translate(x, y);
ctx.rotate(deg * Math.PI / 180);
ctx.fillText(txt, 0, 0);
/**恢复旋转角度和坐标原点**/
ctx.rotate(-deg * Math.PI / 180);
ctx.translate(-x, -y);
}
/**绘制干扰线**/
for(var i = 0; i < 4; i++) {
ctx.strokeStyle = randomColor(40, 180);
ctx.beginPath();
ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.stroke();
}
/**绘制干扰点**/
for(var i = 0; i < this.options.width/4; i++) {
ctx.fillStyle = randomColor(0, 255);
ctx.beginPath();
ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
ctx.fill();
}
},
/**验证验证码**/
validate: function(code){
var code = code.toLowerCase();
var v_code = this.options.code.toLowerCase();
console.log(v_code);
if(code == v_code){
return true;
}else{
this.refresh();
return false;
}
}
}
/**生成字母数组**/
function getAllLetter() {
var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
return letterStr.split(",");
}
/**生成一个随机数**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**生成一个随机色**/
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
window.GVerify = GVerify;
})(window, document);Effect:
