Web Page Validation Code

介绍

• 默认自动计算
• 支持异步方法验证
• 扶持 JavaScript、TypeScript语法

Html

// Javascript
<canvas id="canvas"></canvas>

// React
<canvas ref={canvas}></canvas>

// Vue
<canvas ref="canvas"></canvas>

方法

• graphic() 图文验证
• equation() 算式验证
• sliders() 滑动验证
• updateCode() 从服务获取验证码

介绍

import wpvCode from 'wpv-code'

const target = '"canvas" | <canvas /> '

const code = wpvCode(target)

图文验证码

code.graphic()

算术验证码

code.equation()

滑动验证

// 打开服务验证方式
code.openServerVerify = async () => { 
    return Promise((reslove, reject) => {
        reslove({ 
            value: true ｜ false
        })
    })
}

code.sliders(() => {
    // 验证成功回调
})

将默认计算，更改为 server 计算

code.updateCode = async () => { 
    return Promise((reslove, reject) => {
        reslove({ 
            label?: '8R8R | 1 + 1', 
            value: '8R8R | 2' 
        })
    })
}

Product

code.product

配置

Parameter | Instructions | Type | Default | Version --- | --------- | ------ | ------ | ---- width | Canvas Width | number / 'auto' | 120 | >= 0.1.6 height | Canvas Height | number | 38 | >= 0.0.1 ratio | Canvas 精度 | number | 4 | >= 0.0.1 length | 验证码长度 | 4 ｜ 6 | 4 | >= 0.0.1 space | 验证码间隔 | number | 2 | >= 0.0.1 slidersTheme | 滑动主题配置 | Object | | > 0.1.6

Sliders Theme

Parameter | Instructions | Type | Default | Version --- | --------- | ------ | ------ | ---- bg | 背景色 | string | #5F944C | >= 0.1.6 borderColor | 边框颜色 | string | #92CB62 | >= 0.1.6 pointColor | 滑动点颜色 | string | #F7C652 | >= 0.1.6 iconColor | icon颜色 | string | #5F944C | >= 0.1.6 text | 文字描述 | Array<string> | ['请按住滑块，拖到最右边', '验证中...', '完成验证', '验证失败'], | >= 0.1.6

图文验证码

import wpvCode from 'wpv-code'

默认字符长度为四位

const code = wpvCode('canvas')
code.graphic()

// Calculation results
console.log(code.product) // [a-zA-Z0-9]

六位字符

const code = wpvCode('canvas')
code.config.length = 6

code.graphic()

// 字符结果产出
console.log(code.product) // [a-zA-Z0-9]

计算方式验证

import wpvCode from 'wpv-code'

// Default Single digit calculation
const code = wpvCode('canvas')
code.equation()

// Calculation results
console.log(code.product)

updateCode

const code = wpvCode('canva')

const asyncdata = () => {
    return new Promise((reslove, reject) => {
        reslove({ 
            label: '1 + 1', 
            value: '2' 
        })
    })
}

const data = () => {
    return { 
            label: '1 + 1', 
            value: '2' 
        }
}

// async function
code.updateCode = asyncdata

// function
code.updateCode = data

// draw
code.equation()

接口与类型

export type MainParamType = string | HTMLCanvasElement

export type UpdateCodeType = Promise<any> | Function | null
export type openServerVerifyType = Promise<any> | Function | null


export interface InterfaceWpvCode {
  target: MainParamType
  product: string
  config: InterfaceConfig
  graphic: Function
  equation: Function
  sliders: Function
  updateCode: UpdateCodeType
  openServerVerify: openServerVerifyType
}

export interface InterfaceConfig {
  ratio: number
  width: number | string
  height: number
  space: number
  length: number
  slidersTheme: InterfaceSlidersDefalutTheme
}

export interface InterfaceAsyncCode {
  label?: string
  value: string | boolean
}

export interface InterfaceSlidersDefalutTheme {
  bg: string
  borderColor: string
  pointColor: string
  iconColor: string
  text: Array<string>
}
import wpvCode, { ... } from 'wpvcode'

默认参数

export const slidersDefalutTheme: InterfaceSlidersDefalutTheme = {
  bg: '#5F944C',
  borderColor: '#92CB62',
  pointColor: '#F7C652',
  iconColor: '#fff',
  text: ['请按住滑块，拖到最右边', '验证中...', '完成验证', '验证失败'],

}



export const defaultConfig: InterfaceConfig = {

  ratio: 4,
  width: 120,
  height: 38,
  space: 2,
  length: 4,
  slidersTheme: slidersDefalutTheme
}

export const sliderDefaultConfig: InterfaceConfig = {
  ...defaultConfig,
  width: 342,
  height: 60
}


export const defaultWpvCodeObject: InterfaceWpvCode = {
  target: '',
  product: '',
  config: defaultConfig,
  graphic: () => {},
  equation: () => {},
  sliders: () => {},
  openServerVerify: null,
  updateCode: null
}

import wpvCode, { ... } from 'wpv-code'

案例

<input id="input" />
<canvas id="canvas"></canvas>

const code = wpvCode('canvas')
const inputValue = document.getElementById('input').value

// Draw
code.graphic()

// Calculation results
code.product

if (inputValue === code.product) {
    // Success
} else {

    // failure 
    code.graphic()
    
}