前台工作这么枯燥？我来教你用 JS 写图形验证码

前端

2023-12-06 05:43:03

图形验证码：了解并实现防止机器人入侵的机制

导读：

图形验证码是一种广泛使用的安全措施，旨在抵御恶意爬虫和机器人的攻击。本文将深入剖析图形验证码的工作原理，并指导您使用 JavaScript 实现一个，以增强您网站或应用程序的安全性。

图形验证码：了解其必要性

想象一下一个网站，允许用户注册和登录。如果没有额外的安全措施，机器人程序可以轻松地创建虚假帐户或滥用服务。这就是图形验证码的作用所在——它作为一道防线，确保只有真正的人类才能通过。

图形验证码通常以图像形式呈现，包含随机生成的字符或数字。用户需要在登录或注册时输入正确的验证码，从而证明他们是真人，而不是机器人。

实现图形验证码：分步指南

1. 创建画布

首先，我们需要创建一个 <canvas> 元素作为画布，用于绘制验证码。

<canvas id="captcha" width="100" height="50"></canvas>

2. 获取画布上下文

接下来，我们必须获取画布的上下文，以便在画布上绘制图形。

const canvas = document.getElementById("captcha");
const ctx = canvas.getContext("2d");

3. 绘制验证码

现在，让我们开始绘制验证码。这里，我们将使用 Math.random() 函数生成随机字符或数字，并将其绘制到画布上。

for (let i = 0; i < 6; i++) {
  const x = i * 15 + 10;
  const y = Math.random() * 40 + 10;
  const char = String.fromCharCode(Math.floor(Math.random() * 10) + 48);
  ctx.fillStyle = "black";
  ctx.font = "20px Arial";
  ctx.fillText(char, x, y);
}

4. 添加干扰线

为了提高验证码的安全性，我们可以添加干扰线。

for (let i = 0; i < 4; i++) {
  ctx.beginPath();
  ctx.moveTo(Math.random() * 100, Math.random() * 50);
  ctx.lineTo(Math.random() * 100, Math.random() * 50);
  ctx.strokeStyle = "red";
  ctx.stroke();
}

5. 验证验证码

当用户输入验证码后，我们必须验证其准确性。

const input = document.getElementById("captcha-input");
const button = document.getElementById("submit-button");

button.addEventListener("click", () => {
  if (input.value === captchaText) {
    alert("验证码正确！");
  } else {
    alert("验证码错误！");
  }
});