vue使用极验

最新推荐文章于 2023-05-22 10:03:00 发布

浊清。。。

最新推荐文章于 2023-05-22 10:03:00 发布

阅读量2.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_28353055/article/details/84392580

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.在vue中使用级验gt.js文件的时候，参考：https://blog.csdn.net/XiaoYi0215/article/details/79921967
在我这边个人使用过程中，缺少了这两句，一直出不来，放置在闭包最后，个人文件放置在libs下

window.initGeetest = initGeetest;
return initGeetest;

2.当然，现在使用起来也是特别简单的，直接在需要放置的代码里头添加，在模板字符串里头添加

<div id="captcha-box"></div>

3.个人是在方法中定义一个方法，然后页面加载的时候引入

geetest(e) {
  this.addYz = true
  let _this = this
  _this.geetest_challenge=''
  _this.geetest_validate=''
  _this.geetest_seccode=''
  this.$api.get('/api/geetest/startCaptcha').then(res =>{   // 调取后端的第一次验证接口，获取到对应的三个参数 
    this.xwyz = res
    let removeObj = document.getElementById('captcha-box');    // 获取dom元素
    if(removeObj!='underfined'){
      removeObj.innerHTML = ''       // 因为个人当中直接在页面中切换短信或者密码验证，先移除一个，不然会一直 添加
    }
    this.dis = true
    initGeetest({
      gt: res.gt,
      challenge: res.challenge,
      offline: !res.success,
      new_captcha: true
    }, function (captchaObj) {
      captchaObj.reset()    // 在切换登录的时候重置，不需要切换的忽略
      captchaObj.appendTo('#captcha-box');     // 插入验证
      _this.addYz = false
      captchaObj.onSuccess(()=>{     // 第一次验证成功，极验自带的回调
        let result = captchaObj.getValidate();
        _this.dis = false
        _this.geetest_challenge=result.geetest_challenge      //将第一次验证获取的三个参数保存起来，方便二次验证
        _this.geetest_validate=result.geetest_validate
        _this.geetest_seccode=result.geetest_seccode
      })
    });
  })
},

4.在第一次获取参数后，二次验证一次发送给后端。处理完毕

5.细节处理，因为异步，会导致页面有顿挫感，所以添加了一些样式

<div class="cH">
    <div id="captcha-box"></div>
    <div v-if="addYz" class="addYz">正在加载验证码....</div>   // 在未加载的时候用文字代替
</div>

// 样式
.cH{
    min-height: 44px   //设置一个最小高度，这样就不会出现加载将下面东西顶下来
    line-height: 44px
 }
#captcha-box{    // 直接调整样式
    margin-left: 71px
    margin-top: 20px;
    .geetest_holder.geetest_wind{
      width: 385px !important
    }
}

表达不好！