javascript怎么制作驗證碼

# JavaScript怎么制作驗證碼

## 引言

驗證碼（CAPTCHA）是網站常用的安全機制，用于區分人類用戶和自動化程序。本文將詳細介紹如何使用JavaScript從頭開始制作驗證碼，包括基礎實現、進階優化以及實際應用場景。

---

## 一、驗證碼基礎概念

### 1.1 什么是驗證碼
驗證碼（全自動區分計算機和人類的圖靈測試）通過要求用戶完成簡單任務（如識別扭曲文字）來防止機器人濫用服務。

### 1.2 常見類型
- **文字驗證碼**：扭曲字母數字組合
- **圖形驗證碼**：點擊特定圖片
- **數學驗證碼**：簡單算術題
- **行為驗證碼**：滑動拼圖等

---

## 二、基礎文字驗證碼實現

### 2.1 HTML結構
```html
<div id="captcha-container">
  <canvas id="captcha-canvas" width="200" height="80"></canvas>
  <input type="text" id="captcha-input" placeholder="輸入驗證碼">
  <button id="refresh-btn">刷新</button>
  <button id="submit-btn">提交</button>
  <p id="result-message"></p>
</div>

2.2 JavaScript核心代碼

// 生成隨機字符串
function generateCaptchaText(length = 6) {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

// 繪制驗證碼
function drawCaptcha(canvas, text) {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 背景色
  ctx.fillStyle = '#f5f5f5';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 文字樣式
  ctx.font = 'bold 36px Arial';
  ctx.fillStyle = '#333';
  
  // 文字扭曲效果
  for (let i = 0; i < text.length; i++) {
    ctx.save();
    ctx.translate(30 + i * 25, 50);
    ctx.rotate((Math.random() - 0.5) * 0.4);
    ctx.fillText(text[i], 0, 0);
    ctx.restore();
  }
  
  // 干擾線
  for (let i = 0; i < 5; i++) {
    ctx.strokeStyle = `rgba(0, 0, 0, ${Math.random() * 0.3})`;
    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(0, 0, 0, ${Math.random() * 0.2})`;
    ctx.fillRect(
      Math.random() * canvas.width,
      Math.random() * canvas.height,
      1, 1
    );
  }
}

2.3 初始化與事件處理

document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('captcha-canvas');
  const refreshBtn = document.getElementById('refresh-btn');
  const submitBtn = document.getElementById('submit-btn');
  const input = document.getElementById('captcha-input');
  const resultMsg = document.getElementById('result-message');
  
  let currentCaptcha = '';
  
  function initCaptcha() {
    currentCaptcha = generateCaptchaText();
    drawCaptcha(canvas, currentCaptcha);
    input.value = '';
    resultMsg.textContent = '';
  }
  
  refreshBtn.addEventListener('click', initCaptcha);
  
  submitBtn.addEventListener('click', () => {
    if (input.value.trim().toLowerCase() === currentCaptcha.toLowerCase()) {
      resultMsg.textContent = '驗證成功！';
      resultMsg.style.color = 'green';
    } else {
      resultMsg.textContent = '驗證碼錯誤，請重試！';
      resultMsg.style.color = 'red';
      initCaptcha();
    }
  });
  
  initCaptcha();
});

三、進階優化方案

3.1 增加安全性

// 服務端驗證（偽代碼示例）
async function validateCaptcha(serverToken, userInput) {
  const response = await fetch('/api/validate-captcha', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token: serverToken, input: userInput })
  });
  return response.json();
}

3.2 交互式驗證碼

// 滑動拼圖驗證碼示例
function initSliderCaptcha() {
  const slider = document.createElement('div');
  slider.className = 'slider';
  slider.innerHTML = `
    <div class="slider-track"></div>
    <div class="slider-thumb">→</div>
  `;
  
  let isVerified = false;
  slider.querySelector('.slider-thumb').addEventListener('mousedown', (e) => {
    if (isVerified) return;
    // 實現滑動邏輯...
  });
}

3.3 無障礙訪問

<!-- 為視障用戶提供音頻驗證碼 -->
<button id="audio-captcha">播放音頻驗證碼</button>
<audio id="captcha-audio" src="/captcha-audio.mp3"></audio>

<script>
  document.getElementById('audio-captcha').addEventListener('click', () => {
    document.getElementById('captcha-audio').play();
  });
</script>

四、實際應用注意事項

4.1 性能優化

• 使用requestAnimationFrame優化動畫
• 避免頻繁的DOM操作
• 對Canvas繪制進行緩存

4.2 安全建議

1. 不要完全依賴前端驗證：必須配合服務端驗證
2. 限制嘗試次數：防止暴力破解
3. 定期更換算法：防止攻擊者研究規律

4.3 移動端適配

/* 響應式設計 */
@media (max-width: 768px) {
  #captcha-canvas {
    width: 100%;
    height: auto;
  }
}

五、完整代碼示例

查看完整示例代碼 包含： - 基礎文字驗證碼 - 滑動拼圖驗證碼 - 服務端驗證示例 - 單元測試用例

結語

通過本文，您已經掌握了使用JavaScript創建驗證碼的核心技術。記?。?1. 前端驗證只是第一道防線 2. 持續更新反機器人策略 3. 平衡安全性與用戶體驗

擴展閱讀： - reCAPTCHA官方文檔 - Web安全最佳實踐 “`

注：實際使用時建議： 1. 添加服務端驗證邏輯 2. 對敏感操作增加二次驗證 3. 定期更新驗證碼生成算法