一个图片点选验证的简单实践

前言：公司陈旧的图片字符验证码太容易被刷，so~~产品发话：换掉，统统~统统都换掉。。。

经过和后端人员的沟通决定，使用恶心的图片点选验证，又不想用第三方，so~~决定自己做一个简单的。。。

总体思路：首先拉取图片，成功load之后，获取需要点击验证的三个文字，记录三次点击的坐标，再根据图片的真实宽高换算成真实坐标，传给后端 ~done！so easy！

下面附上代码：

/**
* module：picCheck
* @require :jquery  因为懒
* 调用方法 picCheck.init($dom,img_api,text_api,check_api) 通过判断picCheck.checked == true 验证是否通过验证
* @param $dom {obj} 初始化的容器
* @param img_api {string} 获取图片api
* @param text_api {string} 获取文字顺序api
* @param check_api {string} 验证api
*/
require(["jquery"],function($){
var picCheck = {
init: function($dom,img_api,text_api,check_api){
var self = this;
var Img = new Image();
var imgWidth = 0,
imgHeight = 0;
Img.src = img_api + "?v=" + new Date()/1 ;
Img.className = "check-img__img";
Img.onload = function(){
imgWidth = this.width;
imgHeight = this.height;
setTimeout(function() {
$.post(text_api,{},function(data){
if (data.code == 0) {
checkDefferd.resolve(data.data);
}else {
checkDefferd.reject(data);
}
},"json")
},300);
};
checkDefferd.done(function(data){
var msg = data.join('" "');
if (self.hasload) {
$dom.find('.check-img').html(Img);
$dom.find('.check-msg').html('>>>请依次点击 "'+msg+'"完成验证>>>')
}else {
$dom.append('
>>>请依次点击 "'+msg+'"完成验证>>>
');
$dom.find('.check-img').html(Img);
self.hasload = true;
}
var i = 0;
var point = [];
$dom.find('.check-img').off('click').on('click',function(e){
i++;
var currentWidth = $(this).width();
var currentHeight = $(this).height();
var offsetX = e.pageX - $(this).offset().left;
var offsetY = e.pageY - $(this).offset().top;
var x = imgWidth*offsetX / currentWidth;
var y = imgHeight*offsetY / currentHeight;
if (i<=3) {
point.push({'x':x,'y':y});
$(this).append('')
}
if (i==3) {
console.log(point);
$.post(check_api,{point},function(da){
if (da.code == 0) {
$dom.find('.check-msg').html('验证成功');
self.checked = true;
}else {
$dom.find('.check-msg').html('验证失败');
setTimeout(function(){
self.init($dom);
},500)
}
},"json")
}
})
})
},
hasload : false,
checked: false,
}
module.exports = picCheck;
})

还需要一段css~~~

.check-img{
    position: relative;
}
.check-img .click-img{
  position: absolute;
  z-index: 2;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAbFBMVEUAAADu9Oru9Oru9Oru9Oru9Oru9Oru9Oru9Oru9Oru9Oru9OoPiOvu9Or///8ajutHpO/y+f7L4+qy1+oTi+svmOtns+tAoOvt9Or4/P+32eo/oO9gsO9brvJntPPr9v0tlut8vvS93vp3u/Q+X1AbAAAADHRSTlMA6V5dCKGY4sQeg2ZN2a5uAAAA00lEQVQY03WR0W6DMAxFAyUJbX1DQ2iAAoNt//+PSxbLYlJ3nqzzYF37qkJz0RVQ6UujTtwsGHsTeW2BEI9hOGIA2itbi/5BzKOHLb7FqyOhe6HN1qBny76HSRkwjfSHcUKjaoST2vw3UUCtNCIJ6+x2ogitKhxEn37L9sM5nzIdqBQwEO1u3sTSACTdpbTezWuxrC2e9OsTfqFMXqKx5nHxYmmFVncOuHztbCng/s85749//yp57Cgb8mOlhinX0D1jmEoNBQPBqBNNnSu2puaKfwDE0BYkXUTIMwAAAABJRU5ErkJggg==");
	width: 20px;
	height: 20px;
	background-size: 100%;
}
.check-img .check-img__img{
  width: 100%;
  border-radius: 5px;
}
.check-msg{
	color: #a8a8a8;
	border: 1px solid #cbcbcb;
	-webkit-border-radius: 90px;
	-moz-border-radius: 90px;
	-webkit-tap-highlight-color: transparent;
	border-radius: 90px;
	background: #F9F9F9;
	line-height: 2.5;
	text-align: center;
	margin: 10px 0;
	font-size: 13px;
}

最后：此种验证码依然不是那么的安全，防刷能力有限，只能暂时满足需要，安全性的提高有待后续~~~~~~~~~~