当前位置：首页 > 前端开发 > 正文

HTML5验证码如何制作？

admin
前端开发
2025-06-08
2090

HTML5可使用Canvas绘制动态验证码，结合JavaScript生成随机字符，添加干扰线、噪点增强安全性，利用toDataURL转换为图片，并通过后端校验用户输入。

HTML5验证码制作指南：实现安全与用户体验的平衡

验证码的重要性与HTML5的优势

验证码（CAPTCHA）是现代网站安全的基石，主要用于区分真实用户和自动化机器人，HTML5凭借其强大的Canvas绘图能力、灵活的动画API和丰富的多媒体支持，成为实现现代验证码的理想技术解决方案。

HTML5验证码相比传统图片验证码具有显著优势：

无需服务器生成图片,减轻服务器负担
支持动态交互效果提升用户体验
可通过算法生成无限变化的验证码
更易于实现无障碍访问特性

基础验证码实现步骤

使用Canvas绘制基础验证码

<canvas id="captchaCanvas" width="200" height="80"></canvas>
<button id="refreshCaptcha">刷新验证码</button>
<script>
const canvas = document.getElementById('captchaCanvas');
const ctx = canvas.getContext('2d');
function generateCaptcha() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 生成随机字符串
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
  let captchaText = '';
  for (let i = 0; i < 5; i++) {
    captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  // 绘制背景
  ctx.fillStyle = '#f8f8f8';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // 绘制文字
  ctx.font = 'bold 36px Arial';
  ctx.fillStyle = '#333';
  for (let i = 0; i < captchaText.length; i++) {
    const angle = Math.random() * 0.4 - 0.2; // 随机旋转角度
    const offsetY = Math.random() * 15 - 7.5; // 垂直偏移
    ctx.save();
    ctx.translate(35 + i * 30, 50);
    ctx.rotate(angle);
    ctx.fillText(captchaText.charAt(i), 0, offsetY);
    ctx.restore();
  }
  // 绘制干扰线
  for (let i = 0; i < 5; i++) {
    ctx.strokeStyle = `rgba(150, 150, 150, ${Math.random() * 0.5})`;
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.stroke();
  }
  // 绘制干扰点
  for (let i = 0; i < 100; i++) {
    ctx.fillStyle = `rgba(100, 100, 100, ${Math.random() * 0.3})`;
    ctx.beginPath();
    ctx.arc(
      Math.random() * canvas.width,
      Math.random() * canvas.height,
      Math.random() * 2,
      0, Math.PI * 2
    );
    ctx.fill();
  }
  return captchaText;
}
// 初始生成验证码
let currentCaptcha = generateCaptcha();
// 刷新按钮事件
document.getElementById('refreshCaptcha').addEventListener('click', () => {
  currentCaptcha = generateCaptcha();
});
</script>

添加验证功能

<input type="text" id="userInput" placeholder="请输入验证码">
<button id="checkCaptcha">验证</button>
<div id="resultMessage"></div>
<script>
document.getElementById('checkCaptcha').addEventListener('click', () => {
  const userInput = document.getElementById('userInput').value.toUpperCase();
  const resultDiv = document.getElementById('resultMessage');
  if (userInput === currentCaptcha) {
    resultDiv.textContent = "验证成功！";
    resultDiv.style.color = "green";
  } else {
    resultDiv.textContent = "验证码错误，请重试！";
    resultDiv.style.color = "red";
    currentCaptcha = generateCaptcha(); // 刷新验证码
  }
});
</script>

增强验证码的安全性

后端验证的必要性

重要提醒：前端验证码仅用于展示目的，所有验证操作必须在服务器端进行，前端代码可被轻易修改，因此不能作为安全依据。

服务器端验证流程

sequenceDiagram
    participant 用户
    participant 前端
    participant 后端
    用户->>前端: 请求页面
    前端->>后端: 获取验证码标识
    后端-->>前端: 返回唯一标识
    前端->>用户: 显示验证码
    用户->>前端: 输入验证码 + 提交表单
    前端->>后端: 发送用户输入 + 验证码标识
    后端->>后端: 检查验证码有效性
    后端-->>前端: 返回验证结果

安全增强措施

动态密钥: 为每个验证码生成唯一密钥
时效限制: 设置验证码有效期（通常1-5分钟）
次数限制: 限制单IP验证尝试次数
难度自适应: 根据错误次数增加验证难度
加密传输: 使用HTTPS防止中间人攻击

高级验证码实现方案

滑动拼图验证码

// 实现思路
function createPuzzleCaptcha() {
  // 1. 加载背景图片
  // 2. 在随机位置创建拼图形状
  // 3. 绘制拼图轮廓和拖动滑块
  // 4. 记录原始位置坐标
  // 5. 验证用户拖动的偏移量是否在允许范围内
}

计算式验证码

function createMathCaptcha() {
  const num1 = Math.floor(Math.random() * 10) + 1;
  const num2 = Math.floor(Math.random() * 10) + 1;
  const operators = ['+', '-', '*'];
  const operator = operators[Math.floor(Math.random() * operators.length)];
  let result;
  switch(operator) {
    case '+': result = num1 + num2; break;
    case '-': result = num1 - num2; break;
    case '*': result = num1 * num2; break;
  }
  ctx.font = 'bold 30px Arial';
  ctx.fillText(`${num1} ${operator} ${num2} = ?`, 20, 45);
  return result.toString();
}

文字点选验证码

function createWordSelection() {
  const words = ['苹果', '香蕉', '汽车', '房子', '树木', '云朵', '太阳', '书本'];
  const selectedWords = [];
  // 随机选择3个单词
  for (let i = 0; i < 3; i++) {
    const randomIndex = Math.floor(Math.random() * words.length);
    selectedWords.push(words.splice(randomIndex, 1)[0]);
  }
  // 绘制单词到Canvas上的随机位置
  selectedWords.forEach((word, index) => {
    const x = 20 + Math.random() * 120;
    const y = 30 + index * 30;
    ctx.fillText(word, x, y);
    // 存储单词位置信息用于验证
    wordPositions.push({ word, x, y, width: ctx.measureText(word).width });
  });
}

无障碍访问优化

为视觉障碍用户提供替代方案

<canvas id="captchaCanvas" aria-label="验证码图像"></canvas>
<audio id="audioCaptcha" controls style="display:none"></audio>
<button id="audioToggle">语音验证码</button>
<script>
document.getElementById('audioToggle').addEventListener('click', () => {
  const audio = document.getElementById('audioCaptcha');
  const utterance = new SpeechSynthesisUtterance(currentCaptcha.split('').join(' '));
  utterance.lang = 'zh-CN';
  utterance.rate = 0.8;
  speechSynthesis.speak(utterance);
});
</script>