if-captcha

如何使用

npm install if-captcha

For Vue 3

//main.js
import IfCaptcha from 'if-captcha'
app.use(IfCaptcha)

setup中使用

import {useCaptcha} from 'if-captcha'

setup(){
    let $ = useCaptcha();
    const captcha = async () => {
        let res = await $.verify({
            captchaGetUrl: '/captcha/get',
            captchaCheckUrl: '/captcha/check',
            });
        if(res) {
            alert('验证成功')
        } else {
            alert('验证失败')
        }
    }

    return {
        captcha
    };
}

For Vue 2

//main.js
import IfCaptcha from 'if-captcha'

Vue.use(IfCaptcha)

async captcha(){
    let res = await this.$ifCaptcha.verify({
        captchaGetUrl: '/captcha/get',
        captchaCheckUrl: '/captcha/check',
        });
    if(res) {
        alert('验证成功')
    } else {
        alert('验证失败')
    }
}

$.verify(Options）

param	type	default	desc
captchaType	String: 'blockPuzzle' | 'clickWord'	'blockPuzzle'	模块类型
captchaGetUrl	String	'/captcha/get'	获取图片内容
captchaCheckUrl	String	'/captcha/check'	检查验证结果
params	Object	{}	检查结果额外的传参

返回 {captchaVerification}

captchaGetUrl 支持 Promise对象

captchaGetUrl: async function({ captchaType }){
    return {
       originalImageBase64, //验证码背景 base64
       jigsawImageBase64,  //验证滑块的背景 base64
       token,  // 后端返回的唯一toke
       secretKey  // 端返回的ASE加密key
    }
}

captchaCheckUrl 支持 Promise对象

captchaCheckUrl: async function(payload){
    // const { captchaType, pointJson, token, params } = payload  // 插件返回的关键数据，你可以扩充该数据
    return {
       repCode  // 成功则返回 repCode:"0000"
    }
}

### 示例

let res = await $ifCaptcha.verify({ captchaType: 'blockPuzzle', /** 劫持请求
payload {captchaType: 'blockPuzzle'} 模块抛出的参数 format(success:boolean, data) 对返回结果进行格式化 */ captchaGetUrl: async (payload, format) => { // 自定义逻辑 let res = await request('https://uc-uat.ifyou.net/uc/api/captcha/get', payload) let success = res.repCode == '0000' // 对于clickWord类型 需要如下参数 originalImageBase64, token, secretKey, wordList const { jigsawImageBase64, originalImageBase64, secretKey, token } = res.repData let data = { jigsawImageBase64, originalImageBase64, secretKey, token } // 自定义逻辑结束 ！！！注意data结构, 这是模块可以识别的结构

    return format(success, data)
},

captchaCheckUrl: async (payload, format) => {
    /** 自定义逻辑 */
    let params = { ...payload, foo: 'Hi, World', noise: { env: 'demo', ver: '1.0' } }
    let res = await request('https://uc-uat.ifyou.net/uc/api/captcha/check', params)
    let success = res.repCode == '0000'
    /** 自定义逻辑结束 */
    return format(success)
}

});

if (res) { console.log(JSON.stringify(res)) } else { result.value = '验证失败' }