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