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

時間 2019-12-05

標籤 vue 使用驗證碼 demo 简体版

原文原文鏈接

前言：html

vue中使用極驗驗證碼，最好是在頁面渲染的時候（mounted)進行驗證碼的初始化，而後在初始化回調中綁定觸發彈出驗證碼的事件。這樣在點擊按鈕或者進行特定操做時可以快速的彈出驗證碼。vue

關鍵代碼：jquery

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0">
 7         <title>極驗使用實例</title>
 8     </head>
 9 
10     <body>
11         <div id="app">
12             <div class="item">
13                 <h4>bind（隱藏式）</h4>
14                 <button id="btn">提交</button>
15             </div>
16         </div>
17     </body>
18     <script src="https://magicactivity.oss-cn-hangzhou.aliyuncs.com/activity/common_js/lib/jquery.min.js"></script>
19     <script src="http://static.geetest.com/static/tools/gt.js"></script>
20     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
21     <script>
22         let {
23             log
24         } = console
25         Vue.config.silent = false;
26         Vue.config.devtools = true;
27         var app = new Vue({
28             el: '#app',
29             data: {},
30             created: function() {},
31             mounted: function() {
32                 this.init()
33             },
34             methods: {
35                 init() {
36                     $.ajax({
37                         url: "http://xxx.cn/user/getCheckCode",
38                         success: function(data) {
39                             var data = data.d
40                             initGeetest({
41                                 // 如下配置參數來自服務端 SDK
42                                 gt: data.gtId,
43                                 challenge: data.gtTrans,
44                                 offline: data.offline == 1 ? true : false, //極驗API服務器是否宕機 false：宕機
45                                 new_captcha: true,
46                                 https: false,
47                                 product: "bind" // 產品形式，包括：float，popup
48                             }, function(captchaObj) {
49                                 captchaObj.onReady(function() {
50                                     $("#btn").click(function() {
51                                         captchaObj.verify();
52                                     })
53                                 }).onSuccess(function() {
54                                     var result = captchaObj.getValidate();
55                                     if(!result) {
56                                         log("出錯啦，請先完成驗證！")
57                                     } else {
58                                         log("ok")
59                                         //驗證經過後的業務邏輯
60                                         //......
61                                     }
62                                 }).onError(function() {
63                                     console("出錯啦，請稍後重試！")
64                                     //監聽驗證出錯事件，提供用戶或者刷新頁面重試
65                                 }).onClose(function() {
66                                     //對於product爲bind形式的驗證。當用戶關閉彈出來的驗證時，會觸發該回調。
67                                 });
68                             })
69                         }
70                     });
71                 }
72             }
73         })
74     </script>
75 
76 </html>

如上，在頁面渲染的時候就進行驗證碼初始化，這樣在點擊按鈕的時候就能快速的彈出驗證碼。可是，若是後端沒法拿到uuid，而須要輸入手機號碼之類的帳號進行驗證，那麼就須要在用戶輸入手機號碼以後才能進行初始化了。這樣的話，也就只能再獲取到用戶輸入的手機號以後才能進行驗證碼初始化了。可是，在用戶輸入手機號碼以後進行初始化，驗證碼彈窗彈出會有些延遲，在初始化以前進行loading就行了，初始化完成後隱藏loading，體驗就會好一些。ajax

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。