登陆极验证

@@ -23,6 +23,16 @@ const geetest = {
         }).catch(next);
     },
     validate(req, res, next) {
+        let challenge = req.body.geetest_challenge,
+            validate = req.body.geetest_validate,
+            seccode = req.body.geetest_seccode;
+
+        let errRes = {
+            code: 400,
+            message: '验证码错误',
+            captchaShow: true,
+            changeCaptcha: true
+        };
 
         // 使用极验证
         let useGeetest = _.get(req.app.locals.wap, 'geetest.validation', true);
@@ -30,20 +40,19 @@ const geetest = {
         if (!useGeetest) {
             return next();
         }
+        if (!challenge || !validate || !seccode) {
+            return res.send(errRes);
+        }
 
         captcha.validate({
-            challenge: 'xxx',
-            validate: 'xxx',
-            seccode: 'xxx'
+            challenge,
+            validate,
+            seccode
         }).then(function(success) {
             if (success) {
                 return next();
             }
-            return res.send({
-                code: 400,
-                message: '验证码错误',
-                captchaShow: true
-            });
+            return res.send(errRes);
         });
     }
 };

@@ -4,7 +4,7 @@
  * @date: 2015/9/30
  */
 var $ = require('yoho-jquery');
-var ImgCheck = require('plugin/img-check');
+var Validate = require('plugin/validata');
 
 var $account = $('#account'),
     $pwd = $('#pwd'),
@@ -25,7 +25,7 @@ var trim = $.trim;
 var showErrTip = tip.show;
 
 
