0.0.3 • Published 2 years ago
vue-world-captcha v0.0.3
World Captcha 智能行为验证
前端使用
安装插件
npm install world-captcha
页面中引入
<template>
<div id="app">
<form novalidate @submit.stop.prevent="submit">
<uni-forms-item label="手机号码" name="mobile">
<uni-easyinput type="number" maxlength="20" v-model="formData.mobile" :style="inputStyle" placeholder="请输入手机号码" suffixIcon="person"/>
</uni-forms-item>
<uni-forms-item label="登录密码" name="password">
<uni-easyinput type="password" maxlength="20" v-model="formData.password" :style="inputStyle" placeholder="请输入登录密码" />
</uni-forms-item>
<uni-forms-item label="验 证 码" name="code">
<WorldCaptcha v-on:callback="checkcallback" :type="formData.type" v-model="formData.code" :mobile="formData.mobile" :sendsms="true" appKey="xxxxxxxx" appSecret="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
</uni-forms-item>
</form>
</div>
</template>
<script>
import WorldCaptcha from 'world-captcha'
export default {
components: {
WorldCaptcha
},
methods: {
checkcallback(data){
this.formData.code = data.code
this.formData.code1 = data.code1
this.formData.code2 = data.code2
this.formData.code3 = data.code3
},
onSignin () {
}
}
}
</script>
验证标签说明
<WorldCaptcha appKey='aliyun 滑动验证提供的key' appSecret='验证码接口访问密钥' v-model="手机验证码表单绑定" :mobile='验证码绑定的用户' :sendmsm='需要验证发送手机短信验证码时填写true' :type='验证码各类形式:1,2,3,4,5,6' v-on:callback='用户行为验证成功或发手机短信成功后回调' />
不同type类型效果如下:
1、普通填写验证码
2、拉动指示条旋转图片到正确方向
3、拉动指示条滑块到指定位置
4、按顺序点击2个汉字位置
5、按顺序点击3个汉字位置
6、按顺序点击4个汉字位置
checkcallback函数原型为
checkcallback(data){
this.formData.code = data.code
this.formData.code1 = data.code1
this.formData.code2 = data.code2
this.formData.code3 = data.code3
}
成功回调的参数需要与表单一起提交到后端,后端再进行一次验证前端的提交是否一致
后端使用
maven项目引入依赖包
<dependency>
<groupId>top.microworld</groupId>
<artifactId>microworld-captcha-client</artifactId>
<version>1.0.0</version>
</dependency>
springboot添加参数配置application.yml
captcha:
url: https://captcha.microworld.top
appKey: xxxxxxxx
appSecret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
读取配置参数,并初始化Bean
@Value("${captcha.url}")
private String apiUrl;
@Value("${captcha.appKey}")
private String appKey;
@Value("${captcha.appSecret}")
private String appSecret;
@Bean
public CaptchaClient captchaClient() {
CaptchaClient client = new CaptchaClient();
client.setConfig(apiUrl, appKey, appSecret);
return client;
}
业务类注入
@Autowired
private CaptchaClient captchaClient;
验证前端提交的表单数据
boolean valid = captchaClient.verify(mobile, code, code2, code3, code4, type);
如果验证成功通过,valid结果为true,否则表单数据不是前端通过验证的数据,或者时间相隔太长导致数据已经失效
需要注意如果客户的时间系统或服务器时间系统 与验证码服务器的时间偏差太大也会验证失效
为什么需要appSecret,因为考虑appKey被截获时有可能被盗用的情况,为发送手机短信带来损失
应用案例
联系作者
email:327552776@qq.com