wpv-code

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()
    
}