-var imgCheck = new ImgCheck($captcha, {
+var validate = new Validate($captcha, {
     useREM: {
         rootFontSize: 40,
         picWidth: 150
@@ -33,7 +33,7 @@ var imgCheck = new ImgCheck($captcha, {
 });
 
 if ($captcha.data('init') != null) { //eslint-disable-line
-    imgCheck.init();
+    validate.init();
 }
 
 // 登录按钮状态切换
@@ -89,86 +89,86 @@ $pwd.bind('input', function() {
 
 // Login
 $loginBtn.on('touchstart', function() {
-    var acc = trim($account.val()),
-        pwd = trim($pwd.val()),
-        captcha = null;
-
     if ($loginBtn.hasClass('disable')) {
         return;
     }
-
-    // if (imgCheck.atWorking) {
-    captcha = imgCheck.getResults();
-
-    //     if (captcha === '0000') {
-    //         return tip.show(' 请将图片旋转到正确方向');
-    //     }
-    // }
-
-    $loginBtn.text('正在登录...').addClass('disable');
+    let acc = trim($account.val()),
+        pwd = trim($pwd.val());
 
     // 验证账号（数字或者邮箱）和密码合理性
     if ((/^[0-9]+$/.test(acc) || api.emailRegx.test(acc)) && api.pwdValidate(pwd)) {
-        let data = {
-            account: acc,
-            password: pwd,
-            yohobuy: $('#yohobuy').val()
-        };
-
-        if (imgCheck.atWorking) {
-            $.extend(data, {captcha});
+        let validResult = validate.getResults();
+
+        if (typeof validResult === 'string') {
+            if (validResult === '0000') {
+                return tip.show(' 请将图片旋转到正确方向');
+            }
+            validResult = Promise.resolve({captcha: validResult});
         }
+        validResult.then((captcha) => {
+            $loginBtn.text('正在登录...').addClass('disable');
 
-        $.ajax({
-            type: 'POST',
-            url: '/passport/login/auth',
-            data,
-            success: function(data) { //eslint-disable-line
-                var res,
-                    LOGI_TYPE;
-
-                if (acc.indexOf('@') > 0) {
-                    LOGI_TYPE = 8;
-                } else {
-                    LOGI_TYPE = 5;
-                }
+            let data = {
+                account: acc,
+                password: pwd,
+                yohobuy: $('#yohobuy').val()
+            };
 
-                if (window._yas && window._yas.sendCustomInfo) {
-                    window._yas.sendCustomInfo({
-                        op: 'YB_MY_LOGIN_C',
-                        param: JSON.stringify({
-                            C_ID: window._ChannelVary[window.cookie('_Channel')],
-                            LOGI_TYPE: LOGI_TYPE
-                        })
-                    }, true);
-                }
+            if (validate.atWorking) {
+                $.extend(data, captcha);
+            }
 
-                if (data.code === 200) {
-                    res = data.data;
+            $.ajax({
+                type: 'POST',
+                url: '/passport/login/auth',
+                data,
+                success: function(data) { //eslint-disable-line
+                    var res,
+                        LOGI_TYPE;
+
+                    if (acc.indexOf('@') > 0) {
+                        LOGI_TYPE = 8;
+                    } else {
+                        LOGI_TYPE = 5;
+                    }
 
-                    showErrTip('登录成功');
-                    location.href = res.href;
-                    $loginBtn.text('登录成功').off();
-                } else {
-                    if (data.captchaShow) {
-                        imgCheck.atWorking ? (data.changeCaptcha && imgCheck.refresh()) : imgCheck.init();
+                    if (window._yas && window._yas.sendCustomInfo) {
+                        window._yas.sendCustomInfo({
+                            op: 'YB_MY_LOGIN_C',
+                            param: JSON.stringify({
+                                C_ID: window._ChannelVary[window.cookie('_Channel')],
+                                LOGI_TYPE: LOGI_TYPE
+                            })
+                        }, true);
                     }
 
-                    showErrTip(data.message);
-                    resetForm();
-                }
+                    if (data.code === 200) {
+                        res = data.data;
 
-                return data;
-            },
-            error: function() {
-                showErrTip('网络断开连接啦~');
+                        showErrTip('登录成功');
+                        location.href = res.href;
+                        $loginBtn.text('登录成功').off();
+                    } else {
+                        if (data.captchaShow) {
+                            validate.atWorking ? ((data.changeCaptcha || validate.type === 2) && validate.refresh()) : validate.init();
+                        }
 
-                imgCheck.atWorking && imgCheck.refresh();
-            },
-            complete: function() {
-                $loginBtn.text('登录').removeClass('disable');
-            }
-        });
+                        showErrTip(data.message);
+                        resetForm();
+                    }
+
+                    return data;
+                },
+                error: function() {
+                    showErrTip('网络断开连接啦~');
+
+                    validate.atWorking && validate.refresh();
+                },
+                complete: function() {
+                    $loginBtn.text('登录').removeClass('disable');
+                }
+            });
+        }, () => {});
     } else {
         showErrTip('账号或密码有错误，请重新输入');
         $loginBtn.text('登录').removeClass('disable');

@@ -3,7 +3,8 @@
  * @author: feng.chen<feng.chen@yoho.cn>
  * @date: 2017/03/13
  */
-let ImgCheck = require('plugin/img-check');
+let $ = require('yoho-jquery'),
+    ImgCheck = require('plugin/img-check');
 const validType = {
     IMG_CHECK: 1,
     GEETEST: 2
@@ -13,26 +14,64 @@ class Validate {
     constructor(container, options) {
         this.$container = container;
         this.options = options;
-        this.type = container.data('img-check') ? validType.IMG_CHECK : validType.GEETEST;
+        this.type = container.data('geetest') ? validType.GEETEST : validType.IMG_CHECK;
         if (this.type === validType.IMG_CHECK) {
             this.imgCheck = new ImgCheck(this.$container, this.options);
-            if (this.$container.data('init') != null) { //eslint-disable-line
-                this.imgCheck.init();
-            }
         } else {
-
+            $.ajax({
+                url: '/passport/geetest/register?t=' + (new Date()).getTime(), // 加随机数防止缓存（IE下的问题）
+                type: 'get',
+                dataType: 'json',
+                success: data => {
+                    window.initGeetest && window.initGeetest({
+                        gt: data.gt,
+                        challenge: data.challenge,
+                        offline: !data.success
+                    }, (captchaObj) => {
+                        this.captchaObj = captchaObj;
+                        captchaObj.appendTo($('#js-img-check'));
+                        this._atWorking = true;
+                        $('#js-img-check').addClass('hide').addClass('popup');
+                    });
+                }
+            });
+            $('.yoho-page').on('touchstart', '#js-img-check', (e) => {
+                if ($(e.target).attr('id') !== 'js-img-check') {
+                    return;
+                }
+                $('#js-img-check').addClass('hide');
+            });
         }
-        this.atWorking = true;
+    }
+    get atWorking() {
+        return this._atWorking;
     }
     refresh() {
         if (this.type === validType.IMG_CHECK) {
             this.imgCheck.refresh();
+        } else {
+            this.captchaObj.refresh();
+        }
+    }
+    init() {
+        if (this.type === validType.IMG_CHECK) {
+            if (this.$container.data('init') != null) { //eslint-disable-line
+                this.imgCheck.init();
+                this._atWorking = this.imgCheck.atWorking;
+            }
         }
     }
-    // atWorking:
     getResults() {
         if (this.type === validType.IMG_CHECK) {
             return this.imgCheck.getResults();
+        } else {
+            return new Promise((resolve) => {
+                $('#js-img-check').removeClass('hide');
+                this.captchaObj.onSuccess(() => {
+                    resolve(this.captchaObj.getValidate());
+                    $('#js-img-check').addClass('hide');
+                });
+            });
         }
     }
 }

@@ -34,4 +34,24 @@
         width: 150px;
         height: 150px;
     }
+}
+
+#js-img-check {
+    &.hide {
+        display: none !important;
+    }
+    &.popup {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        z-index: 99;
+        background-color: rgba(0, 0, 0, 0.3);
+    }
 }
\ No newline at end of file