vue中使用極驗驗證碼的方法（附demo）

更新時間：2019年12月04日 13:48:50 作者：逍遙云天

這篇文章主要介紹了vue中使用極驗驗證碼的方法（附demo）本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

前言：

vue中使用極驗驗證碼，最好是在頁面渲染的時候（mounted)進行驗證碼的初始化，然后在初始化回調中綁定觸發(fā)彈出驗證碼的事件。這樣在點擊按鈕或者進行特定操作時能夠快速的彈出驗證碼。

關鍵代碼：

<!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")
                    //驗證通過后的業(yè)務邏輯
                    //......
                  }
                }).onError(function() {
                  console("出錯啦，請稍后重試！")
                  //監(jiān)聽驗證出錯事件，提供用戶或者刷新頁面重試
                }).onClose(function() {
                  //對于product為bind形式的驗證。當用戶關閉彈出來的驗證時，會觸發(fā)該回調。
                });
              })
            }
          });
        }
      }
    })
  </script>
</html>

如上，在頁面渲染的時候就進行驗證碼初始化，這樣在點擊按鈕的時候就能快速的彈出驗證碼。但是，如果后端無法拿到uuid，而需要輸入手機號碼之類的賬號進行驗證，那么就需要在用戶輸入手機號碼之后才能進行初始化了。這樣的話，也就只能再獲取到用戶輸入的手機號之后才能進行驗證碼初始化了。但是，在用戶輸入手機號碼之后進行初始化，驗證碼彈窗彈出會有些延遲，在初始化之前進行l(wèi)oading就好了，初始化完成后隱藏loading，體驗就會好一些。

總結

以上所述是小編給大家介紹的vue中使用極驗驗證碼的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章: