Geetest极验+VUE把验证码绑定到自己的按钮（例如获取验证码）

程序员文章站 2022-06-04 09:53:34

...

极验流程

客户端gt.js里调用initGeetest发起初始化，会向后端获取gt等参数（后端会跟极验通信），然后前端会根据传回的数据去决定用什么做验证，然后验证通过之后会有三个参数提供给后端进行二次校验的。具体接入看极验官方文档
由于极验官方文档使用的是原生js，我这里用的vue，不能直接用vue实例，因此我微改了下极验的js

改源码

修改源码初始化函数initGeetest，传入vue实例
1.1 修改gt.js 在initGeetest函数最后加入参数vm
双击选中callback，往下翻找到调用的地方。传入vm
然后使用的时候就可以用我们的vue实例对象了
. 例如我的原本没有验证码的时候调用getSms函数获取短信验证码，使用极验后加入initGT函数用来初始化极验服务
. initGT （是在vue的methods里，并且在mounted内调用initGT对极验验证码初始化）
. 官方原版是let handler= function (captcha_obj){}我改成了let handler= function (captcha_obj,vm) {}

initGT:function(){
                let handler= function (captcha_obj,vm) {
                    captcha_obj.appendTo("#captcha_register");
                    captcha_obj.onReady(function () {
                        //初始化完成代码
                        vm.captcha_obj=captcha_obj//把这个obj放入了vue实例里管理
                    }).onSuccess(function(){
                        //获取验证完成的三个参数调用captcha_obj.getValidate()
                        vm.captcha_obj=captcha_obj
                        //完成验证再次调用发送验证码函数，即可通过检测发送请求
                        vm.getSms()
                    }).onError(function () {
                        captcha_obj.reset();
                    })
                }
                this.$axios.get('/geetest_register?t='+(new Date()).getTime()).then(res=>{
                    let data=res.data
                    // eslint-disable-next-line no-undef
                    initGeetest({
                        gt: data.gt,
                        challenge: data.challenge,
                        new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                        offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                        product: "bind", // 产品形式，包括：float，popup
                        width: "100%"
                    }, handler,this);
                })
            },

然后getSms函数是这样的

getSms:function(){
	//调用参数检查（手机号码），参数检查自己写
	if(this.chechPara())
	{
			let geetest_data=this.captcha_obj.getValidate()
			if(geetest_data==undefined){
				//没有通过验证
				this.captcha_obj.verify()//调起极验进行验证
				return
			}
			//通过验证，把验证后的三个参数放入payload post去短信验证码接口，极验验证码需要后端二次验证
			let payload={}
			payload.geetest_challenge=geetest_data.geetest_challenge
            payload.geetest_seccode=geetest_data.geetest_seccode
            payload.geetest_validate=geetest_data.geetest_validate
            //手机号
            payload.phone=''
			//往验证码接口发起请求 ajax或者axios等等
	}
}