Have ideas to improve npm?Join in the discussion! »

    @jzjy/verify

    1.3.0 • Public • Published

    Verify 验证码

    安装

    可以使用Npm或Yarn

    npm i --save @jzjy/verify
    

    或者

    yarn add @jzjy/verify
    

    如何引入

    1. 模块引入方式
    import { verify } from '@jzjy/verify'
    
    1. CDN引入方式

    案例

    1. 模块版
    <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>
    1. 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
    }

    Install

    npm i @jzjy/verify

    DownloadsWeekly Downloads

    0

    Version

    1.3.0

    License

    ISC

    Unpacked Size

    199 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar