uniapp、vue实现滑动拼图验证码

实际开发工作中，在登陆的时候需要短信验证码，但容易引起爬虫行为，需要用到反爬虫验证码，今天介绍一下拼图验证码，解决验证码反爬虫中的滑动验证码反爬虫。
原理
滑动拼图验证码是在滑块验证码的基础上增加了一个随机滑动距离，用户需要将滑块滑到拼图的缺口处，使拼图完整，才能通过校验。

一、不对接口版本
平台兼容性，H5、微信小程序、字节、百度
XXX.vue文件引入
template标签中引入

<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>

script标签中引入组件

import sliderVerify from '@/components/slider-verify/slider-verify.vue';//组件存放的路径

export default {
   
    components: {
   
        'slider-verify': sliderVerify
    },
    data() {
   
        return {
   
            sliderVerifyFLag: false //滑块验证
        };
    },
    onLoad() {
   },
    methods: {
   
        // 滑块验证结果回调函数
        verifyResult(res) {
   
            this.sliderVerifyFLag = false;

            if (res) {
     //校验通过

            }else{
   
                // 校验失败,点击关闭按钮
            }
        }
    }
};

slider-verify.vue文件代码

<template>
	<view class="slider-verify-box" v-if="isShow">
		<view class="verifyBox">
			<view class="slider-title">图形验证</view>
			<view class="slide-content">
				<view class="slide-tips">拖动下方滑块完成拼图</view>
				<view class="slider-pintu">
					<image id="pintuImg" :src="'/static/images/slider-verify/' + img + '.jpg'" class="pintu"></image>

					<view class="pintukuai" :style="{ top: top + 'px', left: oldx + 'px' }">
						<image :src="'/static/images/slider-verify/' + img + '.jpg'" :style="{ top: '-' + top + 'px', left: '-' + left + 'px'}"></image>
					</view>

					<view class="yinying" :style="{ top: top + 'px', left: left + 'px' }"></view>
				</view>

				<view class="slider-movearea" @touchend="endTouchMove">
					<movable-area :animation="true"><movable-view :x="x" direction="horizontal" @change="startMove"></movable-view></movable-area>

					<view class="huadao">拖动左边滑块完成上方拼图</view>
				</view>
			</view>
			
			<view class="slider-btn-group">
				<view class="slider-btn" @tap="closeSlider">关闭</view>
				<view class="slider-btn slide-btn-refresh" @tap="refreshVerify">刷新</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
   
	name: 'slider-verify',
	props: {
   
		isShow: true
	},
	data() {
   
		return {
   
			x: 0, //初始距离
			oldx: 0, //移动的距离
			img: '1', //显示哪张图片
			left: 0, //随机拼图的最终X轴距离
			top: 0, //拼图的top距离
		};
	},
	watch: {
   
		// 每次打开重新刷新拼图
		isShow(newValue, oldValue) {
   
			if(newValue){
   
				this.refreshVerify();	//刷新
			}
		}
	},
	mounted() {
   
		var that = this;
		that.refreshVerify();
	},
	methods: {
   
		//刷新验证
		refreshVerify() {
   
			var gl = Math.random().toFixed(2);
			this.left = uni.upx2px(560) * gl > uni.upx2px(280) ? uni.upx2px(280) : uni.upx2px(560) * gl + uni.upx2px(150); //生成随机X轴最终距离
			this.top = uni.upx2px(190) * gl; //生成随机Y轴初始距离
			
			if (gl <= 0.2) {
   
				this.img = 1;
			}
			if (gl > 0.2 && gl <= 0.4) {
   
				this.img = 2;
			}
			if (gl > 0.4 && gl <= 0.6) {
   
				this.img = 3;
			}
			if (gl > 0.6 && gl <= 0.8) {
   
				this.img = 4;
			}
			if (gl > 0.8 && gl <= 1) {
   
				this.img = 5;
			}
			this.resetMove();	//重置阴影位置
		},

		/* 滑动中 */
		startMove(e) {
   
			this.oldx = e.detail.x;
		},

		/* 滑动结束 */
		endTouchMove() {
   
			var that = this;

			if (Math.abs(that.oldx - that.left) <= 5) {
   
				uni.showToast({
   
					title: '验证成功',
					duration: 2500,
					success() {
   
						that.$emit('touchSliderResult', true);
					}
				});
			} else {
   
				that.refreshVerify();
			}
		},
		
		/* 重置阴影位置 */
		resetMove() {
   
			this.x = 1;
			this.oldx = 1;
			setTimeout(