本文主要分以下几个模块进行总结分析
项目要求：运用百度AI（人脸识别）通过本地与外网之间的信息交互（MQService），从而通过刷脸实现登陆、签字、会议签到等；
1.准备工作：
内网：单击事件按钮——签字、登陆
qm.js(用于封装调用签名弹出页面的方法)
sdkqz.jsp（用于签名模式的选取）
getitems.jsp（用于jQuery的ajax调用）
logininputbg.gif（用于人脸识别显示的动图--页面效果）
步骤：1.用户单击按钮（以签字为例） onclick="signature('<%=map.get("COL_ID")%>','<%=user.getUserId() %>','QM','')"
2.调用signature（）
<script src="<%= path%>/js/qm.js"></script>
//签名
function signature(id, userid,lx,qzrq){
var path = '<%=path%>';
qm(path,id, userid,lx,qzrq);
}
3.进入qm.js中调用function通过ymPrompt打开sdkqz.jsp窗口
qm.js中内容（略）
sdkqz.jsp页面内容如下：
1 <%@page import="java.text.SimpleDateFormat"%> 2 <%@page import="java.net.InetAddress"%> 3 <%@page import="org.daisy.daisyframework.control.ApplicationContext"%> 4 <%@page import="org.daisy.daisyframework.token.AccessTokenManager"%> 5 <%@page import="com.cwai.logic.bean.User"%> 6 <%@page import="com.cwai.logic.dao.UserDAO"%> 7 <%@page import="com.cwai.db.DBA"%> 8 <%@page import="org.daisy.daisyframework.commons.persistent.db.DataManipulation"%> 9 <%@page import="com.cwai.ado.XDataConvert"%> 10 <%@page import="com.cwai.xtag.xtag"%> 11 <%@page import="com.cwai.startup.AppConfigDb"%> 12 <%@page import="com.cwai.cfg.Configs"%> 13 <%@page import="com.cwai.web.App"%> 14 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 15 <% 16 String path = request.getContextPath(); 17 if(null == session||session.getAttribute("LoginUser") == null){out.println("<script language='javascript'> function reLongin(){top.window.PAGE_FLAG = false;top.location = '"+path+"/fail.jsp?ID = 001'"+"}</script> ");out.println("<script language='javascript'> reLongin();</script> "); return; } 18 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 19 DataManipulation dataManipulation = (DataManipulation) ApplicationContext.getContext().getBean("dataManipulation"); 20 String windowTitle = Configs.getWinTitle(); 21 Object obj = session.getAttribute("rand_yzm"); 22 23 String userId = xtag.getParameter(request, "userId"); 24 String id = xtag.getParameter(request, "id").trim(); 25 String lx = xtag.getParameter(request, "lx"); 26 String qzrq = xtag.getParameter(request, "qzrq").trim(); 27 String hqshow = xtag.getParameter(request, "qzrq"); 28 29 AppConfigDb appConfig = AppConfigDb.getInstance(); 30 String username = xtag.getParameter(request, "username_v"); 31 username = username.trim(); 32 String password = xtag.getParameter(request, "password_v"); 33 //String mycode = xtag.getParameter(request, "code_v"); 34 String logic = xtag.getParameter(request, "logic"); 35 String login_result_js = ""; 36 String code = ""; 37 if(obj != null){ 38 code = (String) obj; 39 } 40 boolean hasDbsx = false; 41 String dlip = App.GetIP(request); 42 43 String qzzh = "";//签名账号 44 Map map_zh = dataManipulation.singleData("SELECT USERID,USERNAME,TRUENAME FROM BM_USER WHERE USERID = '"+userId+"' AND YXBZ = '1'", DBA.getConn(), new String[]{}, true); 45 qzzh = XDataConvert.TryToString(map_zh.get("USERNAME")); 46 String qzms = "";//签名模式 47 Map map_ms = dataManipulation.singleData("SELECT USERID,QZMS FROM BM_USER_INFO WHERE USERID = '"+userId+"'", DBA.getConn(), new String[]{}, true); 48 qzms = XDataConvert.TryToString(map_ms.get("QZMS")); 49 //System.out.println("qzms_____________"+qzms); 50 //获取用户电脑IP 51 InetAddress address = InetAddress.getLocalHost(); 52 String ip = address.getHostAddress().toString(); 53 54 //1 混合验证（默认密码） 2混合验证（默认人脸识别） 3仅密码验证 4仅人脸识别验证 55 %> 56 57 58 <!doctype html> 59 <html lang="us"> 60 <head> 61 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 62 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 63 <!-- 强制360使用极速模式 --> 64 <meta name="renderer" content="webkit"> 65 <base href="<%=basePath%>"> 66 <title><%= windowTitle%></title> 67 <meta http-equiv="pragma" content="no-cache"> 68 <meta http-equiv="cache-control" content="no-cache"> 69 <meta http-equiv="expires" content="0"> 70 <link href="<%= path%>/css/main.css" rel="stylesheet" type="text/css" /> 71 <script src="<%= path%>/js/jquery-1.11.3.js"></script> 72 <script src="<%= path%>/js/layer/layer.js"></script> 73 <script type="text/javascript"> 74 function enter(){ 75 var url = '<%=basePath%>home.jsp'; 76 var open_pattern = 2; 77 var w = screen.width + 8; 78 var h = screen.height + 7; 79 var l = 0; 80 var t = 0; 81 var window_style = ""; 82 if(open_pattern == 1) { 83 t = -30; 84 l = -4; 85 window_style = "toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=no,resizable=yes"; 86 var newwin = window.open(url, "_blank", window_style + ",width=" + w + ",height=" + h + ",top=" + t + ",left=" + l); 87 newwin.moveTo(l, t); 88 newwin.resizeTo(w, h); 89 window.opener = null; 90 window.close(); 91 } else if(open_pattern == 2) { 92 window.location.href = url; 93 } 94 } 95 window.onload = function page_init() { 96 if('<%= qzms%>' == '' || '<%= qzms%>' == '1' || '<%= qzms%>' == '3'){ 97 dlyz('1'); 98 } else if ('<%= qzms%>' == '2' || '<%= qzms%>' == '4') { 99 dlyz('2'); 100 } 101 showmsg(); 102 if(!$("#username").is(":hidden")){ 103 document.getElementById('username').focus(); 104 } 105 } 106 function showmsg(){ 107 <%=login_result_js%> 108 } 109 function refresh(obj) { 110 obj.src = "./code2.jsp?" + Math.random(); 111 } 112 113 </script> 114 <style type="text/css"> 115 body { 116 background-position: center; 117 background-repeat: no-repeat; 118 background-attachment: fixed; 119 font-family: Microsoft YaHei; 120 } 121 .cont{ 122 width:400px; 123 height:350px; 124 border:0px; 125 } 126 127 .contright { 128 align:center; 129 position: absolute; 130 width: 308px; 131 height: 300px; 132 right: 50px; 133 top: 10px; 134 border: 6px #D2E5F6 solid; 135 //background-color: #fff; 136 text-align: center; 137 background: url("<%= path%>/images/login/logininputbg.png") no-repeat; 138 } 139 140 .mimas { 141 display: inline-block; 142 width: 13px; 143 } 144 145 .yhdl { 146 margin-top: 25px; 147 font-size: 17px; 148 color: #666; 149 } 150 151 .checkcolor { 152 color: #191970; 153 font-weight: bold; 154 } 155 156 .logininput { 157 height: 25px; 158 font-size: 12px; 159 line-height: 25px; 160 border-left: 1px #C5DBEC solid; 161 border-top: 1px #C5DBEC solid; 162 border-bottom: 1px #C5DBEC solid; 163 border-right: 1px #C5DBEC solid; 164 padding-left: 5px; 165 outline: none; 166 } 167 168 .tdleft { 169 font-size: 12px; 170 } 171 .zhdl { 172 width: calc(50% - 1px); 173 border-right: 1px solid #f4f4f4; 174 display: inline-block; 175 } 176 .rlsb { 177 display: inline-block; 178 width: calc(50% - 10px); 179 } 180 .login-btn .btn-img { 181 border: 1px solid #ff9f00; 182 display: block; 183 width: 244px; 184 background: #ff9f00; 185 height: 31px; 186 line-height: 31px; 187 color: #fff; 188 font-size: 20px; 189 font-family: 'Microsoft YaHei'; 190 } 191 192 .contright table td { 193 font-weight: bold; 194 color: #191970; 195 height:65px; 196 } 197 198 .contright table tr { 199 height: 37px; 200 } 201 202 .jy_a { 203 pointer-events : none; 204 } 205 206 </style> 207 208 </head> 209 <body style="background-color: #e9f3fd;margin: 0px;padding: 0px;"> 210 <form action="" method="post" name="logonForm" > 211 <input type="hidden" name="username_v" > 212 <input type="hidden" name="password_v" > 213 <input type="hidden" name="code_v" > 214 <input type="hidden" name="logic" > 215 216 <div > 217 <div class="contright" style=""> 218 <div class="yhdl" > 219 <%if("1".equals(qzms) || "2".equals(qzms)){ %> 220 <div class="zhdl" > 221 <span >密 码 签 字</span> 222 </div> 223 <div class="rlsb" > 224 <span >面 部 识 别</span> 225 </div> 226 <%}else if("3".equals(qzms)){ %> 227 <div class="zhdl" > 228 <span >密 码 签 字</span> 229 </div> 230 <%}else if("4".equals(qzms)){ %> 231 <div class="rlsb" > 232 <span >面 部 识 别</span> 233 </div> 234 <%} %> 235 </div> 236 237 <div style="min-height: 210px;" align="center"> 238 <div > 239 <br> 240 <br> 241 <table style=""> 242 <tr> 243 <td class="tdleft">签 字 账 号:</td> 244 <td> 245 <input > 246 </td> 247 </tr> 248 <tr> 249 <td class="tdleft">签 字 密 码:</td> 250 <td> 251 <input > 252 </td> 253 </tr> 254 </table> 255 </div> 256 <div > 257 <br> 258 <img src="<%= path%>/images/login/logininputbg.gif" width="155px" height="155px" /> 259 <br> 260 <a style="color: #666;">签 字 账 号: <span style="font-weight: bold;font-size: 12px;color:#191970;" ><%= qzzh%></span></a> 261 <%-- 262 <a >切换账号</a> 263 --%> 264 </div> 265 </div> 266 <div class="login-btn" align="center"> 267 <a href="javascript:sendreq();" > 268 确 认<span ></span> 269 </a> 270 </div> 271 </div> 272 </div> 273 </form> 274 275 <script type="text/javascript"> 276 $(function(){ 277 divcenter(); 278 }) 279 280 $(window).resize(function () { //当浏览器大小变化时 281 divcenter(); 282 }); 283 284 function divcenter(){ 285 var left = $(window).width()/2 - 474; 286 var top = $(window).height()/2 - 272; 287 $("#div1").css('margin-top',top+'px'); 288 $("#div1").css('margin-left',left+'px'); 289 } 290 291 function dlyz(lx) { 292 if(lx == '1') { 293 $("#zhdl_div").show(); 294 $("#rlsb_div").hide(); 295 $("#zhdl_span").addClass("checkcolor"); 296 $("#rlsb_span").removeClass("checkcolor"); 297 } else { 298 $("#rlsb_div").show(); 299 $("#zhdl_div").hide(); 300 $("#rlsb_span").addClass("checkcolor"); 301 $("#zhdl_span").removeClass("checkcolor"); 302 } 303 } 304 305 var v_str = '用户名: <input type="text" >; 306 function zhlr(){ 307 layer.open({ 308 title: '账号录入', 309 content: v_str, 310 btn: '确定', 311 yes: function(index){ 312 if($("#lrxzh").val() != ''){ 313 $("#dqdlzh").html($("#lrxzh").val()); 314 layer.close(index); 315 } 316 } 317 }); 318 } 319 320 function sendreq() { 321 if($("#zhdl_div").is(":hidden")) {// 人脸识别校验 322 sendMsg(); 323 } else {//密码签字校验 324 dzqm(); 325 } 326 } 327 328 var id = '<%=id%>'; 329 var userid = '<%=userId%>'; 330 //用于签名时间（FORM_20170117050524000077.jsp） 331 var qzrq = '<%=qzrq%>'; 332 var ny = '<%= new SimpleDateFormat("yyyy-MM-dd").format(new Date())%>'; 333 var hqshow = '<%=hqshow%>'; 334 //电子签名 335 function dzqm(){ 336 var pass = document.getElementById("password").value; 337 $.ajax({ 338 type: "POST", 339 url: "<%=path%>/ajax/formdata.jsp", 340 data: {type: 'SIGNATURE',userid: userid,pass: pass}, 341 dataType: "json", 342 success:function(data){ 343 console.log(data); 344 if(data.code == 2){ 345 if("QM" == "<%=lx%>"){ 346 var src = "<%=path%>/work/common/view_image2.jsp?tp> data.qzxxid; 347 window.parent.$("#"+id+"_img").attr("src",src); 348 window.parent.$("#"+id).val(data.qzxxid); 349 window.parent.$("#"+id+"_btn").hide(); 350 window.parent.$("#"+id+"_img").show(); 351 if("" != qzrq && null != qzrq ){ 352 window.parent.$("#"+qzrq).val(ny); 353 } 354 }else if("HQ" == "<%=lx%>"){ 355 window.parent.app.huiqian.push({ 356 userid: userid, 357 imgid: data.qzxxid 358 }); 359 if("0" == hqshow){ 360 window.parent.app.hqshow = false; 361 }else { 362 window.parent.$("#"+id+"_btn").hide(); 363 } 364 } 365 window.parent.ymPrompt.close(); 366 }else{ 367 layer.msg(data.msg, {icon: 2, time: 8000}); 368 } 369 } 370 }); 371 } 372 //人脸识别签名 373 function sendMsg() {//30秒请求时间间隔 374 //1: 获取方式 2:账号信息 3:发送异步请求[a.获取登陆模式 b.等待数据返还] 375 var id = '<%=id%>'; 376 if($("#qzzh").text() == '') {//当前登陆账号为空 377 zhlr(); 378 } else {//有数据, 开始发送请求ajax请求 379 time($("#dl_a")); 380 $.ajax ({ 381 url : '<%=path%>/ajax/getitems.jsp', 382 type: 'POST', 383 dataType : 'text', 384 async: true, 385 data : {"DMZL":"CHKSDK2", "queryValue": "<%= ip%>~<%= userId%>"}, 386 success: function(data) { 387 if(data.trim() == '0'){ 388 layer.msg("人脸识别信息发送失败！",{icon: 2, time: 3000}); 389 } else { 390 layer.msg("人脸识别信息已发送，请于一分钟内登陆钉钉验证！",{time:5000}); 391 var interval = setInterval( 392 function sdkLogin(){ 393 console.log("请求数据来了————————————"); 394 if(null != data && "" != data){ 395 $.ajax({ 396 url : 'ajax/getitems.jsp', 397 type : 'POST', 398 dataType : 'text', 399 data : {"DMZL":"CHKSDK_MSG", "queryValue": data }, 400 success : function(back){ 401 if(back.trim() == '2'){ 402 layer.msg("该签名信息已经过时，请重新发送申请！",{icon: 2, time: 100000}); 403 clearInterval(interval); 404 } else if(back.trim() == '3'){ 405 //layer.msg("您已取消该签名信息！",{icon: 2, time: 3000}); 406 clearInterval(interval); 407 } else if(back.trim() == '4'){ 408 //获取qzxxid 409 $.ajax({ 410 url : 'ajax/getitems.jsp', 411 type : 'POST', 412 dataType : 'text', 413 data : {"DMZL":"GETQZXXID", "queryValue": '<%= userId%>' }, 414 success : function(qzxx){ 415 //进行图片签字，显示图片 416 if("0" == qzxx.trim()){ 417 layer.msg("没有被应用的签字,请先设置签字！",{icon: 2, time: 3000}); 418 //停止时间函数 419 clearInterval(interval); 420 window.parent.ymPrompt.close(); 421 }else{ 422 if("QM" == "<%=lx%>"){ 423 var src = "<%=path%>/work/common/view_image2.jsp?tp> qzxx.trim(); 424 window.parent.$("#"+id+"_img").attr("src",src); 425 window.parent.$("#"+id).val(qzxx.trim()); 426 window.parent.$("#"+id+"_btn").hide(); 427 window.parent.$("#"+id+"_img").show(); 428 if("" != qzrq && null != qzrq ){ 429 window.parent.$("#"+qzrq).val(ny); 430 } 431 }else if("HQ" == "<%=lx%>"){ 432 window.parent.app.huiqian.push({ 433 userid: userid, 434 imgid: qzxx.trim() 435 }); 436 if("0" == hqshow){ 437 window.parent.app.hqshow = false; 438 }else { 439 window.parent.$("#"+id+"_btn").hide(); 440 } 441 } 442 //停止时间函数 443 clearInterval(interval); 444 window.parent.ymPrompt.close(); 445 } 446 447 } 448 }); 449 } else if(back.trim() == '0'){ 450 //layer.msg("人脸识别信息已发送，请于一分钟内登陆叮叮验证！",{time:1000}); 451 } 452 } 453 }); 454 } 455 } 456 , 1000); 457 } 458 459 } 460 }); 461 } 462 } 463 464 var wait = 30; 465 function time(o) { 466 if (wait == 0) { 467 o.removeClass("jy_a"); 468 $("#qhzh_a").removeClass("jy_a"); 469 $("#fsqq").text(''); 470 wait = 30; 471 } else { 472 o.addClass("jy_a"); 473 $("#qhzh_a").addClass("jy_a"); 474 $("#fsqq").text('（'+ wait +'）'); 475 wait--; 476 setTimeout(function() { 477 time(o); 478 }, 479 1000) 480 } 481 } 482 483 function setWait(time){ 484 if(time != null){ 485 wait = time; 486 } 487 } 488 489 function qhzh() {//切换账号 490 zhlr(); 491 } 492 </script> 493 </body> 494 </html>