소스 검색

大司空短信校验问题

ellisran 2 주 전
부모
커밋
76576e0b70
3개의 변경된 파일108개의 추가작업 그리고 42개의 파일을 삭제
  1. 1 1
      app/controller/profile_controller.js
  2. 2 1
      app/lib/dsk.js
  3. 105 40
      app/view/profile/sms.ejs

+ 1 - 1
app/controller/profile_controller.js

@@ -380,7 +380,7 @@ module.exports = app => {
                         if (!(/^1[3456789]\d{9}$/.test(data.mobile))) {
                             throw '手机号码格式有误';
                         }
-                        await dsk.sendSms(data.mobile);
+                        await dsk.sendSms(data.mobile, data.captchaVerifyParam);
                         break;
                     case 'bind':
                         if (dskAccount.dsk_account) {

+ 2 - 1
app/lib/dsk.js

@@ -30,10 +30,11 @@ class DSK {
         return jwt.sign({ iat: Date.now() }, privateKey);
     }
 
-    async sendSms(mobile) {
+    async sendSms(mobile, captchaVerifyParam) {
         const url = this.url + 'api/sms/external/getSmsCode';
         const postData = {
             mobile,
+            captchaVerifyParam,
         };
         let result = false;
         try {

+ 105 - 40
app/view/profile/sms.ejs

@@ -133,9 +133,20 @@
         </div>
     </div>
 </div>
+<div id="captcha-element"></div>
 <script type="text/javascript">
     const csrf = '<%= ctx.csrf %>';
 </script>
+<script>
+    window.AliyunCaptchaConfig = {
+        language: 'cn',
+        // 必填,验证码示例所属地区,支持中国内地(cn)、新加坡(sgp)
+        region: "cn",
+        // 必填,身份标。开通阿里云验证码2.0后,您可以在控制台概览页面的实例基本信息卡片区域,获取身份标
+        prefix: "n1styx",
+    };
+</script>
+<script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>
 <script type="text/javascript" src="/public/js/profile.js"></script>
 <script>
     $(function () {
@@ -159,48 +170,102 @@
                 $('#dsk-code-div').show();
             }
         });
-        // 获取验证码
-        $("#get-dsk-code").click(function() {
-            // if (isPosting2) {
-            //     return false;
-            // }
-            const mobile = $('#dak-mobile').val();
-            if (!mobile) {
-                toastr.error('请输入手机号');
-                return false;
-            }
-            // 手机号验证
-            if (!/^1[3456789]\d{9}$/.test(mobile)) {
-                toastr.error('请输入正确的手机号');
-                return false;
-            }
-            const btn = $(this);
+        var captcha;
+        // 弹出式,除region和prefix以外的参数
+        window.initAliyunCaptcha({
+            // 场景ID。根据步骤二新建验证场景后,您可以在验证码场景列表,获取该场景的场景ID
+            SceneId: "1mqqisql",
+            // 验证码模式,popup表示弹出式,embed表示嵌入式。无需修改
+            mode: "popup",
+            // 页面上预留的渲染验证码的元素,与原代码中预留的页面元素保持一致。
+            element: "#captcha-element",
+            // 触发验证码弹窗或无痕验证的元素
+            button: "#get-dsk-code",
+            // 验证码验证通过回调函数
+            success: function (captchaVerifyParam) {
+                // 入参为验签captchaVerifyParam
+                // 1.向后端发起业务请求进行验证码验签captchaVerifyParam校验
+                // 2.根据校验结果来进行业务处理
+                // 3.如业务需要重新进行验证码验证,调用验证码初始化方法initAliyunCaptcha重新初始化验证码
+                // if (isPosting2) {
+                //     return false;
+                // }
+                const mobile = $('#dak-mobile').val();
+                if (!mobile) {
+                    toastr.error('请输入手机号');
+                    return false;
+                }
+                // 手机号验证
+                if (!/^1[3456789]\d{9}$/.test(mobile)) {
+                    toastr.error('请输入正确的手机号');
+                    return false;
+                }
+                const btn = $('#get-dsk-code');
 
-            postData('/profile/dsk/api', { type: 'sms', mobile: mobile }, function (response) {
-                codeSuccess(btn);
-            });
-
-            // $.ajax({
-            //     url: '/profile/dsk/api?_csrf_j=' + csrf,
-            //     type: 'post',
-            //     data: { type: 'code', mobile: mobile },
-            //     dataTye: 'json',
-            //     error: function() {
-            //         isPosting2 = false;
-            //     },
-            //     beforeSend: function() {
-            //         isPosting2 = true;
-            //     },
-            //     success: function(response) {
-            //         isPosting2 = false;
-            //         if (response.err === 0) {
-            //             codeSuccess(btn);
-            //         } else {
-            //             toastr.error(response.msg);
-            //         }
-            //     }
-            // });
+                postData('/profile/dsk/api', { type: 'sms', mobile: mobile, captchaVerifyParam }, function (response) {
+                    codeSuccess(btn);
+                });
+            },
+            // 验证码验证不通过回调函数
+            fail: function (result) {
+                // 入参为不通过信息
+                // 正常验证有效期内不需要做任何操作,验证码自动刷新,重新进行验证
+                toastr.error(result);
+                console.error(result);
+            },
+            // 绑定验证码实例回调函数,该回调会在验证码初始化成功后调用
+            getInstance: function (instance) {
+                captcha = instance;
+            },
+            // 滑块验证和一点即过的验证形态触发框体样式,支持自定义宽度和高度,单位为px。
+            slideStyle: {
+                width: 360,
+                height: 40,
+            },
+            // ...其他参数,参考initAliyunCaptcha参数说明
         });
+        // 获取验证码
+        // $("#get-dsk-code").click(function() {
+        //     // if (isPosting2) {
+        //     //     return false;
+        //     // }
+        //     const mobile = $('#dak-mobile').val();
+        //     if (!mobile) {
+        //         toastr.error('请输入手机号');
+        //         return false;
+        //     }
+        //     // 手机号验证
+        //     if (!/^1[3456789]\d{9}$/.test(mobile)) {
+        //         toastr.error('请输入正确的手机号');
+        //         return false;
+        //     }
+        //     const btn = $(this);
+        //
+        //     postData('/profile/dsk/api', { type: 'sms', mobile: mobile }, function (response) {
+        //         codeSuccess(btn);
+        //     });
+        //
+        //     // $.ajax({
+        //     //     url: '/profile/dsk/api?_csrf_j=' + csrf,
+        //     //     type: 'post',
+        //     //     data: { type: 'code', mobile: mobile },
+        //     //     dataTye: 'json',
+        //     //     error: function() {
+        //     //         isPosting2 = false;
+        //     //     },
+        //     //     beforeSend: function() {
+        //     //         isPosting2 = true;
+        //     //     },
+        //     //     success: function(response) {
+        //     //         isPosting2 = false;
+        //     //         if (response.err === 0) {
+        //     //             codeSuccess(btn);
+        //     //         } else {
+        //     //             toastr.error(response.msg);
+        //     //         }
+        //     //     }
+        //     // });
+        // });
 
         $('#dsk-bind-btn').click(function () {
             const mobile = $('#dak-mobile').val();