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>

<aliyun-capcha appKey='aliyun 滑动验证提供的key' appSecret='验证码接口访问密钥' v-model="手机验证码表单绑定" :mobile='验证码绑定的用户' :sendmsm='需要验证发送手机短信验证码时填写true' :type='验证码各类形式：1，2，3，4，5，6' v-on:callback='用户行为验证成功或发手机短信成功后回调' />

不同type类型效果如下：
1、普通填写验证码
[普通填写验证码]:http://cdn.microworld.top/Fn4xNNkB0G1ZhqT7E0ywzx6jb2mw.png

2、拉动指示条旋转图片到正确方向
[拉动指示条旋转图片到正确方向]:http://cdn.microworld.top/FgoCMenqJQPr6PI0hQ_1qWmGqyHR.png

3、拉动指示条滑块到指定位置
[拉动指示条滑块到指定位置]:http://cdn.microworld.top/FgoCMenqJQPr6PI0hQ_1qWmGqyHR.png

4、按顺序点击2个汉字位置
[按顺序点击2个汉字位置]:http://cdn.microworld.top/FqUudLtBgbfkIc5CtoxLYdD89L0C.png

5、按顺序点击3个汉字位置
[按顺序点击3个汉字位置]:http://cdn.microworld.top/FvtNQA_sRJZx_ytILjqVJ0fTUMvO.png

6、按顺序点击4个汉字位置
[按顺序点击4个汉字位置]:http://cdn.microworld.top/FnAxzXmlTzCGy6e9pSTBOEG2Bte0.png


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/]](http://www.microworld.top/)


## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report