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

article/2025/9/10 15:54:09

极验流程

客户端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-undefinitGeetest({gt: data.gt,challenge: data.challenge,new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注product: "bind", // 产品形式，包括：float，popupwidth: "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_challengepayload.geetest_seccode=geetest_data.geetest_seccodepayload.geetest_validate=geetest_data.geetest_validate//手机号payload.phone=''//往验证码接口发起请求 ajax或者axios等等}
}