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）

返回 {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://sample.com/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://sample.com/api/captcha/check', params)
        let success = res.repCode == '0000'
        /** 自定义逻辑结束 */
        return format(success)
    }

});


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