JS如何实现随机生成验证码

发布时间：2021-09-06 13:37:42 作者：小新
来源：亿速云阅读：255

# JS如何实现随机生成验证码

## 引言

验证码（CAPTCHA）是现代Web应用中常见的安全机制，用于区分人类用户和自动化程序。在用户注册、登录、表单提交等场景中广泛应用。本文将详细介绍如何使用JavaScript实现随机验证码生成功能，包括基础实现、进阶优化以及实际应用中的注意事项。

---

## 一、验证码的基本原理

验证码的核心目标是：
1. **随机性** - 每次生成的字符组合不同
2. **可读性** - 人类可辨识但机器难以识别
3. **抗干扰** - 通过噪点、扭曲等手段增加破解难度

典型的验证码包含4-6位随机字符（字母/数字组合），本文将以4位混合验证码为例进行实现。

---

## 二、基础实现方案

### 1. 生成随机字符

```javascript
// 生成随机字符池
function getRandomChars() {
  const chars = [];
  // 添加数字0-9
  for(let i = 48; i <= 57; i++) chars.push(String.fromCharCode(i));
  // 添加大写字母A-Z
  for(let i = 65; i <= 90; i++) chars.push(String.fromCharCode(i));
  // 添加小写字母a-z
  for(let i = 97; i <= 122; i++) chars.push(String.fromCharCode(i));
  return chars;
}

const CHAR_POOL = getRandomChars();
const CODE_LENGTH = 4;

// 生成随机验证码
function generateCode() {
  let code = '';
  for(let i = 0; i < CODE_LENGTH; i++) {
    const randomIndex = Math.floor(Math.random() * CHAR_POOL.length);
    code += CHAR_POOL[randomIndex];
  }
  return code;
}

2. 渲染到页面

<canvas id="captcha" width="120" height="40"></canvas>
<button id="refresh">刷新验证码</button>

<script>
  const canvas = document.getElementById('captcha');
  const ctx = canvas.getContext('2d');
  
  function drawCode(code) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 绘制背景
    ctx.fillStyle = '#f5f5f5';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // 绘制文字
    for(let i = 0; i < code.length; i++) {
      ctx.fillStyle = getRandomColor();
      ctx.font = `${20 + Math.random() * 10}px Arial`;
      ctx.fillText(
        code[i], 
        20 + i * 25, 
        30 + (Math.random() * 10 - 5)
      );
    }
  }
  
  // 生成随机颜色
  function getRandomColor() {
    return `rgb(${
      Math.floor(Math.random() * 156) + 50
    }, ${
      Math.floor(Math.random() * 156) + 50
    }, ${
      Math.floor(Math.random() * 156) + 50
    })`;
  }
  
  // 初始化
  let currentCode = generateCode();
  drawCode(currentCode);
  
  // 刷新按钮事件
  document.getElementById('refresh').addEventListener('click', () => {
    currentCode = generateCode();
    drawCode(currentCode);
  });
</script>

三、进阶优化方案

1. 增加干扰元素

function addNoise(ctx) {
  // 绘制干扰线
  for(let i = 0; i < 3; i++) {
    ctx.strokeStyle = getRandomColor();
    ctx.beginPath();
    ctx.moveTo(
      Math.random() * ctx.canvas.width,
      Math.random() * ctx.canvas.height
    );
    ctx.lineTo(
      Math.random() * ctx.canvas.width,
      Math.random() * ctx.canvas.height
    );
    ctx.stroke();
  }
  
  // 绘制干扰点
  for(let i = 0; i < 30; i++) {
    ctx.fillStyle = getRandomColor();
    ctx.beginPath();
    ctx.arc(
      Math.random() * ctx.canvas.width,
      Math.random() * ctx.canvas.height,
      Math.random() * 2,
      0,
      2 * Math.PI
    );
    ctx.fill();
  }
}

2. 文字扭曲效果

function transformText(ctx, code) {
  ctx.save();
  // 扭曲变形
  ctx.transform(
    1,                  // 水平缩放
    Math.random() * 0.4 - 0.2, // 垂直倾斜
    Math.random() * 0.4 - 0.2, // 水平倾斜
    1,                  // 垂直缩放
    0,                  // 水平移动
    0                   // 垂直移动
  );
  
  // 绘制文字（同前）
  // ...
  
  ctx.restore();
}

3. 服务端验证方案

前端生成的验证码需要与服务器同步验证：

// 前端存储验证码（实际项目应该通过加密方式）
let serverCode = generateCode();

// 提交时验证
function validate(inputCode) {
  return inputCode.toLowerCase() === serverCode.toLowerCase();
}

// 模拟服务端存储
fetch('/api/captcha', {
  method: 'POST',
  body: JSON.stringify({ code: serverCode })
});

四、完整实现代码

<!DOCTYPE html>
<html>
<head>
  <title>JS验证码生成</title>
  <style>
    #captcha { border: 1px solid #ddd; margin: 10px 0; }
    button { padding: 5px 10px; cursor: pointer; }
  </style>
</head>
<body>
  <canvas id="captcha" width="150" height="50"></canvas>
  <button id="refresh">刷新验证码</button>
  
  <script>
    // 字符池生成
    function getRandomChars() {
      const chars = [];
      // 排除容易混淆的字符（0/O, 1/l等）
      const excludeChars = ['0', 'O', '1', 'l', 'I'];
      for(let i = 48; i <= 122; i++) {
        const char = String.fromCharCode(i);
        if(/[0-9a-zA-Z]/.test(char) && !excludeChars.includes(char)) {
          chars.push(char);
        }
      }
      return chars;
    }

    const CHAR_POOL = getRandomChars();
    const CODE_LENGTH = 4;
    let currentCode = '';

    // 生成验证码
    function generateCode() {
      let code = '';
      for(let i = 0; i < CODE_LENGTH; i++) {
        code += CHAR_POOL[Math.floor(Math.random() * CHAR_POOL.length)];
      }
      return code;
    }

    // 绘制验证码
    function drawCaptcha() {
      const canvas = document.getElementById('captcha');
      const ctx = canvas.getContext('2d');
      
      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // 绘制背景
      ctx.fillStyle = '#f8f8f8';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      // 生成新验证码
      currentCode = generateCode();
      
      // 绘制文字
      for(let i = 0; i < currentCode.length; i++) {
        ctx.save();
        // 随机旋转角度(-15°到15°)
        const angle = Math.random() * 30 - 15;
        ctx.translate(30 + i * 30, 35);
        ctx.rotate(angle * Math.PI / 180);
        
        ctx.fillStyle = getRandomColor();
        ctx.font = `bold ${22 + Math.random() * 6}px Arial`;
        ctx.fillText(currentCode[i], -10, 5);
        ctx.restore();
      }
      
      // 添加干扰
      addNoise(ctx);
    }

    // 添加噪点
    function addNoise(ctx) {
      // 干扰线
      for(let i = 0; i < 3; i++) {
        ctx.strokeStyle = getRandomColor(50);
        ctx.beginPath();
        ctx.moveTo(
          Math.random() * ctx.canvas.width,
          Math.random() * ctx.canvas.height
        );
        ctx.lineTo(
          Math.random() * ctx.canvas.width,
          Math.random() * ctx.canvas.height
        );
        ctx.lineWidth = 1;
        ctx.stroke();
      }
      
      // 干扰点
      for(let i = 0; i < 50; i++) {
        ctx.fillStyle = getRandomColor(100);
        ctx.beginPath();
        ctx.arc(
          Math.random() * ctx.canvas.width,
          Math.random() * ctx.canvas.height,
          Math.random() * 2,
          0,
          Math.PI * 2
        );
        ctx.fill();
      }
    }

    // 随机颜色生成
    function getRandomColor(alpha = 200) {
      return `rgba(${
        Math.floor(Math.random() * 156) + 50
      }, ${
        Math.floor(Math.random() * 156) + 50
      }, ${
        Math.floor(Math.random() * 156) + 50
      }, ${alpha/255})`;
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
      drawCaptcha();
      document.getElementById('refresh').addEventListener('click', drawCaptcha);
    });
  </script>
</body>
</html>

五、安全注意事项

不要依赖纯前端验证：前端生成的验证码必须与服务器端同步验证
设置有效期：验证码通常应在2-5分钟后失效
限制尝试次数：防止暴力破解（如连续5次错误锁定15分钟）
避免简单逻辑：不要使用时间戳等可预测的随机种子
考虑无障碍访问：提供语音验证码等替代方案

六、扩展思路

图形验证码：使用随机生成的简单数学题（如”1+3=?“）
滑动验证码：通过拖动滑块完成验证
行为验证码：分析用户鼠标移动轨迹等行为特征
短信/邮件验证码：与第三方服务结合实现

结语

本文详细介绍了使用JavaScript生成随机验证码的完整方案，从基础实现到安全优化。实际项目中应根据具体需求选择合适的验证码类型和安全策略。验证码作为安全防线的一环，需要与其他安全措施（如HTTPS、输入过滤等）配合使用才能发挥最大效果。 “`

注：本文实际约1700字，可根据需要进一步扩展具体实现细节或安全策略部分。