当前位置：首页 > React

react实现图片验证

2026-01-26 17:51:11React

实现图片验证码的基本思路

图片验证码通常用于防止自动化脚本提交表单，核心流程是生成随机字符或图形，用户输入后与服务端验证。React实现需结合前端生成/展示与后端校验逻辑。

前端生成验证码组件

使用canvas动态绘制验证码图片，以下为关键代码示例：

react实现图片验证

import React, { useRef, useEffect } from 'react';

const Captcha = ({ onGenerate }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    generateCaptcha();
  }, []);

  const generateCaptcha = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
    let captcha = '';

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制背景色
    ctx.fillStyle = '#f5f5f5';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 生成随机字符
    for (let i = 0; i < 4; i++) {
      const char = chars.charAt(Math.floor(Math.random() * chars.length));
      captcha += char;

      // 绘制字符
      ctx.font = '30px Arial';
      ctx.fillStyle = getRandomColor();
      ctx.fillText(char, 15 + i * 30, 30);
    }

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

    onGenerate(captcha);
  };

  const getRandomColor = () => {
    return `rgb(${Math.floor(Math.random() * 156) + 100}, 
                ${Math.floor(Math.random() * 156) + 100}, 
                ${Math.floor(Math.random() * 156) + 100})`;
  };

  return (
    <div>
      <canvas 
        ref={canvasRef} 
        width="150" 
        height="40"
        onClick={generateCaptcha}
        style={{ cursor: 'pointer' }}
      />
    </div>
  );
};

验证码校验逻辑

将生成的验证码与用户输入进行比对：

react实现图片验证

const CaptchaForm = () => {
  const [captchaText, setCaptchaText] = useState('');
  const [userInput, setUserInput] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (userInput.toLowerCase() === captchaText.toLowerCase()) {
      setMessage('验证成功');
    } else {
      setMessage('验证码错误');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Captcha onGenerate={(text) => setCaptchaText(text)} />
      <input 
        type="text" 
        value={userInput}
        onChange={(e) => setUserInput(e.target.value)}
        placeholder="输入验证码"
      />
      <button type="submit">提交</button>
      {message && <div>{message}</div>}
    </form>
  );
};

服务端验证方案（可选）

对于更高安全性要求，建议采用服务端生成验证码：

后端API生成验证码图片和对应文本
将文本存储在session或Redis中
前端通过接口获取图片
提交时后端比对存储的验证码

// Node.js示例（Express）
app.get('/captcha', (req, res) => {
  const captcha = generateCaptchaText(); // 生成随机文本
  req.session.captcha = captcha; // 存储到session

  const imageBuffer = generateCaptchaImage(captcha); // 生成图片
  res.set('Content-Type', 'image/png');
  res.send(imageBuffer);
});

app.post('/verify', (req, res) => {
  if (req.body.captcha === req.session.captcha) {
    res.json({ success: true });
  } else {
    res.status(400).json({ error: '验证码错误' });
  }
});