@liweitao001/ant-captcha v0.0.13

前端接入

1. 兼容性

IE8+、Chrome、Firefox.(其他未测试)

基础示例

<template>
	<ant-captcha
		@success="'success'" //验证成功的回调函数
		:mode="'pop'"     //调用的模式
		:captchaType="'blockPuzzle'"    //调用的类型 点选或者滑动
        :imgSize="{ width: '330px', height: '155px' }" //图片的大小对象
        ref="verify"
    ></ant-captcha>
    //mode="pop"模式
    <button @click="useVerify">调用验证组件</button>
</template>

****注: mode为"pop"时,使用组件需要给组件添加ref值,并且手动调用show方法 例: this.$refs.verify.show()**** 
****注: mode为"fixed"时,无需添加ref值,无需调用show()方法****

<script>
//引入组件
import ant-captcha from "@analysys/ant-captcha";  
export default {
	name: 'app',
	components: {
		Verify
	}
	methods:{
		success(params){
		  // params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
        },
        useVerify(){
            this.$refs.verify.show()
        }
	}
}
</script>

3.回调事件

4. 验证码参数

5.1默认接口api地址

5.2 获取验证码接口详情

接口地址：http://:/captcha/get

组件内部默认请求服务器地址: process.env.BASE_API ; 是vue项目打包配置地址,方便分环境打包

请求参数：

{
	"captchaType": "blockPuzzle"  //验证码类型 clickWord
}

响应参数：

{
    "repCode": "0000",
    "repData": {
        "originalImageBase64": "底图base64",
        "point": {    //默认不返回的，校验的就是该坐标信息，允许误差范围
            "x": 205,
            "y": 5
        },
        "jigsawImageBase64": "滑块图base64",
        "token": "71dd26999e314f9abb0c635336976635", //一次校验唯一标识
        "result": false,
        "opAdmin": false
    },
    "success": true,
    "error": false
}

5.3 核对验证码接口详情

请求接口：http://:/captcha/check

组件内部默认请求服务器地址: process.env.BASE_API ; 是vue项目打包配置地址,方便分环境打包

请求参数：

{
	 "captchaType": "blockPuzzle",
	 "pointJson": "QxIVdlJoWUi04iM+65hTow==",  //aes加密坐标信息
	 "token": "71dd26999e314f9abb0c635336976635"  //get请求返回的token
}

响应参数：

{
    "repCode": "0000",
    "repData": {
        "captchaType": "blockPuzzle",
        "token": "71dd26999e314f9abb0c635336976635",
        "result": true,
        "opAdmin": false
    },
    "success": true,
    "error": false
}