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