0.0.2 • Published 4 years ago
@bryce-c/verificate-library v0.0.2
verificate-library
基于 vue
和 iview
的二次校验库
一、极验证
配置参考地址: 官方文档
I. 极验证实例化 new VerificateLibrary.Geetest({url, callback, [options]})
a. url
获取极验证信息的地址
b. callback
回调函数,参数为极验证的实例 captchaObj
c. options
可选的极验证配置,e.g. 宽度width
、语言lang
等
II. 将captchaObj
实例挂载到节点
e.g. 在 `vue` 组件中使用
import VerificateLibrary from '@spark/verificate-library'
export default {
name: 'Geetest',
data () {
return {
geetestObj: null
}
},
methods: {
geeCb (captchaObj) {
let hadGeetest = this.$refs.geetestBox.childNodes.length
if (hadGeetest) captchaObj.destroy()
captchaObj.appendTo(this.$refs.geetestBox)
},
geetest () {
if (!this.geetestObj) {
this.geetestObj = new VerificateLibrary.Geetest({
url: 'http://api.bitotc.bench.bitpay.com/uc/captcha/mm/gee',
callback: this.geeCb
})
}
this.geetestObj.validate()
}
}
}
二、信息验证(手机验证码、邮箱验证码等)
I. 信息验证实例化 new VerificateLibrary.Msgtest(this.$casClient)
,注意此处需要传入一个casClient
实例
II. 初始化内部验证模态框 Msgtest.initModal(vue, callback, [options])
a.vue
为一个参数为一个vue
实例;
b.callback
为校验结果的回调,其参数值类型为 Boolean
;
c.options
可选配置项,可自定义倒计时时间 e.g.{ startTime: 30 }
e.g. 在 vue 组件中使用
import VerificateLibrary from '@spark/verificate-library'
// ...
methods: {
msgTest () {
let msgtest = new VerificateLibrary.Msgtest(this.$casClient)
msgtest.initModal(this, res => {
// do something...
})
}
}
// ...
另: 如果需要自定义模态框,需要调用该实例的方法
getCasCaptcha()
获取验证码checkCaptcha(code)
校验验证码 参数为code
,返回一个Promise
,值类型为Boolean
信息验证模块 备注:
/**
* 暂缺功能:
* 1. 验证码的正则验证限制
* 2. 国际化
*/
三、谷歌验证
I. 谷歌验证实例化
II. 调用验证方法
注:调用方法与前两个相似,不再赘述,参考以下使用,可传入 onSuccess
和 onError
回调函数
// ...
methods: {
googleSend () {
// 生成
let url = this.$axios.defaults.baseURL
this.GoogletestInstance.generate({
url: `${url}/profile/googleAuth/send`,
callback: this.googletestCb
})
},
googleBind () {
// 绑定
let url = this.$axios.defaults.baseURL
this.GoogletestInstance.bind({
url: `${url}/profile/googleAuth/bind`,
data: qs.stringify(this.formData),
onSuccess: this.bindSuccess,
onError: this.bindError
})
},
bindSuccess () {
this.$Message.success('绑定成功!')
},
bindError () {
this.$Message.error('绑定失败!')
},
googleTest () {
// 验证
let casUrl = this.$casClient.basePath
this.GoogletestInstance.check({
casUrl,
code: this.formCheck.code,
tgt: window.localStorage.getItem('TGC'),
onSuccess: this.testPass,
onError: this.testFailed
})
},
testPass () {
this.$Message.success('验证通过!')
},
testFailed () {
this.$Message.error('验证未通过!')
}
}
// ...
四、图片验证
图片验证比较简单 参考以下使用
// ...
methods: {
imagetest () {
let Imagetest = new VerificateLibrary.Imagetest({
url: 'http://api.bitotc.bench.bitpay.com/uc/captcha/mm/img'
})
this.imageCode = Imagetest.validate()
}
}
// ...