首页

基于CryptoJS前端H5加解密算法实现PDF电子手写签名认证案例分享

标签:电子签名,Crypto-JS,前端加解密,算法,cryptojs     发布时间:2017-12-23   

一、前言

基于CryptoJS的前端H5加解密组件实现电子手写签名的demo案例,主要包括签名区域canvas、签名图案的base64加密、身份姓名对照编码及提交后端加密转码提交保存等步骤操作。

二、代码示例

1.html页面代码部分,效果预览页面点击查看

<!DOCTYPE html>@b@<html>@b@<head>@b@  <meta charset="utf-8">@b@  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />@b@  <link rel="stylesheet" media="all" href="./base-anysign.css">@b@  <style>@b@    h1,@b@    p,@b@    span,@b@    img {@b@      text-align: center;@b@    }@b@    .btn {@b@      display: block;@b@      height: 30px;@b@      border: 1px solid gray;@b@      background-color: gray;@b@      text-align: center;@b@      color: white;@b@      line-height: 30px;@b@      margin-top: 10px;@b@    }@b@    .input {@b@      width: 260px;@b@      border: 1px solid gray;@b@    }@b@  </style>@b@</head>@b@<body>@b@  @b@  <div class="btn" id="config">请确认下面协议事项</div>@b@  <!-- 自定义页面显示的内容-->@b@  <h1>协议条款</h1>@b@  <p>第一条 .............................................................................................................................</p>@b@  <p>第二条 .............................................................................................................................</p>@b@  <p>第三条 .............................................................................................................................</p>@b@  <div>@b@    <span>客户签名:</span>@b@    <img id="signName" width="100" height="100">@b@  </div>@b@  <div class="btn" id="sign">进行签名</div> @b@  <!-- 签名区域弹窗-->@b@  <center>@b@    <div id="dialog" style=" display:none;">@b@      <div id="anysign_title" style="color:#333333;" width="100%" height="10%">请<span style="font-size:20pt;"> 张 三 </span>签名</div>@b@      <div id="container" onmousedown="return false;">@b@        <canvas id="anysignCanvas" width="2"></canvas>@b@      </div>@b@      <div id="single_scrollbar">@b@        <span id="single_scroll_text"> *滑动操作:</span>@b@        <input id="single_scrollbar_up" type="button" class="button orange" value="左移" />@b@        <input id="single_scrollbar_down" type="button" class="button orange" value="右移" />@b@      </div>@b@      <div id="btnContainerOuter" width="100%">@b@        <div id="btnContainerInner" style="text-align: center;  font-size:5pt;" width="100%">@b@          <input id="btnOK" type="button" class="button orange" value="确 定" onclick="sign_confirm();" />@b@          <input id="btnClear" type="button" class="button orange" value="清 屏" onclick="javascript:clear_canvas();">@b@          <input id="btnCancel" type="button" class="button orange" value="取 消" onclick="cancelSign();">@b@        </div>@b@      </div>@b@    </div>@b@  </center>@b@  <script src="./base-anysign.js" type="text/javascript"></script>@b@  <script src="./index.js"></script>@b@</body>@b@</html>

2.控件定义index.js代码如下

(function() {@b@@b@  var apiInstance = new baseAnysign.AnySignApi();@b@  window.apiInstance = apiInstance;@b@@b@  var url = 'http://www.xwood.net/cust/app/sign';@b@  var templateUrl = 'D234b83d6b7d046c5542e566aebc67a5e';@b@  var channel = 'CHANNEL_001'; @b@  var signKey = "14345ea7b45633432c8ff344"; //手书唯一标识@b@  var pdfKey = '客户签名'; //pdf模板中的关键字,用于定位签名图像@b@  var signerName = 'MyCA'; //签名姓名@b@  var signerIDCard = '340824199611172164'; //签名身份证@b@  var timeTagValid = false;@b@  var timeTagPos = 1;@b@@b@@b@  var signBtn = document.getElementById('sign'); @b@  var signNameImg = document.getElementById('signName');@b@  var configBtn = document.getElementById('config');@b@@b@  configBtn.addEventListener('click', function() {@b@    handleConfig();@b@  });@b@@b@  signBtn.addEventListener('click', function() {@b@    handleSign();@b@  });@b@@b@ @b@@b@  var handleConfig = function() { @b@    alert('参数配置使用成功');@b@  }@b@@b@  var handleSign = function() {@b@@b@    var success = apiInstance.initAnySignApi(function(contextId, contextType, value) {@b@      if (contextType === apiInstance.CALLBACK_TYPE_SIGNATURE) { //签名后的图片@b@        var signNameImage = "data:image/png;base64," + value;@b@        signNameImg.src = signNameImage;@b@      }@b@    }, channel);@b@    if (!success) {@b@      alert('初始化失败');@b@      return;@b@    }@b@@b@    apiInstance.setTemplate(baseAnysign.TemplateType.PDF, 'baseAnysign', signKey, 4000); //baseAnysign和4000的值随意,不为空即可@b@@b@    var signer = new baseAnysign.Signer(signerName, signerIDCard);@b@@b@    var signerRule1 = new baseAnysign.SignRule_KeyWord(pdfKey, 3, 35, 1, 2); //有三种类型,SignRule_XYZ不太精确,建议使用其他两种@b@    var signatureConfig1 = new baseAnysign.SignatureConfig(signer, signerRule1);@b@@b@    var timeTag = new baseAnysign.TimeTag(timeTagPos, "yyMMdd hh:mm;ss"); //1:时间在上、2:时间在下、3:时间在右@b@    timeTagValid && (signatureConfig1.timeTag = timeTag);@b@@b@    success = apiInstance.addSignatureObj(20, signatureConfig1);@b@    if (!success) {@b@      alert('添加签名对象1失败');@b@      return;@b@    }@b@ @b@    success = apiInstance.commitConfig();@b@    if (!success) {@b@      alert('提交配置失败');@b@      return;@b@    }@b@@b@    var result = apiInstance.showSignatureDialog(20);@b@    switch (result) {@b@      case apiInstance.RESULT_OK:@b@        //alert('签名弹窗打开成功');@b@        break;@b@      case apiInstance.EC_API_NOT_INITED:@b@        alert('接口没有初始化');@b@        return;@b@      case apiInstance.EC_WRONG_CONTEXT_ID:@b@        alert('没有配置相应签字对象');@b@        return;@b@      case apiInstance.EC_TEMPLATE_NOT_SET:@b@        alert('签名表单未配置');@b@        return;@b@    }@b@  }@b@@b@ @b@@b@})();

3.后端提交代码参考模板头文件如下

Request URL:http://www.xwood.net/cust/app/sign@b@Request Headersview source@b@Content-Type:application/x-www-form-urlencoded@b@Origin:null@b@User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1@b@Form Dataview URL encoded @b@	signData:{"Version":"1.0","EncCertSN":"4340990000019ecf6a","EncKey":"IrwbdgVYg5BZl7xvt3dE+3CwWiecxsNjo9kL+vk5cCvun//+bQetS.....xN8fucfBURBCRLVe81APcQHKGwowBbbdcBWsKCackcGiuIbfAq3WzLWgUY="}@b@	signKey:55514ea7b84304004c8G498@b@	pdfKey:客户签名@b@	templateUrl:F4243b83d6b7d046c8815e499aebc67a5d