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

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

---

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

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

一、不对接口版本

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

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文件代码

二、对接口版本

平台兼容性，H5、微信小程序、字节、百度、qq等
XXX.vue文件引入
template标签中引入

获取验证码

script标签中引入组件

import validationPT from '@/components/validationPT/validationPT.vue'

export default {
    components: {
        'slider-verify': sliderVerify
    },
    data() {
       
    },
    onLoad() {},
    methods: {
    	// 效验手机号
		getCode() {
			this.getCodePT();
		},
		//获取弹窗
		getCodePT(msg) {
			this.$refs.vefCode.GetSlideBlockApi(); //调用图片接口，获取验证图片
			this.$refs.vefCode.clkOpenRef(); //验证通过，打开拼图验证
			this.$refs.vefCode.initial();//重置
		},
        // 滑块验证结果回调函数
        //拼图验证是否成功
		getVefCodeTrue(msg) {
			this.VefInfosBk = msg;
			if (msg.Res == true) {
				//获取验证码
			} 
		},
    }
};

validationPT.vue文件代码