uniapp滑块验证和依次点击字体验证(包含vue,后端,html端,weex,reactnative,android,ios等多端)

先看代码,复制使用即可,这是一个uniaap和vue版本的行为验证,不同的区别是他们将使用不同的包,包文件我已放在本人文件下载资源中,您将看到以下效果(请看完gif图,中间有过度时间有些长)。感谢captcha 团队的开源支持 附送连接,您对滑块验证有后端,html端,weex,reactnative,android,ios等多端的需求请访问 https://mirror.anji-plus.com/captcha-web/#/

行为验证

第一步 下载本人提供的压缩包 解压之后放进项目任意位置,你可以将其视为组件,放进您的组件目录地址如下:

uniapp行为验证压缩包
vue行为验证压缩包

第二步 npm install crypto-js -S 然后复制以下代码即可看到效果(如果您是vue 请执行 npm install axios crypto-js -S)

<template>
	<view>	<!-- mode取值为fiexd,pop 如果是pop 就会隐藏 需要您调用.show()方法 -->
		<Verify @success="success" mode="fixed" captchaType="clickWord" 
		:imgSize="{ width: '330px', height: '155px' }" ref="verify">
		<!-- captchaType是验证方式:取值为blockPuzzle滑动clickWord字体依次点击 imgSize图片的大小对象-->
		</Verify>
		<button @click="useVerify">调用验证组件</button>
	</view>
</template>
<script>
	//引入组件  需要您引入正确路径 (资源包命名可能有所不同)
	import Verify from "../../verify/verify.vue";
	export default {
    
    
		name: 'app',
		components: {
    
    
			Verify
		},
		methods: {
    
    
			success(params) {
    
    
				console.log(params)
				// params 返回的二次验证参数, 和登录参数一起回传给登录接口,方便后台进行二次验证
			},
			useVerify() {
    
    
				this.$refs.verify.show()
			}
		}
	}
</script>
</script>
<style>
</style>

附加和可能出现的有用信息已添加注释
其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。

猜你喜欢

转载自blog.csdn.net/weixin_47821281/article/details/108533668