uniapp-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被截获时有可能被盗用的情况，为发送手机短信带来损失

应用案例

http://www.microworld.top/

联系作者

email：327552776@qq.com