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

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

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

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


    一、不对接口版本

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

    "sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement">

    script标签中引入组件

    1. import sliderVerify from '@/components/slider-verify/slider-verify.vue';//组件存放的路径
    2.  
    3. export default {
    4.     components: {
    5.         'slider-verify': sliderVerify
    6.     },
    7.     data() {
    8.         return {
    9.             sliderVerifyFLag: false //滑块验证
    10.         };
    11.     },
    12.     onLoad() {},
    13.     methods: {
    14.         // 滑块验证结果回调函数
    15.         verifyResult(res) {
    16.             this.sliderVerifyFLag = false;
    17.  
    18.             if (res) {  //校验通过
    19.  
    20.             }else{
    21.                 // 校验失败,点击关闭按钮
    22.             }
    23.         }
    24.     }
    25. };

    在这里插入图片描述
    slider-verify.vue文件代码

    2.  
    3. <script>
    4. export default {
    5. 	name: 'slider-verify',
    6. 	props: {
    7. 		isShow: true
    8. 	},
    9. 	data() {
    10. 		return {
    11. 			x: 0, //初始距离
    12. 			oldx: 0, //移动的距离
    13. 			img: '1', //显示哪张图片
    14. 			left: 0, //随机拼图的最终X轴距离
    15. 			top: 0, //拼图的top距离
    16. 		};
    17. 	},
    18. 	watch: {
    19. 		// 每次打开重新刷新拼图
    20. 		isShow(newValue, oldValue) {
    21. 			if(newValue){
    22. 				this.refreshVerify();	//刷新
    23. 			}
    24. 		}
    25. 	},
    26. 	mounted() {
    27. 		var that = this;
    28. 		that.refreshVerify();
    29. 	},
    30. 	methods: {
    31. 		//刷新验证
    32. 		refreshVerify() {
    33. 			var gl = Math.random().toFixed(2);
    34. 			this.left = uni.upx2px(560) * gl > uni.upx2px(280) ? uni.upx2px(280) : uni.upx2px(560) * gl + uni.upx2px(150); //生成随机X轴最终距离
    35. 			this.top = uni.upx2px(190) * gl; //生成随机Y轴初始距离
    36. 			
    37. 			if (gl <= 0.2) {
    38. 				this.img = 1;
    39. 			}
    40. 			if (gl > 0.2 && gl <= 0.4) {
    41. 				this.img = 2;
    42. 			}
    43. 			if (gl > 0.4 && gl <= 0.6) {
    44. 				this.img = 3;
    45. 			}
    46. 			if (gl > 0.6 && gl <= 0.8) {
    47. 				this.img = 4;
    48. 			}
    49. 			if (gl > 0.8 && gl <= 1) {
    50. 				this.img = 5;
    51. 			}
    52. 			this.resetMove();	//重置阴影位置
    53. 		},
    54.  
    55. 		/* 滑动中 */
    56. 		startMove(e) {
    57. 			this.oldx = e.detail.x;
    58. 		},
    59.  
    60. 		/* 滑动结束 */
    61. 		endTouchMove() {
    62. 			var that = this;
    63.  
    64. 			if (Math.abs(that.oldx - that.left) <= 5) {
    65. 				uni.showToast({
    66. 					title: '验证成功',
    67. 					duration: 2500,
    68. 					success() {
    69. 						that.$emit('touchSliderResult', true);
    70. 					}
    71. 				});
    72. 			} else {
    73. 				that.refreshVerify();
    74. 			}
    75. 		},
    76. 		
    77. 		/* 重置阴影位置 */
    78. 		resetMove() {
    79. 			this.x = 1;
    80. 			this.oldx = 1;
    81. 			setTimeout(() => {
    82. 				this.x = 0;
    83. 				this.oldx = 0;
    84. 			}, 300);
    85. 		},
    86. 		
    87. 		// 关闭
    88. 		closeSlider(){
    89. 			this.$emit('touchSliderResult', false);
    90. 		}	
    91. 	}
    92. };
    93. script>
    94.  
    95. <style lang="less">
    96. .slider-verify-box {
    97. 	position: fixed;
    98. 	top: 0;
    99. 	left: 0;
    100. 	width: 100%;
    101. 	height: 100%;
    102. 	background-color: rgba(0, 0, 0, 0.5);
    103. 	z-index: 999;
    104. }
    105. .verifyBox {
    106. 	position: absolute;
    107. 	top: 50%;
    108. 	left: 50%;
    109. 	transform: translate(-50%, -50%);
    110. 	// width: 85%;
    111. 	background-color: #fff;
    112. 	border-radius: 20upx;
    113. 	box-shadow: 0 0 5upx rgba(0, 0, 0);
    114.  
    115. 	.slider-title {
    116. 		font-size: 36upx;
    117. 		text-align: center;
    118. 		padding: 1em 0;
    119. 		color: rgba(2, 20, 33, 0.85);
    120. 		border-bottom: 1px solid rgba(2, 20, 33, 0.15);
    121. 	}
    122.  
    123. 	.slide-content {
    124. 		width: 560rpx;
    125. 		padding: 0 1em;
    126. 		margin: 0 auto;
    127. 		.slide-tips {
    128. 			font-size: 28rpx;
    129. 			color: rgba(2, 20, 33, 0.45);
    130. 			padding: 0.5em 0;
    131. 		}
    132.  
    133. 		.slider-pintu {
    134. 			position: relative;
    135. 			width: 100%;
    136. 			border-radius: 10rpx;
    137. 			overflow: hidden;
    138. 			.pintu {
    139. 				width: 560rpx;
    140. 				height: 315rpx;
    141. 				display: block;
    142. 				margin: 0 auto;
    143. 			}
    144.  
    145. 			.pintukuai {
    146. 				position: absolute;
    147. 				top: 0;
    148. 				left: 0;
    149. 				width: 120rpx;
    150. 				height: 120rpx;
    151. 				z-index: 100;
    152. 				box-shadow: 0 0 5upx rgba(0, 0, 0, 0.3);
    153. 				overflow: hidden;
    154.  
    155. 				image {
    156. 					display: block;
    157. 					position: absolute;
    158. 					top: 0;
    159. 					left: 0;
    160. 					width: 560rpx;
    161. 					height: 315rpx;
    162. 				}
    163. 			}
    164. 		}
    165.  
    166. 		.yinying {
    167. 			position: absolute;
    168. 			width: 120rpx;
    169. 			height: 120rpx;
    170. 			background-color: rgba(0, 0, 0, 0.5);
    171. 		}
    172. 	}
    173. }
    174.  
    175. .slider-movearea {
    176. 	position: relative;
    177. 	height: 80upx;
    178. 	width: 100%;
    179. 	margin: 25upx auto;
    180.  
    181. 	movable-area {
    182. 		height: 80upx;
    183. 		width: 100%;
    184.  
    185. 		movable-view {
    186. 			width: 80upx;
    187. 			height: 80upx;
    188. 			border-radius: 50%;
    189. 			background-color: #007cff;
    190. 			background-image: url(../../static/images/slider-verify/icon-button-normal.png);
    191. 			background-repeat: no-repeat;
    192. 			background-size: auto 30upx;
    193. 			background-position: center;
    194. 			position: relative;
    195. 			z-index: 100;
    196. 		}
    197. 	}
    198. }
    199.  
    200. .huadao {
    201. 	width: 100%;
    202. 	height: 66upx;
    203. 	line-height: 66upx;
    204. 	background: #eee;
    205. 	box-shadow: inset 0 0 5upx #ccc;
    206. 	border-radius: 40rpx;
    207. 	color: #999;
    208. 	text-align: center;
    209. 	box-sizing: border-box;
    210. 	position: absolute;
    211. 	top: 7rpx;
    212. 	left: 0;
    213. 	font-size: 28rpx;
    214. 	z-index: 99;
    215. }
    216.  
    217. .slider-btn-group{
    218. 	width: 100%;
    219. 	display: flex;
    220. 	justify-content: center;
    221. 	align-items: center;
    222. 	border-top: 1px solid rgba(2, 20, 33, 0.15);
    223. 	
    224. 	.slider-btn{
    225. 		flex: 1;
    226. 		height: 100rpx;
    227. 		line-height: 100rpx;
    228. 		text-align: center;
    229. 		font-size: 36rpx;
    230. 		color:rgba(2,20,33,0.85);
    231. 		&:active{
    232. 			opacity: 0.8;
    233. 		}
    234. 	}
    235. 	.slide-btn-refresh{
    236. 		color:rgba(14,107,176,1);
    237. 		border-left: 1px solid rgba(2, 20, 33, 0.15);
    238. 	}	
    239. }
    240. style>

    二、对接口版本
    在这里插入图片描述

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

    1. "getCode()" >获取验证码
    2. <validationPT class="setVef" ref="vefCode" @VefCodeTrue="getVefCodeTrue" :inputPhone="mobile" theme="dialog">validationPT>

    script标签中引入组件

    1. import validationPT from '@/components/validationPT/validationPT.vue'
    2.  
    3. export default {
    4.     components: {
    5.         'slider-verify': sliderVerify
    6.     },
    7.     data() {
    8.        
    9.     },
    10.     onLoad() {},
    11.     methods: {
    12.     	// 效验手机号
    13. 		getCode() {
    14. 			this.getCodePT();
    15. 		},
    16. 		//获取弹窗
    17. 		getCodePT(msg) {
    18. 			this.$refs.vefCode.GetSlideBlockApi(); //调用图片接口，获取验证图片
    19. 			this.$refs.vefCode.clkOpenRef(); //验证通过，打开拼图验证
    20. 			this.$refs.vefCode.initial();//重置
    21. 		},
    22.         // 滑块验证结果回调函数
    23.         //拼图验证是否成功
    24. 		getVefCodeTrue(msg) {
    25. 			this.VefInfosBk = msg;
    26. 			if (msg.Res == true) {
    27. 				//获取验证码
    28. 			} 
    29. 		},
    30.     }
    31. };

    validationPT.vue文件代码

    2. <script>
    3. 	export default {
    4. 		props: {
    5. 			inputPhone: '',
    6. 			theme: {
    7. 				type: String,
    8. 			},
    9. 			swiperColor: {
    10. 				type: String,
    11. 				default: 'rgba(21, 132, 223, 0.08)'
    12. 			},
    13. 			title: {
    14. 				type: String,
    15. 				default: '人机校验'
    16. 			},
    17. 			barWidth: {
    18. 				type: Number,
    19. 				default: 300
    20. 			}
    21. 		},
    22. 		data() {
    23. 			return {
    24. 				ImgUrl: this.hostwapUrl,
    25. 				BGImg: '',
    26. 				CutImg: '',
    27. 				CutImgY: '',
    28. 				MarkCode: '', //验证拼图是否成功用,
    29. 				bgColSet: false, //拼图是否验证成功
    30. 				isSuccess: false, //是否验证成功
    31. 				isVefCode: false,
    32. 				showModal: false,
    33. 				startInfo: {},
    34. 				blockLeft: 0,//随机拼图的最终X轴距离
    35. 				isAnimation: false,
    36. 				msgType: '',
    37. 			}
    38. 		},
    39. 		computed: {
    40. 			trueMoveableW: function() {
    41. 				return this.barWidth - 40
    42. 			}
    43. 		},
    44. 		methods: {
    45. 			//获取图片接口
    46. 			GetSlideBlockApi() {
    47. 				let that = this;
    48. 				uni.request({
    49. 					url: url,//获取拼图接口
    50. 					data: data,//需要传给接口的参数
    51. 					headers: {
    52. 						Accept: "application/json; charset=utf-8"
    53. 					},
    54. 					dataType: 'json',
    55. 					method: 'GET',
    56. 					success: (res) => {
    57. 						this.BGImg = '';//大图
    58. 						this.CutImg = '';//拼图
    59. 						this.CutImgY = 0;//接口位置
    60. 					},
    61. 					complete: () => {}
    62. 				})
    63. 			},
    64.  
    65. 			//手指按下
    66. 			touchstartHandle({
    67. 				changedTouches
    68. 			}) {
    69. 				if (this.isSuccess) {
    70. 					return
    71. 				}
    72. 				this.isAnimation = false
    73. 				this.startInfo = changedTouches[0]
    74. 			},
    75. 			// 手指移动
    76. 			touchmoveHandle({
    77. 				changedTouches
    78. 			}) {
    79. 				if (this.isSuccess) {
    80. 					return
    81. 				}
    82. 				let blockLeft = changedTouches[0].clientX - this.startInfo.clientX
    83. 				let blockLeftRpx = blockLeft;
    84. 				if (blockLeftRpx < 0) {
    85. 					this.blockLeft = 0
    86. 				} else {
    87. 					this.blockLeft = blockLeftRpx <= this.trueMoveableW ? blockLeftRpx : this.trueMoveableW
    88. 				}
    89. 			},
    90. 			// 手指离开
    91. 			touchendHandle(e) {
    92. 				if (this.isSuccess) {
    93. 					return
    94. 				}
    95. 				this.CheckSlideBlockApi();
    96. 			},
    97. 			//验证图片接口
    98. 			CheckSlideBlockApi() {
    99. 				let that = this;
    100. 				uni.request({
    101. 					url: url,//接口名称
    102. 					data: data,//接口需要的参数
    103. 					headers: {
    104. 						Accept: "application/json; charset=utf-8"
    105. 					},
    106. 					dataType: 'json',
    107. 					method: 'POST',
    108. 					success: (res) => {
    109. 						let infos = {}
    110. 						if (res.data.IsOK == true) {//成功
    111. 							that.isSuccess = true;
    112. 							infos = {
    113. 								Res: res.data.Results,
    114. 							};//返回传给父组件的值，判断是否成功
    115. 							setTimeout(() => {
    116. 								that.bgColSet = false;
    117. 								that.$emit('VefCodeTrue', infos)
    118. 								that.isVefCode = false;
    119. 								that.showModal = false;
    120. 							}, 1000);
    121.  
    122. 						} else {
    123. 							that.bgColSet = true;
    124. 							that.isSuccess = false;
    125. 							that.GetSlideBlockApi();
    126. 							that.isAnimation = true
    127. 							let timeid = setTimeout(() => {
    128. 								clearTimeout(timeid)
    129. 								that.isAnimation = false
    130. 								that.bgColSet = false;
    131. 							}, 500)
    132. 							that.blockLeft = 0;
    133. 						}
    134. 					},
    135. 					complete: () => {}
    136. 				})
    137. 			},
    138. 			/* 鼠标按住滑块后初始化移动监听，记录初始位置 */
    139. 			startMove(e) {
    140. 				e.preventDefault() //禁止图片img拖动的解决方法
    141. 				e = e || window.event;
    142. 				this.moveStart = e.pageX || e.targetTouches[0].pageX;
    143. 				this.addMouseMoveListener();
    144. 			},
    145. 			/* 鼠标滑块移动 */
    146. 			moving(e) {
    147. 				// e.preventDefault() //禁止图片img拖动的解决方法
    148. 				let self = this;
    149. 				e = e || window.event;
    150. 				let moveX = (e.pageX || e.targetTouches[0].pageX);
    151.  
    152. 				let d = moveX - self.moveStart;
    153.  
    154. 				let w = self.dataWidth;
    155. 				let PL_Size = this.puzzleSize;
    156. 				let padding = this.padding;
    157.  
    158. 				if (self.moveStart === "") {
    159. 					return "";
    160. 				}
    161. 				if (d < 0 || d > w - padding - PL_Size) {
    162. 					return "";
    163. 				}
    164. 				
    165. 				if (d <= 260) {
    166. 					self.blockLeft = d
    167. 				}
    168. 			},
    169. 			/* 鼠标移动结束，验证并回调 */
    170. 			moveEnd(e) {
    171. 				let self = this;
    172.  
    173. 				e = e || window.event;
    174. 				let moveEnd_X = (e.pageX || e.changedTouches[0].pageX) - self.moveStart;
    175.  
    176. 				if (moveEnd_X > 0) {
    177. 					self.CheckSlideBlockApi(); //验证拼图是否成功
    178. 				}
    179. 				self.moveStart = "";
    180.  
    181. 				document.removeEventListener("mousemove", self.moving);
    182. 				document.removeEventListener("mouseup", self.moveEnd);
    183. 			},
    184. 			/* 鼠标全局绑定滑块移动与滑动结束，移动过程中鼠标可在页面任何位置 */
    185. 			addMouseMoveListener() {
    186. 				let self = this;
    187. 				document.addEventListener("mousemove", self.moving);
    188. 				document.addEventListener("mouseup", self.moveEnd);
    189. 			},
    190. 			//换一张
    191. 			clkNext() {
    192. 				this.GetSlideBlockApi();
    193. 			},
    194.  
    195. 			// 重置滑块位置
    196. 			initial() {
    197. 				this.blockLeft = 0;
    198. 				this.bgColSet = false;
    199. 				this.isSuccess = false;
    200. 			},
    201. 			clkCloseRef() {
    202. 				this.showModal = false;
    203. 				this.isVefCode = false;
    204. 			},
    205. 			clkOpenRef(msg) {
    206. 				this.showModal = true;
    207. 				this.isVefCode = true;
    208. 			},
    209. 		}
    210. 	}
    211. script>
    212. <style lang="scss" type="text/css" rel="stylesheet" scoped="scoped">
    213. 	.framework {
    214. 		box-sizing: border-box;
    215. 		width: 332px;
    216. 		height: 270px;
    217. 		background: #fff;
    218. 		margin: 24px auto;
    219. 		z-index: 11;
    220. 		position: relative;
    221. 		padding: 0 16px;
    222. 		user-select: none;
    223. 		border-radius: 16px;
    224. 	}
    225.  
    226. 	.framework .boxTopTitle {
    227. 		height: 48px;
    228. 		line-height: 48px;
    229. 		display: flex;
    230. 		justify-content: space-between;
    231. 	}
    232.  
    233. 	.framework .boxImg {
    234. 		width: 300px;
    235. 		height: 150px;
    236. 		background: #fff;
    237. 		margin-bottom: 16px;
    238. 		border-radius: 8px;
    239. 		position: relative;
    240. 	}
    241.  
    242. 	.reset {
    243. 		position: absolute;
    244. 		top: 0;
    245. 		right: 0;
    246. 		background-color: rgba(0, 0, 0, 0.24);
    247. 		border-radius: 0 8px 0 8px;
    248. 		padding: 0 12px;
    249. 		line-height: 32px;
    250. 	}
    251.  
    252. 	.cutImgSet {
    253. 		position: absolute;
    254. 	}
    255.  
    256. 	.frame--dialog {
    257. 		.framework {
    258. 			// margin: 38vh auto;
    259. 			z-index: 88888888;
    260. 			position: fixed;
    261. 			// top: 25vh;
    262. 			transform: translateX(-50%);
    263. 			left: 50%;
    264. 		}
    265.  
    266. 		.frameBg {
    267. 			position: fixed;
    268. 			top: 0;
    269. 			left: 0;
    270. 			width: 100%;
    271. 			height: 100%;
    272. 			background-color: rgba(0, 0, 0, 0.24);
    273. 			z-index: 8887 !important;
    274. 		}
    275. 	}
    276.  
    277. 	.checkBox .checkBar {
    278. 		width: 100%;
    279. 		padding: 0px;
    280. 	}
    281.  
    282. 	.slide {
    283. 		box-sizing: border-box;
    284. 		width: 100%;
    285. 		height: 40px;
    286. 		line-height: 40px;
    287. 		border-radius: 8px;
    288. 		background-color: #FFFFFF;
    289. 		position: relative;
    290. 		font-size: 13px;
    291. 		overflow: hidden;
    292. 		border: 1px solid rgba(65, 157, 231, 0.56);
    293. 	}
    294.  
    295. 	.slide.active {
    296. 		border: 1px solid #FA7F7F;
    297. 	}
    298.  
    299. 	.moveBac {
    300. 		background-color: rgba(21, 132, 223, 0.08);
    301. 		width: 100%;
    302. 		height: 100%;
    303. 	}
    304.  
    305. 	.moveBacError {
    306. 		background-color: rgba(216, 63, 63, 0.08) !important;
    307. 	}
    308.  
    309. 	.swiperTips {
    310. 		box-sizing: border-box;
    311. 		position: absolute;
    312. 		left: 0;
    313. 		top: 0;
    314. 		width: 100%;
    315. 		color: rgba(255, 255, 255, 0.24);
    316. 		text-align: center;
    317. 		background: -webkit-gradient(linear, left top, right top, color-stop(0, #0076D6), color-stop(.4, #0076D6), color-stop(.5, #fff), color-stop(.6, #0076D6), color-stop(1, #0076D6));
    318. 		animation: tipsBlinkan 3s infinite;
    319. 		-webkit-background-clip: text;
    320. 		-webkit-text-fill-color: transparent;
    321. 		line-height: 40px;
    322. 	}
    323.  
    324. 	.swiperTipsError {
    325. 		box-sizing: border-box;
    326. 		position: absolute;
    327. 		left: 0;
    328. 		top: 0;
    329. 		width: 100%;
    330. 		text-align: center;
    331. 		color: rgba(255, 255, 255, 0.24);
    332. 		background: -webkit-gradient(linear, left top, right top, color-stop(0, #FA7F7F), color-stop(.4, #FA7F7F), color-stop(.5, #fff), color-stop(.6, #FA7F7F), color-stop(1, #FA7F7F));
    333. 		animation: tipsBlinkan 3s infinite;
    334. 		-webkit-background-clip: text;
    335. 		-webkit-text-fill-color: transparent;
    336. 		line-height: 40px;
    337. 	}
    338.  
    339. 	.swiperBlock {
    340. 		width: 40px;
    341. 		height: 40px;
    342. 		border-radius: 8px;
    343. 		/* #ifdef MP-BAIDU */
    344. 		background-repeat: no-repeat;
    345. 		background-size: 16px;
    346. 		background-position: center;
    347. 		/* #endif */
    348. 		display: flex;
    349. 		justify-content: center;
    350. 		align-items: center;
    351. 		position: absolute;
    352. 		left: 0px;
    353. 		top: -1px;
    354. 	}
    355.  
    356. 	.successBlock {
    357. 		background-color: #0076D6;
    358. 		/* #ifdef MP-BAIDU */
    359. 		background-image: url('https://m.by56.com/Images/doubleArrow.svg');
    360. 		/* #endif */
    361. 	}
    362.  
    363. 	.errorBlock {
    364. 		background-color: #FA7F7F !important;
    365. 	}
    366.  
    367. 	.paddingL40 {
    368. 		padding-left: 40px;
    369. 	}
    370.  
    371. 	.animation {
    372. 		transition: all 0.5s;
    373. 	}
    374.  
    375. 	@keyframes tipsBlinkan {
    376. 		0% {
    377. 			background-position: -100px 0;
    378. 		}
    379.  
    380. 		100% {
    381. 			background-position: 100px 0;
    382. 		}
    383. 	}
    384. style>

  • 相关阅读:
    Codeforcess834
    CentOS 管理多版本gcc —— 筑梦之路
    【PostgreSQL】PostgreSQL 15移除了Stats Collector
    Git 回退代码的两种方法对比
    day58：ARMday5，GPIO流水灯实验
    动态规划（AcWing）： 1）计数类DP，2）树形DP，3）记忆化搜索，4）状态压缩DP，5）数位统计DP；
    Filebeat 如何保持文件状态？
    大麦网-演出赛事票务系统画uml图
    思维导图软件 ConceptDraw MINDMAP mac中文特色介绍
    使用设计模式基于easypoi优雅的设计通用excel导入功能
  • 原文地址：https://blog.csdn.net/meimeieee/article/details/133255621