极验 - 图形验证码

工作中需要使用图形验证码的场景，小组使用的是极验的图形验证码，所以记录一下

使用float 的方式

html

<div id='captcha' > </div>

js

调用图形验证码需要手机号或者其他的验证字段,在发起事件中使用以下代码

在验证请求中的返回数据 value  中获取需要的参数，并保存
this.geetestVerifyRequest = {    
'geetestInitRequest': value.data['geetestInitRequest'],    
'serverDown': value.data['serverDown']
};
window.initGeetest({    
    gt: value.data['gt'],    
    challenge: value.data['challenge'],    
    new_captcha: value.data['new_captcha'], // 用于宕机时表示是新验证码的宕机    
    offline: !value.data['success'], // 表示用户后台检测极验服务器是否宕机，一般不需要关注    
    product: "float", // 产品形式，包括：float，popup   
    lang:'cn', // 默认 中文 en 英文 
    width: "100%"    
    // 更多配置参数请参见：
    http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, (captchaObj) => {    
    // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交    
    // this.$message('请完成安全码验证'); 
    // 清理上一个验证元素的节点，方式信息错乱   
    this.clearCaptcha();   
    // 添加元素节点到页面 
    captchaObj.appendTo("#captcha");    
    captchaObj.onReady(() => {  
        // 验证码加载成功          
    }).onSuccess(() => {  
        // 验证成功需要往下执行的事件代码
        //  发送验证码        
    });   
 this.captchaObj = captchaObj;    
// 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html});

图形验证成功，发送验证码成功，那么接下来就是验证发送的验证码

进行验证时候传给后台的参数需要从页面的captcha的form表单中获取

const form = document.getElementsByClassName('geetest_form')[0];
真正的参数在 form.children 中

在获取的参数中需要根据每一个项目的不同，进行字段的修改与赋值

清理验证码填充的 事件

clearCaptcha() {    
    this.$refs['captcha'].innerHTML = '';    
    this.captchaObj = null;
}

使用 bind 方式

页面不需要html 元素就可以，直接在页面的添加

js

同样的需要一些手机号码作为参数调用  调用成功之后要嗯返回值value 中获取需要的数据

this.geetestVerifyRequest = {    
    'geetestInitRequest': value.data['geetestInitRequest'],    
    'serverDown': value.data['serverDown']
};
window.initGeetest({    
    gt: value.data['gt'],    
    challenge: value.data['challenge'],    
    new_captcha: value.data['new_captcha'], // 用于宕机时表示是新验证码的宕机    
    offline: !value.data['success'], // 表示用户后台检测极验服务器是否宕机，一般不需要关注
    product: "bind", // 产品形式，包括：float，popup   
    lang:'cn', // 默认 cn  中文  en  英文 
    width: "100%"    
    // 更多配置参数请参见：
    http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, (captchaObj) => {    
    captchaObj.onReady(function () {        
        captchaObj.verify();        
        // 页面添加 图形验证码   
    }).onSuccess(function () {        
    var result = captchaObj.getValidate();        
    if (!result) {            
        this.$message('请完成安全码验证')            
        that.loadingCaptchaDone = false        
    } else {            
        //验证通过后的业务逻辑             
        that.$set(that.geetestVerifyRequest, 
                'challenge', result.geetest_challenge);
        that.$set(that.geetestVerifyRequest, 
                'validate', result.geetest_validate); 
        that.$set(that.geetestVerifyRequest, 
                'secCode', result.geetest_seccode);  
          
        // 执行图形验证成功之后的事件代码        
    }    
}).onError(function () {           
     //监听验证出错事件，提供用户或者刷新页面重试   
 }).onClose(function () {       
     //对于product为bind形式的验证。当用户关闭弹出来的验证时，会触发该回调。          
});    
that.captchaObj = captchaObj    
// 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html});

图形验证码验证之后，发送验证码成功，则开始验证收到的验证码，参数在加载验证码中直接获取，页面没有可以承载的表单

that.$set(that.geetestVerifyRequest, 'challenge', result.geetest_challenge);
that.$set(that.geetestVerifyRequest, 'validate', result.geetest_validate);
that.$set(that.geetestVerifyRequest, 'secCode', result.geetest_seccode);

注解

that.geetestVerifyRequest 是在vue 的data 中定义的数据

float 与bind 方式在页面的加载方式有所不同，需要注意

bind 方式 参考链接 ：www.jb51.net/article/175…