608 lines
16 KiB
Vue
608 lines
16 KiB
Vue
<template>
|
|
<div class="slide-verify" :style="'width:' + canvaswidth + 'px'" onselectstart="return false;">
|
|
<!-- 图片加载遮蔽罩 -->
|
|
<div :class="isLoading ? 'img-loading' : ''" :style="'height:' + canvasheight + 'px'" v-if="isLoading"></div>
|
|
<!-- 认证成功后的文字提示 -->
|
|
<div class="success-hint" :style="'height:' + canvasheight + 'px'" v-if="verifySuccess">{{ successHint }}</div>
|
|
<!--前端生成-->
|
|
<template v-if="isFrontCheck">
|
|
<!--验证图片-->
|
|
<canvas ref="canvas" class="slide-canvas" :width="canvaswidth" :height="canvasheight"/>
|
|
<!--阻塞块-->
|
|
<canvas ref="block" class="slide-block" :width="canvaswidth" :height="canvasheight"/>
|
|
</template>
|
|
<!--后端生成-->
|
|
<template v-else>
|
|
<!--验证图片-->
|
|
<img ref="canvas" class="slide-canvas" :width="canvaswidth" :height="canvasheight"/>
|
|
<!--阻塞块-->
|
|
<img ref="block" :class="verifyFail ? 'slide-block verify-fail' : 'slide-block'"/>
|
|
</template>
|
|
<!--刷新按钮-->
|
|
<div class="refresh" @click="refresh"><i class="el-icon-refresh-right"></i>刷新</div>
|
|
<!-- 滑动条 -->
|
|
<div :class="getClass()">
|
|
<!--滑块-->
|
|
<div class="slider-box" :style="'width:' + sliderBoxWidth">
|
|
<!-- 按钮 -->
|
|
<div class="slider-button" id="slider-button" :style="'left:' + sliderButtonLeft">
|
|
<!-- 按钮图标 -->
|
|
<div class="slider-button-icon"></div>
|
|
</div>
|
|
</div>
|
|
<!--滑动条提示文字-->
|
|
<span class="slider-hint">{{ sliderhint }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
function sum(x, y) {
|
|
return x + y;
|
|
}
|
|
|
|
function square(x) {
|
|
return x * x;
|
|
}
|
|
|
|
module.exports = {
|
|
props: {
|
|
// 阻塞块长度
|
|
blocklength: {
|
|
type: Number,
|
|
default: 42,
|
|
},
|
|
// 阻塞块弧度
|
|
blockradius: {
|
|
type: Number,
|
|
default: 10,
|
|
},
|
|
// 画布宽度
|
|
canvaswidth: {
|
|
type: Number,
|
|
default: 320,
|
|
},
|
|
// 画布高度
|
|
canvasheight: {
|
|
type: Number,
|
|
default: 155,
|
|
},
|
|
// 滑块操作提示
|
|
sliderhint: {
|
|
type: String,
|
|
default: '向右滑动',
|
|
},
|
|
// 可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5，若为 -1 则不进行机器判断
|
|
accuracy: {
|
|
type: Number,
|
|
default: 3,
|
|
},
|
|
// 图片资源数组
|
|
imagelist: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// 前端校验
|
|
isFrontCheck: false,
|
|
// 校验进行状态
|
|
verifyActive: false,
|
|
// 校验成功状态
|
|
verifySuccess: false,
|
|
// 校验失败状态
|
|
verifyFail: false,
|
|
// 阻塞块对象
|
|
blockObj: null,
|
|
// 图片画布对象
|
|
canvasCtx: null,
|
|
// 阻塞块画布对象
|
|
blockCtx: null,
|
|
// 阻塞块宽度
|
|
blockWidth: this.blocklength * 2,
|
|
// 阻塞块的横轴坐标
|
|
blockX: undefined,
|
|
// 阻塞块的纵轴坐标
|
|
blockY: undefined,
|
|
// 图片对象
|
|
image: undefined,
|
|
// 移动的X轴坐标
|
|
originX: undefined,
|
|
// 移动的Y轴做坐标
|
|
originY: undefined,
|
|
// 拖动距离数组
|
|
dragDistanceList: [],
|
|
// 滑块箱拖动宽度
|
|
sliderBoxWidth: 0,
|
|
// 滑块按钮距离左侧起点位置
|
|
sliderButtonLeft: 0,
|
|
// 鼠标按下状态
|
|
isMouseDown: false,
|
|
// 图片加载提示，防止图片没加载完就开始验证
|
|
isLoading: true,
|
|
// 时间戳，计算滑动时长
|
|
timestamp: null,
|
|
// 成功提示
|
|
successHint: '',
|
|
// 随机字符串
|
|
nonceStr: undefined,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
getClass() {
|
|
let str = 'slider '
|
|
if(this.verifyActive) {
|
|
str += 'verify-active '
|
|
}
|
|
if(this.verifySuccess) {
|
|
str += 'verify-success '
|
|
}
|
|
if(this.verifyFail) {
|
|
str += 'verify-fail '
|
|
}
|
|
return str
|
|
},
|
|
/* 初始化*/
|
|
init() {
|
|
this.initDom();
|
|
this.bindEvents();
|
|
},
|
|
/* 初始化DOM对象*/
|
|
initDom() {
|
|
this.blockObj = this.$refs.block;
|
|
if (this.isFrontCheck) {
|
|
this.canvasCtx = this.$refs.canvas.getContext('2d');
|
|
this.blockCtx = this.blockObj.getContext('2d');
|
|
this.initImage();
|
|
} else {
|
|
this.getCaptcha();
|
|
}
|
|
},
|
|
/* 后台获取验证码*/
|
|
async getCaptcha() {
|
|
let self = this;
|
|
//取后端默认值
|
|
const response = await $.post('/captcha/get-captcha')
|
|
const data = response.data;
|
|
self.nonceStr = data.nonceStr;
|
|
self.$refs.block.src = data.blockSrc;
|
|
self.$refs.block.style.top = data.blockY + 'px';
|
|
self.$refs.canvas.src = data.canvasSrc;
|
|
self.isLoading = false;
|
|
},
|
|
/* 前端获取验证码*/
|
|
initImage() {
|
|
const image = this.createImage(() => {
|
|
this.drawBlock();
|
|
let {canvaswidth, canvasheight, blockX, blockY, blockradius, blockWidth} = this;
|
|
this.canvasCtx.drawImage(image, 0, 0, canvaswidth, canvasheight);
|
|
this.blockCtx.drawImage(image, 0, 0, canvaswidth, canvasheight);
|
|
// 将抠图防止最左边位置
|
|
let yAxle = blockY - blockradius * 2;
|
|
let ImageData = this.blockCtx.getImageData(blockX, yAxle, blockWidth, blockWidth);
|
|
this.blockObj.width = blockWidth;
|
|
this.blockCtx.putImageData(ImageData, 0, yAxle);
|
|
// 图片加载完关闭遮蔽罩
|
|
this.isLoading = false;
|
|
// 前端校验设置特殊值
|
|
this.nonceStr = 'loyer';
|
|
});
|
|
this.image = image;
|
|
},
|
|
/* 创建image对象*/
|
|
createImage(onload) {
|
|
const image = document.createElement('img');
|
|
image.crossOrigin = 'Anonymous';
|
|
image.onload = onload;
|
|
image.onerror = () => {
|
|
image.src = '/assets/platform/img/bjt.jpg';
|
|
};
|
|
image.src = this.getImageSrc();
|
|
return image;
|
|
},
|
|
/* 获取imgSrc*/
|
|
getImageSrc() {
|
|
const len = this.imagelist.length;
|
|
return len > 0 ? this.imagelist[this.getNonceByRange(0, len)] : `https://loyer.wang/view/ftp/wallpaper/${this.getNonceByRange(1, 1000)}.jpg`;
|
|
},
|
|
/* 根据指定范围获取随机数*/
|
|
getNonceByRange(start, end) {
|
|
return Math.round(Math.random() * (end - start) + start);
|
|
},
|
|
/* 绘制阻塞块*/
|
|
drawBlock() {
|
|
this.blockX = this.getNonceByRange(this.blockWidth + 10, this.canvaswidth - (this.blockWidth + 10));
|
|
this.blockY = this.getNonceByRange(10 + this.blockradius * 2, this.canvasheight - (this.blockWidth + 10));
|
|
this.draw(this.canvasCtx, 'fill');
|
|
this.draw(this.blockCtx, 'clip');
|
|
},
|
|
/* 绘制事件*/
|
|
draw(ctx, operation) {
|
|
const PI = Math.PI;
|
|
let {blockX: x, blockY: y, blocklength: l, blockradius: r} = this;
|
|
// 绘制
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
|
|
ctx.lineTo(x + l, y);
|
|
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
|
|
ctx.lineTo(x + l, y + l);
|
|
ctx.lineTo(x, y + l);
|
|
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
|
|
ctx.lineTo(x, y);
|
|
// 修饰
|
|
ctx.lineWidth = 2;
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)';
|
|
ctx.stroke();
|
|
ctx[operation]();
|
|
ctx.globalCompositeOperation = 'destination-over';
|
|
},
|
|
/* 事件绑定*/
|
|
bindEvents() {
|
|
// 监听鼠标按下事件
|
|
document.getElementById('slider-button').addEventListener('mousedown', (event) => {
|
|
this.startEvent(event.clientX, event.clientY);
|
|
});
|
|
// 监听鼠标移动事件
|
|
document.addEventListener('mousemove', (event) => {
|
|
this.moveEvent(event.clientX, event.clientY);
|
|
});
|
|
// 监听鼠标离开事件
|
|
document.addEventListener('mouseup', (event) => {
|
|
this.endEvent(event.clientX);
|
|
});
|
|
// 监听触摸开始事件
|
|
document.getElementById('slider-button').addEventListener('touchstart', (event) => {
|
|
this.startEvent(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
|
|
});
|
|
// 监听触摸滑动事件
|
|
document.addEventListener('touchmove', (event) => {
|
|
this.moveEvent(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
|
|
});
|
|
// 监听触摸离开事件
|
|
document.addEventListener('touchend', (event) => {
|
|
this.endEvent(event.changedTouches[0].pageX);
|
|
});
|
|
},
|
|
/* 校验图片是否存在*/
|
|
checkImgSrc() {
|
|
if (this.isFrontCheck) {
|
|
return true;
|
|
}
|
|
return !!this.$refs.canvas.src;
|
|
},
|
|
/* 滑动开始事件*/
|
|
startEvent(originX, originY) {
|
|
if (!this.checkImgSrc() || this.isLoading || this.verifySuccess) {
|
|
return;
|
|
}
|
|
this.originX = originX;
|
|
this.originY = originY;
|
|
this.isMouseDown = true;
|
|
this.timestamp = +new Date();
|
|
},
|
|
/* 滑动事件*/
|
|
moveEvent(originX, originY) {
|
|
if (!this.isMouseDown) {
|
|
return false;
|
|
}
|
|
const moveX = originX - this.originX;
|
|
const moveY = originY - this.originY;
|
|
if (moveX < 0 || moveX + 40 >= this.canvaswidth) {
|
|
return false;
|
|
}
|
|
this.sliderButtonLeft = moveX + 'px';
|
|
let blockLeft = (this.canvaswidth - 40 - 20) / (this.canvaswidth - 40) * moveX;
|
|
this.blockObj.style.left = blockLeft + 'px';
|
|
this.verifyActive = true;
|
|
this.sliderBoxWidth = moveX + 'px';
|
|
this.dragDistanceList.push(moveY);
|
|
},
|
|
/* 滑动结束事件*/
|
|
endEvent(originX) {
|
|
if (!this.isMouseDown) {
|
|
return false;
|
|
}
|
|
this.isMouseDown = false;
|
|
if (originX === this.originX) {
|
|
return false;
|
|
}
|
|
// 开始校验
|
|
this.isLoading = true;
|
|
// 校验结束
|
|
this.verifyActive = false;
|
|
// 滑动时长
|
|
this.timestamp = +new Date() - this.timestamp;
|
|
// 移动距离
|
|
const moveLength = parseInt(this.blockObj.style.left);
|
|
// 限制操作时长10S，超出判断失败
|
|
if (this.timestamp > 10000) {
|
|
this.verifyFailEvent();
|
|
} else
|
|
// 人为操作判定
|
|
if (!this.turingTest()) {
|
|
this.verifyFail = true;
|
|
this.$emit('again');
|
|
} else
|
|
// 是否前端校验
|
|
if (this.isFrontCheck) {
|
|
const accuracy = this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy; // 容错精度值
|
|
const spliced = Math.abs(moveLength - this.blockX) <= accuracy; // 判断是否重合
|
|
if (!spliced) {
|
|
this.verifyFailEvent();
|
|
} else {
|
|
// 设置特殊值，后台特殊处理，直接验证通过
|
|
this.$emit('success', {nonceStr: this.nonceStr, value: moveLength});
|
|
}
|
|
} else {
|
|
this.$emit('success', {nonceStr: this.nonceStr, value: moveLength});
|
|
}
|
|
},
|
|
/* 图灵测试*/
|
|
turingTest() {
|
|
const arr = this.dragDistanceList; // 拖动距离数组
|
|
const average = arr.reduce(sum) / arr.length; // 平均值
|
|
const deviations = arr.map((x) => x - average); // 偏离值
|
|
const stdDev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // 标准偏差
|
|
return average !== stdDev; // 判断是否人为操作
|
|
},
|
|
/* 校验成功*/
|
|
verifySuccessEvent() {
|
|
this.isLoading = false;
|
|
this.verifySuccess = true;
|
|
const elapsedTime = (this.timestamp / 1000).toFixed(1);
|
|
if (elapsedTime < 1) {
|
|
this.successHint = `仅仅${elapsedTime}S，你的速度快如闪电`;
|
|
} else if (elapsedTime < 2) {
|
|
this.successHint = `只用了${elapsedTime}S，这速度简直完美`;
|
|
} else {
|
|
this.successHint = `耗时${elapsedTime}S，争取下次再快一点`;
|
|
}
|
|
},
|
|
/* 校验失败*/
|
|
verifyFailEvent(msg) {
|
|
this.verifyFail = true;
|
|
this.$emit('fail', msg);
|
|
this.refresh();
|
|
},
|
|
/* 刷新图片验证码*/
|
|
refresh() {
|
|
// 延迟class的删除，等待动画结束
|
|
setTimeout(() => {
|
|
this.verifyFail = false;
|
|
}, 500);
|
|
this.isLoading = true;
|
|
this.verifyActive = false;
|
|
this.verifySuccess = false;
|
|
this.blockObj.style.left = 0;
|
|
this.sliderBoxWidth = 0;
|
|
this.sliderButtonLeft = 0;
|
|
if (this.isFrontCheck) {
|
|
// 刷新画布
|
|
let {canvaswidth, canvasheight} = this;
|
|
this.canvasCtx.clearRect(0, 0, canvaswidth, canvasheight);
|
|
this.blockCtx.clearRect(0, 0, canvaswidth, canvasheight);
|
|
this.blockObj.width = canvaswidth;
|
|
// 刷新图片
|
|
this.image.src = this.getImageSrc();
|
|
} else {
|
|
this.getCaptcha();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.slide-verify {
|
|
position: relative;
|
|
}
|
|
|
|
/*图片加载样式*/
|
|
.img-loading {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
animation: loading 1.5s infinite;
|
|
background-image: url(/assets/platform/img/captcha/loading.gif);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: 100px;
|
|
background-color: #737c8e;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
opacity: .7;
|
|
}
|
|
100% {
|
|
opacity: 9;
|
|
}
|
|
}
|
|
|
|
/*认证成功后的文字提示*/
|
|
.success-hint {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
color: #2CD000;
|
|
font-size: large;
|
|
}
|
|
|
|
/*刷新按钮*/
|
|
.refresh-icon {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 35px;
|
|
height: 35px;
|
|
cursor: pointer;
|
|
background: url("/assets/platform/img/captcha/refresh.svg") 0 -432px;
|
|
background-size: 35px 470px;
|
|
}
|
|
|
|
/*验证图片*/
|
|
.slide-canvas {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/*阻塞块*/
|
|
.slide-block {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
/*校验失败时的阻塞块样式*/
|
|
.slide-block.verify-fail {
|
|
transition: left 0.5s linear;
|
|
}
|
|
|
|
/*滑动条*/
|
|
.slider {
|
|
position: relative;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
margin-top: 15px;
|
|
background: #f7f9fa;
|
|
color: #45494c;
|
|
border: 1px solid #e4e7eb;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/*滑动盒子*/
|
|
.slider-box {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 40px;
|
|
border: 0 solid #1991FA;
|
|
background: #D1E9FE;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/*滑动按钮*/
|
|
.slider-button {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #fff;
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
|
|
cursor: pointer;
|
|
transition: background .2s linear;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/*鼠标悬浮时的按钮样式*/
|
|
.slider-button:hover {
|
|
background: #1991FA
|
|
}
|
|
|
|
/*鼠标悬浮时的按钮图标样式*/
|
|
.slider-button:hover .slider-button-icon {
|
|
/*background-position: 0 -13px*/
|
|
background-image: url("/assets/platform/img/captcha/white_right.svg");
|
|
}
|
|
|
|
/*滑动按钮图标*/
|
|
.slider-button-icon {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 13px;
|
|
width: 15px;
|
|
height: 13px;
|
|
background-image: url("/assets/platform/img/captcha/right.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
/*校验时的按钮样式*/
|
|
.verify-active .slider-button {
|
|
height: 38px;
|
|
top: -1px;
|
|
border: 1px solid #1991FA;
|
|
}
|
|
|
|
/*校验时的滑动箱样式*/
|
|
.verify-active .slider-box {
|
|
height: 38px;
|
|
border-width: 1px;
|
|
}
|
|
|
|
/*校验成功时的滑动箱样式*/
|
|
.verify-success .slider-box {
|
|
height: 38px;
|
|
border: 1px solid #52CCBA;
|
|
background-color: #D2F4EF;
|
|
}
|
|
|
|
/*校验成功时的按钮样式*/
|
|
.verify-success .slider-button {
|
|
height: 38px;
|
|
top: -1px;
|
|
border: 1px solid #52CCBA;
|
|
background-color: #52CCBA !important;
|
|
}
|
|
|
|
/*校验成功时的按钮图标样式*/
|
|
.verify-success .slider-button-icon {
|
|
/*background-position: 0 0 !important;*/
|
|
background-image: url("/assets/platform/img/captcha/ok.svg");
|
|
}
|
|
|
|
/*校验失败时的滑动箱样式*/
|
|
.verify-fail .slider-box {
|
|
height: 38px;
|
|
border: 1px solid #f57a7a;
|
|
background-color: #fce1e1;
|
|
transition: width 0.5s linear;
|
|
}
|
|
|
|
/*校验失败时的按钮样式*/
|
|
.verify-fail .slider-button {
|
|
height: 38px;
|
|
top: -1px;
|
|
border: 1px solid #f57a7a;
|
|
background-color: #f57a7a !important;
|
|
transition: left 0.5s linear;
|
|
}
|
|
|
|
/*校验失败时的按钮图标样式*/
|
|
.verify-fail .slider-button-icon {
|
|
top: 14px;
|
|
/*background-position: 0 -82px !important;*/
|
|
background-image: url("/assets/platform/img/captcha/close.svg");
|
|
}
|
|
|
|
/*校验状态下的提示文字隐藏*/
|
|
.verify-active .slider-hint,
|
|
.verify-success .slider-hint,
|
|
.verify-fail .slider-hint {
|
|
display: none;
|
|
}
|
|
|
|
.refresh {
|
|
text-align: right;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
</style> |