@bryce-c/verificate-library

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()
    }
  }
 // ...