if-captcha
v2.0.16
Published
安全验证滑块服务插件(Vue2/Vue3)
Downloads
3
Readme
如何使用
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://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 = '验证失败'
}