JS HTML图片验证码代码怎么写

创作时间:

2025-01-21 23:30:50

作者:

@小白创作中心

JS HTML图片验证码代码怎么写

在网页中实现图片验证码可以增强安全性，防止自动化脚本滥用表单提交功能。本文将详细介绍如何使用JavaScript和HTML实现图片验证码功能，包括生成随机验证码、绘制验证码图片、前端表单验证和服务器端验证等步骤。

核心步骤

实现图片验证码的核心步骤包括：

生成随机验证码
将验证码绘制为图片
在前端展示图片验证码
在服务器端验证用户输入的验证码

详细步骤

生成随机验证码

首先，需要生成一个随机验证码。这可以通过JavaScript在前端生成，或者通过后端语言如Python、Node.js在服务器端生成。通常，验证码是由字母和数字组成的一串字符。

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

绘制验证码图片

使用HTML5的Canvas API可以将生成的验证码绘制成图片。Canvas API允许你在网页上动态地绘制图形，并且可以在上面绘制文本。

<canvas id="captchaCanvas" width="150" height="50"></canvas>
<script>
  function drawCaptcha(captcha) {
    const canvas = document.getElementById('captchaCanvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = '30px Arial';
    ctx.fillStyle = '#000';
    ctx.fillText(captcha, 10, 35);
  }
  const captcha = generateCaptcha(6);
  drawCaptcha(captcha);
</script>

前端表单与验证码验证

创建一个包含验证码输入框的表单，并添加一个验证函数来检查用户输入的验证码是否与生成的验证码匹配。

<form id="captchaForm" onsubmit="return validateCaptcha()">
  <label for="userCaptcha">Enter Captcha:</label>
  <input type="text" id="userCaptcha" name="userCaptcha" required>
  <input type="submit" value="Submit">
</form>
<script>
  function validateCaptcha() {
    const userCaptcha = document.getElementById('userCaptcha').value;
    if (userCaptcha === captcha) {
      alert('Captcha correct!');
      return true;
    } else {
      alert('Captcha incorrect, please try again.');
      return false;
    }
  }
</script>

服务器端验证

为了确保安全性，验证码的验证应在服务器端完成。用户提交的验证码应发送到服务器，并与服务器端存储的验证码进行比较。

// Node.js (Express) example
const express = require('express');
const session = require('express-session');
const app = express();
app.use(session({
  secret: 'secret-key',
  resave: false,
  saveUninitialized: true
}));
app.get('/generate-captcha', (req, res) => {
  const captcha = generateCaptcha(6);
  req.session.captcha = captcha;
  res.json({ captcha });
});
app.post('/validate-captcha', (req, res) => {
  const userCaptcha = req.body.userCaptcha;
  if (userCaptcha === req.session.captcha) {
    res.send('Captcha correct!');
  } else {
    res.send('Captcha incorrect, please try again.');
  }
});
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

进阶优化

增强验证码安全性

为了防止验证码被轻易破解，可以对验证码进行一些增强和优化。例如，添加噪点、旋转文字、改变文字颜色和字体等。

<canvas id="captchaCanvas" width="150" height="50"></canvas>
<script>
  function drawCaptcha(captcha) {
    const canvas = document.getElementById('captchaCanvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Background noise
    for (let i = 0; i < 100; i++) {
      ctx.beginPath();
      ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fill();
    }
    // Captcha text
    ctx.font = '30px Arial';
    for (let i = 0; i < captcha.length; i++) {
      ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
      ctx.save();
      ctx.translate(20 + i * 20, 35);
      ctx.rotate((Math.random() - 0.5) * 0.5);
      ctx.fillText(captcha[i], 0, 0);
      ctx.restore();
    }
  }
  const captcha = generateCaptcha(6);
  drawCaptcha(captcha);
</script>