@jzjy/verify

v1.3.0

Published

4 years ago

行为验证码（滑动拼图）

Downloads

0High
0Medium
0Low

jzjy

captcha verify

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
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme