用极简原生 JS 缔造图形验证码，解锁前端安全新境界！

2022-12-25 23:31:58

原生 JavaScript 图形验证码：安全与便捷的完美融合

在数字时代，网络安全至关重要，而图形验证码是抵御恶意攻击的重要防线。如果您是一位前端开发者，掌握原生 JavaScript 图形验证码的创建技巧将为您如虎添翼。在这篇博客中，我们将深入探讨原生 JavaScript 图形验证码的工作原理、实现步骤及其优势。

图形验证码的运作原理

图形验证码的核心思想是将随机字符呈现为难以识别的图像，从而阻止机器人的识别。用户只需通过简单的观察，即可识别出图像中的字符，完成验证过程。此举有效地区分了人类和机器人，为网站和应用程序提供了额外的安全层。

原生 JavaScript 实现步骤

要使用原生 JavaScript 构建图形验证码，请按照以下步骤操作：

准备画布： 创建一个 <canvas> 元素，它是您绘制图形验证码的舞台。
绘制干扰线： 使用 Math.random() 函数生成随机干扰线，使验证码更加难以识别。
生成验证码字符： 随机生成一系列字符（通常是数字和字母的组合）作为验证码。
绘制字符： 将随机生成的字符绘制到画布上，并添加效果（如扭曲、旋转）来增加识别难度。
呈现验证码： 最后，将生成的验证码图像呈现在 <canvas> 元素中。
处理用户输入： 当用户输入验证码时，将其与预先生成的验证码进行比较。如果两者一致，则验证通过，否则给出提示并要求用户重新输入。

function createCaptcha() {
  // 准备画布
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 绘制干扰线
  for (let i = 0; i < 10; i++) {
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.stroke();
  }

  // 生成验证码字符
  const captcha = generateCaptcha();

  // 绘制字符
  for (let i = 0; i < captcha.length; i++) {
    ctx.font = 'bold 30px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText(captcha[i], 10 + i * 30, 40);
  }

  // 呈现验证码
  document.body.appendChild(canvas);

  // 处理用户输入
  const input = document.getElementById('captcha-input');
  input.addEventListener('input', (e) => {
    if (e.target.value === captcha) {
      alert('验证码正确！');
    } else {
      alert('验证码错误，请重新输入！');
    }
  });
}

function generateCaptcha() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let captcha = '';
  for (let i = 0; i < 6; i++) {
    captcha += chars[Math.floor(Math.random() * chars.length)];
  }
  return captcha;
}

createCaptcha();