Verify 验证码
安装
可以使用Npm或Yarn
npm i --save @jzjy/verify
或者
yarn add @jzjy/verify
如何引入
- 模块引入方式
import { verify } from '@jzjy/verify'
- CDN引入方式
案例
- 模块版
<template>
<div>
<h3>嵌入式滑块</h3>
<verify
:mode="'fixed'"
:captcha-type="'blockPuzzle'"
:captcha-id="'9ca07a9c-c260-50ae-2c13-89cde2f34cb9'"
:container-id="'#sliderFixed_btn'"
></verify>
</div>
</template>
<script>
import Verify from "@jzjy/verify"
export default {
name: "sliderFixed",
components: {
Verify
}
}
</script>- CDN版本
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>验证码测试</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/crypto-js/4.0.0/crypto-js.js"></script>
<script src="../../request/dist/index.min.js"></script>
<script src="../dist/index.min.js"></script>
</head>
<body>
<div id="app">1
<div>
<h3>嵌入式滑块</h3>
<verify
:mode="'fixed'"
:captcha-type="'blockPuzzle'"
:captcha-id="'9ca07a9c-c260-50ae-2c13-89cde2f34cb9'"
:container-id="'#sliderFixed_btn'"
></verify>
</div>
<div>
<h3>弹窗滑块</h3>
<button @click.prevent="$refs.verify2.show()">打开</button>
<verify
:mode="'pop'"
:captcha-type="'blockPuzzle'"
:img-size="{ width: '330px', height: '155px' }"
ref="verify2"
></verify>
</div>
</div>
<script>
Vue.component('verify', window.verify)
new Vue({
el: '#app'
})
</script>
</body>
</html>参数
| 参数 | 类型 | 描述 |
|---|---|---|
| captchaType | String | 1）滑动拼图 blockPuzzle 2）文字点选 clickWord |
| mode | String | 验证码的显示方式，弹出式pop，固定fixed，默认：mode : ‘pop’ |
| vSpace | String | 验证码图片和移动条容器的间隔，默认单位是px。如：间隔为5px，默认:vSpace:5 |
| explain | String | 滑动条内的提示，不设置默认是：'向右滑动完成验证' |
| imgSize | Object | 其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:'400px',height:'200px'} |
回调事件
| 参数 | 类型 | 描述 |
|---|---|---|
| success(params) | funciton | 验证码匹配成功后的回调函数,params为返回需回传服务器的二次验证参数 |
| error | funciton | 验证码匹配失败后的回调函数 |
| ready | funciton | 验证码初始化成功的回调函数 |
默认接口api地址
默认baseURL为 https://captcha.anji-plus.com/captcha-api
| 请求URL | 请求方式 |
|---|---|
| /captcha/get | Post |
| /captcha/check | Post |
获取验证码接口详情
接口地址：/captcha/get
- 请求参数
{
"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
}核对验证码接口详情
请求接口：/captcha/check
- 请求参数
{
"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
}