滑动验证码生成过程学习

最近在学习滑动验证码的生成过程，因为以前做的都是字母数字的验证码，使用的方式也只是对字体个数、图片扭曲、干扰线等的处理方式，用户体验上并不好。

在网上找了一个滑动验证码的例子：

https://blog.csdn.net/jylonger/article/details/78340772

例子里作者没有提供图片，另外就是判断逻辑是空的（默认为false），使得不论怎么玩都是验证失败

            //验证数据
            function checkcode(code){
                var iscur=false;
                //模拟ajax
                setTimeout(function(){
                    if(iscur){
                        checkcoderesult(1,"验证通过");
                        $this.find(".code-k-div").hide();
                        opts.callback({code:1000,msg:"验证通过",msgcode:"23dfdf123"});
                    }else{
                        $divMove.addClass("error");
                        checkcoderesult(0,"验证不通过");
                        opts.callback({code:1001,msg:"验证不通过"});
                        setTimeout(function() {
                            $divMove.removeClass("error");
                            $this.find(".code-mask").animate({"left":"0px"},200);
                            $divMove.animate({"left": "10px"},200);
                        },400);
                    }
                },500)
            }

后面在github上找了另一个滑动的例子：

https://github.com/Hibear/verify

这里面给的代码是在JS里就判断了：切小图片时就把目标距离在JS记录下来了，在松开鼠标时校验距离

        //鼠标松开
        end: function() {
        	
        	var _this = this;
        	
        	//判断是否重合
        	if(this.status  && this.isEnd == false) {
        		
        		if(this.options.type != 1) {		//图片滑动
        			
        			var vOffset = parseInt(this.options.vOffset);
		            if(parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) {
		            	this.htmlDoms.move_block.css('background-color', '#5cb85c');
		            	this.htmlDoms.left_bar.css({'border-color': '#5cb85c', 'background-color': '#fff'});
		            	this.htmlDoms.icon.css('color', '#fff');
		            	this.htmlDoms.icon.removeClass('icon-right');
		            	this.htmlDoms.icon.addClass('icon-check');
		            	this.htmlDoms.refresh.hide();
		            	this.isEnd = true;
		            	this.options.success(this);
		            }else{
		            	this.htmlDoms.move_block.css('background-color', '#d9534f');
		            	this.htmlDoms.left_bar.css('border-color', '#d9534f');
		            	this.htmlDoms.icon.css('color', '#fff');
		            	this.htmlDoms.icon.removeClass('icon-right');
		            	this.htmlDoms.icon.addClass('icon-close');
		            	
		            	
		            	setTimeout(function () { 
					    	_this.refresh();
					    }, 400);
		            	
		            	this.options.error(this);
		            }

滑动验证码，验证的过程实质和图片验证码是一致的，图片生成还是由服务器负责，另外需要由服务器生成验证内容，JS通过鼠标轨迹等生成待验证内容进行匹配，匹配结果应由服务端返回，而滑动的特点是可以收集鼠标轨迹，从而再由服务器分析是否属于人的行为。