HTML表单实现电子签名及验证签名真实性的方法
随着数字化办公的普及，电子签名在表单提交、合同签署等场景中应用越来越广泛。HTML表单本身不具备直接采集电子签名的能力，需要结合前端签名采集组件、后端存储与验证逻辑共同实现完整的电子签名功能。本文将详细介绍实现流程与验证方法。
一、HTML表单中电子签名的基础实现
1. 前端签名采集方案
前端常用的电子签名采集方式是使用Canvas画布，让用户通过鼠标或触摸屏手写签名，再将Canvas内容转换为图片数据提交到后端。以下是基础实现示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>电子签名表单示例</title>
<style>
.signature-container {
border: 1px solid #ccc;
margin: 10px 0;
}
#signatureCanvas {
cursor: crosshair;
}
</style>
</head>
<body>
<form id="signForm">
<p>用户信息：<input type="text" name="username" required></p>
<p>请签署您的签名：</p>
<div class="signature-container">
<canvas id="signatureCanvas" width="400" height="200"></canvas>
</div>
<button type="button" onclick="clearSignature()">清除签名</button>
<button type="button" onclick="submitForm()">提交表单</button>
<!-- 隐藏域存储签名图片数据 -->
<input type="hidden" id="signatureData" name="signature">
</form>
<script>
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// 鼠标按下开始绘制
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
// 鼠标移动绘制路径
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
});
// 鼠标松开停止绘制
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
// 清除签名
function clearSignature() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('signatureData').value = '';
}
// 提交表单
function submitForm() {
// 检查是否绘制了签名
const imageData = canvas.toDataURL('image/png');
if (imageData === canvas.toDataURL('image/png', 0)) {
alert('请先签署签名');
return;
}
// 将签名图片数据存入隐藏域
document.getElementById('signatureData').value = imageData;
// 实际场景中此处可将表单数据通过AJAX提交到后端
console.log('表单提交数据：', {
username: document.querySelector('input[name="username"]').value,
signature: imageData
});
}
</script>
</body>
</html>上述代码通过<canvas>标签实现签名绘制，将签名转换为base64格式的PNG图片数据，存入表单隐藏域中随其他表单数据一起提交。
2. 移动端适配优化
针对移动端触摸操作，需要额外添加触摸事件监听，避免默认的页面滚动行为：
// 触摸开始
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
isDrawing = true;
[lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];
});
// 触摸移动
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
if (!isDrawing) return;
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);
ctx.stroke();
[lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];
});
// 触摸结束
canvas.addEventListener('touchend', () => isDrawing = false);二、电子签名真实性的验证方法
1. 基础验证：签名完整性校验
最基本的验证是确保签名数据在传输和存储过程中未被篡改，通常采用哈希算法生成签名摘要，结合时间戳或用户唯一标识生成校验值：
<?php
// 后端接收表单数据后的完整性校验示例
$username = $_POST['username'] ?? '';
$signatureData = $_POST['signature'] ?? '';
$timestamp = time();
// 生成签名校验哈希，结合用户名、签名数据、时间戳和服务端密钥
$secretKey = 'your_server_secret_key';
$checkHash = hash('sha256', $username . $signatureData . $timestamp . $secretKey);
// 存储签名时同时存储哈希值和时间戳
$saveData = [
'username' => $username,
'signature' => $signatureData,
'timestamp' => $timestamp,
'check_hash' => $checkHash
];
// 存入数据库或文件存储
?>验证时重新计算哈希值，与存储的校验哈希对比，一致则说明签名数据未被篡改：
<?php
// 验证签名完整性
function verifySignatureIntegrity($username, $signatureData, $timestamp, $storedHash) {
$secretKey = 'your_server_secret_key';
$currentHash = hash('sha256', $username . $signatureData . $timestamp . $secretKey);
return hash_equals($currentHash, $storedHash);
}
?>2. 进阶验证：身份绑定与数字签名验证
仅靠完整性校验无法确认签名是否为用户本人签署，需要结合身份认证与数字签名技术：
用户登录后生成唯一会话标识，签名时将会话标识与签名数据绑定，避免他人冒用身份签署
重要场景可使用PKI体系，用户使用私钥对签名数据加密，服务端用用户公钥解密验证，确认签名者为私钥持有者
以下是简单的身份绑定验证示例：
<?php
session_start();
// 假设用户登录后，会话中存储了用户唯一ID
$userId = $_SESSION['user_id'] ?? '';
if (empty($userId)) {
die('请先登录后签署签名');
}
// 生成签名时绑定用户ID和时间戳
$signatureToken = hash('sha256', $userId . $timestamp . $secretKey);
$saveData['user_id'] = $userId;
$saveData['signature_token'] = $signatureToken;
?>3. 第三方合规验证
若需要满足《电子签名法》等法规要求，可使用合规的第三方电子签名服务，例如访问https://www.ipipp.com查看相关接口文档，调用其提供的签名采集、实名认证、签名验证等接口，第三方服务会提供具备法律效力的签名验证报告。
三、注意事项
签名采集时需明确告知用户签名用途，遵守隐私保护相关法规
base64格式的签名图片数据体积较大，建议存储时转换为二进制文件，仅存储文件路径
重要场景的签名验证需要结合多因素认证，避免单一验证方式存在的安全风险
定期更新服务端密钥，避免密钥泄露导致签名被伪造