1 /**
  2  * 安全验证
  3  */
  4 define(["core", "component/process_components"], function() {
  5 
  6     var _A8_Html = [
  7         '<div class="we_mb_box">',
  8         '<p class="we_notice">请在您的密宝中输入挑战码，将获得的输出动态密码填入到下面的输入框中：</p>',
  9         '<div class="we_cell_form_box">',
 10         '<div class="we_item">',
 11         '<label class="we_title">挑战码：</label>',
 12         '<div class="we_input_container">',
 13         '<span class="we_yellow" attr="inner:safety_param"></span>',
 14         '</div>',
 15         '<div class="we_tips_box">',
 16         '</div>',
 17         '</div>',
 18         '<div class="we_item">',
 19         '<label class="we_title">动态密码：</label>',
 20         '<div class="we_input_container">',
 21         '<input type="text" class="we_input param_value we_input_focus"/>',
 22         '</div>',
 23         '<div class="we_tips_box">',
 24         '</div>',
 25         '</div>',
 26         '</div>',
 27         '</div>',
 28         '<p class="we_cell_error_tips" style="display: none;" attr="inner:error_tip"></p>'
 29     ].join('');
 30 
 31     var _D6_Tips='您的账号绑定了<span class="we_red">密宝</span>，为了确认您的账号不被他人恶意操作，我们需要验证您的密宝：';
 32     var _D6_Html = [
 33         '<p class="we_cell_alert_tips"><i class="we_icon_alert"></i>$tips$</p>',
 34         '<div class="we_mb_code_box">',
 35         '<p class="we_notice">请依次输入密宝的动态密码相应位置上对应的数字：</p>',
 36         '<ul class="we_code_list" attr="inner:safety_param"></ul>',
 37         '</div>',
 38         '<p class="we_cell_error_tips" style="display: none;" attr="inner:error_tip"></p>'
 39     ].join('');
 40 
 41     var _Ecard_Tips='您的账号绑定了<span class="we_red">安全卡</span>，为了确认您的账号不被他人恶意操作，我们需要验证您的安全卡：';
 42     var _Ecard_Html = [
 43         '<p class="we_cell_alert_tips"><i class="we_icon_alert"></i>$tips$</p>',
 44         '<div class="we_safe_code_box">',
 45         '<div class="we_cell_form_box">',
 46         '<div class="we_item">',
 47         '<label class="we_title">请依次输入您的安全卡中以下三个坐标对应的数字：</label>',
 48         '<div class="we_input_container">',
 49         '<ul class="we_code_list" attr="inner:safety_param"></ul>',
 50         '</div>',
 51         '<div class="we_tips_box">',
 52         '<p class="we_cell_info_tips_2">安全卡遗失，<a href="http://ecard.sdo.com/views/v1/find_verifyaccount.aspx" target="_blank">需要帮助？</a></p>',
 53         '</div>',
 54         '</div>',
 55         '</div>',
 56         '</div>',
 57         '<p class="we_cell_error_tips" style="display: none;" attr="inner:error_tip"></p>'
 58     ].join('');
 59 
 60     /**
 61      * API
 62      * @type {Object}
 63      */
 64     var api = {
 65         verifyType:function (successHandler,errorHandler)
 66         {
 67             //D6
 68            // successHandler({
 69            //     errno:0,
 70            //     msg:'',
 71            //     type:'EkeyOfRandomCode',
 72            //     coordinateParam:'1|4|5|6',
 73            //     challengeCode:''
 74            // });
 75            // return;
 76 
 77             //A8
 78            // successHandler({
 79            //     errno:0,
 80            //     msg:'',
 81            //     type:'EkeyOfChallengeCode',
 82            //     coordinateParam:'',
 83            //     challengeCode:'1456'
 84            // });
 85            // return;
 86 
 87             //Ecard
 88            // successHandler({
 89            //     errno:0,
 90            //     msg:'',
 91            //     type:'Ecard',
 92            //     coordinateParam:'A3|B6|E16',
 93            //     challengeCode:''
 94            // });
 95            // return;
 96             var url = $we.conf.ENV.__API + "/querySafeDev";
 97             $we.utils.request(url, {
 98             }, function(data) {
 99                 successHandler(data.data);
100             }, function(data) {
101                 errorHandler(data);
102             }, "POST", true);
103         },
104 
105         /**
106          * 验证接口
107          * @param coordinateValue
108          * @param challengeValue
109          * @param type
110          * @param handler
111          */
112         verify:function (coordinateValue, challengeValue, type, success,error)
113         {
114             var param = {
115                 type:type
116             };
117             if (coordinateValue) {
118                 param['coordinateValue'] = coordinateValue;
119             }
120             if (challengeValue) {
121                 param['challengeValue'] = challengeValue;
122             }
123 //            handler({
124 //                errno:-1,
125 //                msg:'',
126 //                data:'',
127 //                //coordinateParam:'2|3|7|9',
128 //                coordinateParam:'C9|E8|F23',
129 //                challengeCode:'2368'
130 //            });
131             var url = $we.conf.ENV.__API + "/validateSafeDev";
132             $we.utils.request(url, param, function(data) {
133                 success(data.data);
134             }, function(data) {
135                 if(data.data){
136                     error(data.data);                    
137                 }else{
138                     $we.comp.alert(data.msg);
139                 }
140             }, "POST", true);
141         }
142     };
143 
144     $we.widget.reg("safety_verification", {
145         interfaces:{
146             /**
147              * render函数，AAA的接口函数，对于业务流组件来说，它完全可以转变为一个内置函数，
148              * 业务流组件在大多数情况下，不会调用interfaces
149              */
150             render:function ()
151             {
152                 var t = this;
153                 api.verifyType(function (response)
154                 {
155                     t.safetyConfig = response;
156                     var type = t.safetyConfig['type'];
157                     if (type == 'EkeyOfChallengeCode') {
158                         t.renderA8();
159                     }
160                     else if (type == 'EkeyOfRandomCode') {
161                         t.renderD6();
162                     }
163                     else if (type == 'Ecard') {
164                         t.renderEcard();
165                     }
166                     t.notify("position");
167                 },function(data){
168                     $we.comp.alert(data.msg);
169                     t.notify('close');
170                 });
171             },
172 
173             /**
174              * A8
175              */
176             renderA8:function ()
177             {
178                 var that = this;
179                 this.append(this.el, _A8_Html);
180                 this.renderParamA8();
181                 $('.param_value').keyup(function (event)
182                 {
183                     //监控回车
184                     if (event.keyCode == 13) {
185                         that.process.checkSucc();
186                     }
187                 });
188             },
189 
190             /**
191              * Render A8 Param
192              */
193             renderParamA8:function ()
194             {
195                 var safetyConfig = this.safetyConfig;
196                 var challengeCode = safetyConfig['challengeCode'];
197                 $(this.node['safety_param']).html(challengeCode);
198             },
199 
200             /**
201              * D6
202              */
203             renderD6:function ()
204             {
205                 var tips = this.params.tips_ekey || _D6_Tips;
206                 this.append(this.el, _D6_Html,{tips:tips});
207                 this.renderParamD6();
208             },
209 
210             /**
211              * Render Param D6
212              */
213             renderParamD6:function ()
214             {
215                 var that = this;
216                 var safetyConfig = this.safetyConfig;
217                 var safetyParam = $(this.node['safety_param']);
218                 safetyParam.empty();
219                 var coordinateParam = safetyConfig['coordinateParam'];
220                 coordinateParam = coordinateParam.split('|');
221                 $.each(coordinateParam, function (i, param)
222                 {
223                     var html = [];
224                     html.push('<li class="param_li ' + (i == 0 ? ' cur' : '') + '">');
225                     html.push('<span class="we_safe_code_txt">第' + param + '位</span>');
226                     html.push('<input type="text" class="we_safe_code_input param_value" style="text-align: center"/>');
227                     html.push('</li>');
228                     safetyParam.append(html.join(''));
229                 });
230 
231                 $('.param_value').each(function (i, t)
232                 {
233                     t = $(t);
234                     var li = t.parent();
235                     t.focus(function ()
236                     {
237                         $('.param_li').removeClass('cur');
238                         li.addClass('cur');
239                     });
240                     t.keyup(function (event)
241                     {
242                         if (event.keyCode == 13) {
243                             that.process.checkSucc();
244                             return;
245                         }
246                         var v = t.val();
247                         if (v.length == 1) {
248                             if (!isNaN(v)) {
249                                 $('.param_li').removeClass('cur');
250                                 li.next().addClass('cur');
251                                 li.next().find('.param_value').focus();
252                             }
253                             else {
254                                 t.val('');
255                             }
256                         }
257                         else {
258                             t.val('');
259                         }
260                     });
261                 });
262             },
263 
264             /**
265              * Ecard
266              */
267             renderEcard:function ()
268             {
269                 var tips = this.params.tips_ecard || _Ecard_Tips;
270                 this.append(this.el, _Ecard_Html,{tips:tips});
271                 this.renderParamEcard();
272             },
273 
274             /**
275              * Render Param Ecard
276              */
277             renderParamEcard:function ()
278             {
279                 var that = this;
280                 var safetyConfig = this.safetyConfig;
281                 var safetyParam = $(this.node['safety_param']);
282                 safetyParam.empty();
283                 var coordinateParam = safetyConfig['coordinateParam'];
284                 coordinateParam = coordinateParam.split('|');
285                 $.each(coordinateParam, function (i, param)
286                 {
287                     var html = [];
288                     html.push('<li class="param_li ' + (i == 0 ? ' cur' : '') + '">');
289                     html.push('<span class="we_safe_code_txt">' + param + '</span>');
290                     html.push('<input type="text" class="we_safe_code_input param_value" style="text-align: center"/>');
291                     html.push('</li>');
292                     safetyParam.append(html.join(''));
293                 });
294                 $('.param_value').each(function (i, t)
295                 {
296                     t = $(t);
297                     var li = t.parent();
298                     t.focus(function ()
299                     {
300                         $('.param_li').removeClass('cur');
301                         li.addClass('cur');
302                     });
303                     t.keyup(function (event)
304                     {
305                         if (event.keyCode == 13) {
306                             that.process.checkSucc();
307                             return;
308                         }
309                         var v = t.val();
310                         if (v.length == 2) {
311                             if (!isNaN(v)) {
312                                 $('.param_li').removeClass('cur');
313                                 li.next().addClass('cur');
314                                 li.next().find('.param_value').focus();
315                             }
316                             else {
317                                 t.val('');
318                             }
319                         }
320                         else {
321                             if (v.length > 2) {
322                                 t.val('');
323                             }
324                         }
325                     });
326                 });
327             },
328 
329             /**
330              * 错误显示
331              * @param content
332              */
333             showError:function (content)
334             {
335                 var errorTip = $(this.node['error_tip']);
336                 errorTip.html('<i class="we_icon_error"></i>' + content);
337                 errorTip.show();
338             },
339 
340             /**
341              * 清楚错误
342              */
343             cleanError:function ()
344             {
345                 var errorTip = $(this.node['error_tip']);
346                 errorTip.html('');
347                 errorTip.hide();
348             }
349         },
350         /**
351          * 初始化函数
352          * @param  {element} el    通过业务流组件传递过来的参数，该业务流组件的business节点
353          * @param  {object} params 初始化业务流组件时，每个组件传递的参数
354          */
355         init:function (el, params)
356         {
357             this.el = el;
358             this.params = params || {};
359         },
360         /**
361          * 每个组件，如果需要使用业务流的话，需要声明这个
362          */
363         process:{
364             /**
365              * 组件开始调用，业务流组件会调用这个接口来启用组件
366              */
367             start:function ()
368             {
369                 this.render();
370             },
371             /**
372              * 组件结束调用，当这个业务结束的时候，业务流组件会调用它
373              */
374             end:function ()
375             {
376                 $(this.el).empty();
377             },
378             /**
379              * 组件检测是否可以进行下一步
380              * 当组件需要进入下一步时，业务流组件将会调用这个接口，
381              * 这个接口需要通过 this.notify("goNext") 来通知业务流组件它检测通过，
382              * 否则业务流组件在这个地方会停滞下来 通过 this.notify("pause")来通知
383              */
384             checkSucc:function ()
385             {
386                 var t = this;
387                 t.cleanError();
388 
389                 var safetyConfig = this.safetyConfig;
390                 var type = t.safetyConfig['type'];
391 
392                 var coordinateValue = null;
393                 var challengeValue = null;
394 
395                 /**
396                  * Build Coordinate Value
397                  * @param coordinateParam
398                  * @param coordinateValue
399                  */
400                 var buildCoordinateValue = function (coordinateParam, coordinateValue)
401                 {
402                     var cv = [];
403 
404                     var cps = coordinateParam.split('|');
405                     var cvs = coordinateValue.split('|');
406 
407                     $.each(cps, function (i, cp)
408                     {
409                         cv.push(cp + ':' + cvs[i]);
410                     });
411 
412                     return cv.join('|');
413                 };
414 
415                 if (type == 'EkeyOfChallengeCode') {
416                     var key = $('.param_value').val();
417                     if (key && key.length > 0) {
418                         challengeValue = safetyConfig['challengeCode'] + ':' + key;
419                     }
420                     else {
421                         t.showError('请输入动态密码');
422                         return;
423                     }
424                 }
425                 else if (type == 'EkeyOfRandomCode') {
426                     var key = [];
427                     var valid = true;
428                     $('.param_value').each(function (i, pv)
429                     {
430                         pv = $(pv);
431                         if (pv.val().length > 0) {
432                             key.push(pv.val());
433                         }
434                         else {
435                             valid = false;
436                         }
437                     });
438                     if (valid) {
439                         coordinateValue = buildCoordinateValue(safetyConfig['coordinateParam'], key.join('|'));
440                     }
441                     else {
442                         t.showError('请输入动态密码');
443                         return;
444                     }
445                 }
446                 else if (type == 'Ecard') {
447                     coordinateValue = '';
448                     var key = [];
449                     var valid = true;
450                     $('.param_value').each(function (i, pv)
451                     {
452                         pv = $(pv);
453                         if (pv.val().length > 0) {
454                             key.push(pv.val());
455                         }
456                         else {
457                             valid = false;
458                         }
459                     });
460                     if (valid) {
461                         coordinateValue = buildCoordinateValue(safetyConfig['coordinateParam'], key.join('|'));
462                     }
463                     else {
464                         t.showError('请输入动态密码');
465                         return;
466                     }
467                 }
468                 api.verify(coordinateValue, challengeValue, type, function (response)
469                 {
470                     setTimeout(function ()
471                     {
472                         t.notify("goNext",response);
473                     }, 200);
474                     // this.notify("pause");
475                 },function(response){
476                     if (type == 'EkeyOfChallengeCode') {
477                         t.safetyConfig['challengeCode'] = response['challengeCode'];
478                         t.renderParamA8();
479                     }
480                     else if (type == 'EkeyOfRandomCode') {
481                         if(response['coordinateParam']){
482                             t.safetyConfig['coordinateParam'] = response['coordinateParam'];
483                             t.renderParamD6();    
484                         }else{
485                             $we.comp.alert(response['msg']);
486                             t.notify("abort");
487                             return;
488                         }
489                     }
490                     else if (type == 'Ecard') {
491                         if(response['coordinateParam']){
492                             t.safetyConfig['coordinateParam'] = response['coordinateParam'];
493                             t.renderParamEcard();                            
494                         }else{
495                             $we.comp.alert(response['msg']);
496                             t.notify("abort");
497                             return;                            
498                         }
499                     }
500                     if(type == 'Ecard'){
501                         t.showError('安全卡密码有误，请确认后重新输入');
502                     }else{
503                         t.showError('动态密码输入错误');
504                     }
505                 });
506             }
507         },
508         events:{
509         }
510     });
511 
512 });