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

极验流程

客户端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等等 } }

然后就弹出来了

备注

1.初始化用initGeetest 2. 获取验证结果用captcha_obj.getValidate() 3. 调起验证用captcha_obj.verify() 4. 充值用captcha_obj.reset() 5. 其他的onready onsuccess onerror自行选择使用