1.0.1 • Published 3 years ago
access-vue-geetest v1.0.1
极验插件
使用方式
npm install access-vue-geetest --save
vue中使用
<template>
<div>
<vue-geetest disable={disable} open-api={{url,...or}} @validSuccess="validSuccess">极验</vue-geetest>
</div>
</template>
import { Geetest } from 'access-vue-geetest'
export default {
components: {
[Geetest.name]: Geetest
},
methods: {
validSuccess() {
console.log('校验成功')
}
}
}
自定义使用方式
import { loadScript } from 'access-vue-geetest'
const options = {
fetchOpt: {
url,
options,
}, // 请求后端接口获取极验配置
sdk, // sdk url地址 默认 https://img.idanchuang.com/resource/files/gt.js
captcha() {
return new Promise((resolve) => {
// 请求后端接口获取极验配置
fetch(url).then(json => json.json()).then(response => {
const { gt, challenge } = response.data
window.initGeetest && window.initGeetest({
gt,
challenge,
offline: !success, // 表示用户后台检验极验服务器是否宕机
product: 'bind',
width: `300px`,
https: true
}, (captchaObj) => {
captchaObj
.onReady(() => {
console.log('onReady')
resolve(captchaObj)
})
})
})
})
} // 校验方法 返回promise
}
// 加载极验sdk
loadScript(options).then(captchaObj => {
captchaObj.onSuccess(() => {
const result = captchaObj.getValidate()
if (!result) {
return
}
// 校验通过后续
...
})
})