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
}