前言
验证码本质是一种区分真实用户和僵尸程序的一种图灵测试。一些黑客会利用机器技术在某些业务应用中进行刷票（多次点击投票）、发广告、窃取客户密码等恶意操作，企业应用通过验证码确定操作者身份为真实用户，才允许进行下一步操作。具体来说，在注册、发帖、发评论、投票、提交密码前添加验证码，可以防止批量注册、发广告、刷票和破解密码等恶意操作。
滑块验证码是验证码的一种，是由图片验证码衍生后的产物。由于滑块验证码安全性更高，趣味性更强，所以多数网站或APP都选择了滑块验证码。比如说之前的b站。
滑块验证码实现原理
那么滑块验证码的原理是什么呢？为什么拖拽到拼图处，就能判断出是人为操作还是机器人呢？
其实滑块验证码，不仅仅只是完成拼图，前端用户看不见的是——验证码后台针对用户产生的行为轨迹数据进行机器学习建模，结合访问频率、地理位置、历史记录等多个维度信息，快速、准确的返回人机判定结果，故而机器识别+模拟不易通过。
前端实现
滑块验证需要前后端配合，本文就讲一下前端如何用canvas实现。
一、画拼图
1.1 画拼图背景
每次的拼图照片都是随机产生的，由后端提供
//index.tsx
<div className="sliderContent">
<div className="imgDev" style={{width:`${store.width}px`}}>
<canvas id={store.id} width={store.width} height={store.height}></canvas>
</div>
</div>
//index.store.ts
width=500
height=500
loadImage=()=> {//加载图片
let mainDom :any= document.getElementById(this.id);
let bg = mainDom.getContext("2d");
let imgSrc = this.imgSrc;
let img = document.createElement("img");
img.src = imgSrc;
img.onload = () => {
mainDom.height = (img.height / img.width) * mainDom.width;
bg.drawImage(img, 0, 0, mainDom.width, mainDom.height);
};
}
drawImage() 方法在画布上绘制图像、画布或视频。
1.2画拼图缺口
拼图缺口的x,y坐标用random方法随机产生
r = 10;//半圆的半径
w = 60; //滑块的宽度
let x = this.random(85, width - w - r - 2); //保证缺口完全展示，不会隐藏
let y = this.random(16, height - w - r - 2);
this.x = x;
this.y = y;
//绘制
ctx.lineWidth = 1;
ctx.strokeStyle='white'
ctx.beginPath();
ctx.moveTo(x, y);
//top
ctx.arc(x + w / 2, y, r, -PI, 0, true);
ctx.lineTo(x + w , y);
//right
ctx.arc(x + w , y + w / 2, r, 1.5 * PI, 0.5 * PI, false);
ctx.lineTo(x + w , y + w);
//bottom
ctx.arc(x + w/ 2, y + w, r, 0, PI, false);
ctx.lineTo(x, y + w);
//left
ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true);
ctx.lineTo(x, y);
ctx.stroke();
ctx.fillStyle = "rgba(0, 0, 0, 0.4)"; //设置背景颜色
ctx.fill();
二、画拼图滑块
画完拼图，接下来要画滑块。这里需要用到第二个canvas，利用绝对定位使两个canva位置重合
2.1画相同形状的滑块
//index.tsx
<div className="sliderContent3">
<div className="imgDev" style={{width:`${store.width}px`,height:`${store.height}px`}}>
{/* <canvas id={store.id} width={store.width} height={store.height}></canvas> */}
<canvas className="slider" id={`${store.id}sliderBlock`} width={store.width} height={store.height} style={{left:`${store.sliderLeft}px`}}></canvas>
</div>
</div>
//index.store.ts
let x = sliderLeft;
let y = this.y
let PI = Math.PI;
ctx.lineWidth = 1;
//绘制
ctx.beginPath();
//left
ctx.moveTo(x, y);
//top
ctx.arc(x + w / 2, y, r, -PI, 0, true);
ctx.lineTo(x + w , y);
//right
ctx.arc(x + w , y + w / 2, r, 1.5 * PI, 0.5 * PI, false);
ctx.lineTo(x + w , y + w);
//bottom
ctx.arc(x + w / 2, y + w, r, 0, PI, false);
ctx.lineTo(x, y + w);
//left
ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true);
ctx.lineTo(x, y);
ctx.shadowBlur = 10;
ctx.shadowColor = "black";
ctx.stroke();
2.1填充滑块
保证滑块和拼图缺口的图案相同
ctx.clip()
ctx.drawImage(img, -this.x+this.sliderLeft, 0, width, height);
clip() 方法从原始画布中剪切任意形状和尺寸。
一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
image.png
三、实现滑动解锁
增加操作条的dom到页面上，给按钮绑定onMouseDown事件
@action
moveBall = (e: any) => {
var oldx = e.pageX;
let dom = <HTMLElement>document.getElementsByClassName('moveSlider')[0]
dom.onmousemove = action((e) => {
var x = e.pageX;
if (this.sliderLeft + x - oldx <= 0) {//这里判断左边界
this.sliderLeft = 1;
} else if (this.sliderLeft + x - oldx >= this.width - this.r * 2 - this.w) {//这里判断右边界
this.sliderLeft = this.width - this.r * 2 - this.w;
} else {
this.sliderLeft += x - oldx;
}
oldx = x;
});
this.leaveBall();
}
@action
leaveBall = () => {//鼠标松开的时候清空状态
document.onmouseup = action(() => {
dom.onmousemove = null;
if (this.sliderLeft < (this.x + this.rangeValue) && this.sliderLeft > (this.x - this.rangeValue)) {
alert("恭喜你成功了")
} else {//当没用选中的时候重置一下滑块的位置
this.sliderLeft = 1;
}
});
}
总结
这就实现了简单的前端效果，实际操作中前端需要与后端通信，由后端进行验证返回结果。但其实滑块验证也不够安全，很容易模拟绕过，所以现在的b站也换成了中文验证码。
