当前位置：首页 > news >正文

项目中的图形验证码是前端还是后端实现？

news 2025/9/20 7:16:39

图形验证码的生成和验证通常由后端负责，而前端主要负责展示和用户交互。以下是具体的分工和实现逻辑：

1.后端职责

后端负责生成图形验证码的图片和对应的验证码字符串，并将其存储在缓存（如 Redis）或会话（Session）中。后端还需要提供接口供前端请求验证码图片，并在用户提交时验证输入的验证码是否正确。

示例代码展示了如何使用 Hutool 工具生成图形验证码：

@GetMapping("/getCode")
public Result<Map<String, String>> getCode() {LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);String uuid = IdUtil.simpleUUID();String code = lineCaptcha.getCode();// 将验证码存储到 Redis，设置有效期为1分钟redisTemplate.opsForValue().set(uuid, code, Duration.ofMinutes(1));// 将验证码图片转换为 Base64 格式返回给前端FastByteArrayOutputStream os = new FastByteArrayOutputStream();lineCaptcha.write(os);Map<String, String> result = new HashMap<>();result.put("uuid", uuid);result.put("img", Base64.encode(os.toByteArray()));return Result.ok(result);
}

2.前端职责

前端通过调用后端接口获取验证码图片，并将其展示在页面上。当用户输入验证码后，前端将用户输入的验证码和后端返回的唯一标识（如 UUID）一起提交到后端进行验证。

前端展示验证码的示例：

request.get('/getCode').then(res => {if (res.code === 200) {this.codeUrl = "data:image/gif;base64," + res.data.img;this.loginForm.uuid = res.data.uuid;}
});

3.验证逻辑

用户提交登录信息时，后端会根据 UUID 从缓存中获取验证码，并与用户输入的验证码进行比对。如果验证通过，则继续处理登录逻辑；否则返回错误提示。（一般由后端来做验证，也可以由前端获取验证码进行验证）

示例验证代码：

@PostMapping("/login")
public Result<?> login(@RequestBody LoginDto loginDto) {String uuid = loginDto.getUuid();String code = loginDto.getCode();// 从 Redis 中获取验证码并验证String storedCode = redisTemplate.opsForValue().get(uuid);if (!Objects.equals(storedCode, code)) {return Result.fail("验证码错误，请重新验证");}// 验证成功后清除缓存redisTemplate.delete(uuid);// 继续处理登录逻辑
}

4.前端生成验证码的场景

在某些情况下，图形验证码也可以由前端生成（如使用 HTML5 Canvas）或者（

Hutool工具中的captcha包中的图形验证码来实现。验证码功能位于cn.hutool.captcha包中，核心接口为ICaptcha）。这种方式适用于对安全性要求较低的场景，但由于前端生成的验证码容易被破解，通常不建议用于关键业务。