vue中使用极验验证码的方法（附demo）

时间:2021-04-02 人气:0

前言：

vue中使用极验验证码，最好是在页面渲染的时候（mounted)进行验证码的初始化，然后在初始化回调中绑定触发弹出验证码的事件。这样在点击按钮或者进行特定操作时能够快速的弹出验证码。

关键代码：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0">
    <title>极验使用实例</title>
  </head>

  <body>
    <div id="app">
      <div class="item">
        <h4>bind（隐藏式）</h4>
        <button id="btn">提交</button>
      </div>
    </div>
  </body>
  <script src="https://magicactivity.oss-cn-hangzhou.aliyuncs.com/activity/common_js/lib/jquery.min.js"></script>
  <script src="http://static.geetest.com/static/tools/gt.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let {
      log
    } = console
    Vue.config.silent = false;
    Vue.config.devtools = true;
    var app = new Vue({
      el: '#app',
      data: {},
      created: function() {},
      mounted: function() {
        this.init()
      },
      methods: {
        init() {
          $.ajax({
            url: "http://xxx.cn/user/getCheckCode",
            success: function(data) {
              var data = data.d
              initGeetest({
                // 以下配置参数来自服务端 SDK
                gt: data.gtId,
                challenge: data.gtTrans,
                offline: data.offline == 1 ? true : false, //极验API服务器是否宕机 false：宕机
                new_captcha: true,
                https: false,
                product: "bind" // 产品形式，包括：float，popup
              }, function(captchaObj) {
                captchaObj.onReady(function() {
                  $("#btn").click(function() {
                    captchaObj.verify();
                  })
                }).onSuccess(function() {
                  var result = captchaObj.getValidate();
                  if(!result) {
                    log("出错啦，请先完成验证！")
                  } else {
                    log("ok")
                    //验证通过后的业务逻辑
                    //......
                  }
                }).onError(function() {
                  console("出错啦，请稍后重试！")
                  //监听验证出错事件，提供用户或者刷新页面重试
                }).onClose(function() {
                  //对于product为bind形式的验证。当用户关闭弹出来的验证时，会触发该回调。
                });
              })
            }
          });
        }
      }
    })
  </script>
</html>

如上，在页面渲染的时候就进行验证码初始化，这样在点击按钮的时候就能快速的弹出验证码。但是，如果后端无法拿到uuid，而需要输入手机号码之类的账号进行验证，那么就需要在用户输入手机号码之后才能进行初始化了。这样的话，也就只能再获取到用户输入的手机号之后才能进行验证码初始化了。但是，在用户输入手机号码之后进行初始化，验证码弹窗弹出会有些延迟，在初始化之前进行loading就好了，初始化完成后隐藏loading，体验就会好一些。

总结

以上所述是小编给大家介绍的vue中使用极验验证码的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

加载全部内容