前后端分离模式下验证码实现 |
您所在的位置：网站首页 › java验证码怎么实现 › 前后端分离模式下验证码实现 |
前后端分离模式下验证码实现
|
一、前言
验证码，主要用于防刷，特别是注册页面。如果没有防刷机制，攻击者可以通过爬虫等技术，批量注册空虚的用户。 二、正文前端使用 Vue，并借助 ElementUI 简单美化页面、axios 发送 ajax 请求； 后端使用 SpringBoot，并借助 Kaptcha 生成验证码。 1.思路①用户进入 web 页面，前端请求后端生成一幅带验证码图片给前端 ②后端生成图片的同时，将图片中的正确验证码 rightCode 存到Redis中，key 为用户的ip，value 为正确码，有效时间 几分钟（MySQL 也行，不过不如 Redis 方便高效） ③前端显示后端传来的图片，用户输入请求，将用户的输入码 tryCode 传递给后端； ④后端接受用户的输入码 tryCode，先获取用户的 ip，根据 key = ip，查 value，获取 rightCode，与 tryCode 比对，返回结果。 2.后端核心代码 package com.cun.kaptcha.controller; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.cun.kaptcha.utils.R; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.google.code.kaptcha.impl.DefaultKaptcha; @Controller @RequestMapping("kaptcha") public class KaptchaController { private final Logger logger = LoggerFactory.getLogger(KaptchaController.class); /** * 验证码工具 */ @Autowired DefaultKaptcha defaultKaptcha; /** * redis工具 */ @Autowired private RedisTemplate redisTemplate; /** * 生成验证码 * * @param httpServletRequest 获取ip * @param httpServletResponse 传输图片 * @throws Exception */ @RequestMapping("/img") public void img(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception { byte[] captchaChallengeAsJpeg = null; ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream(); try { String createText = defaultKaptcha.createText(); // 生产验证码字符串并保存到 Redis 中，ip-rightCode，有效期为 1 小时 String ip = httpServletRequest.getRemoteAddr(); logger.info("ip：" + ip + "，rightCode = " + createText); redisTemplate.opsForValue().set(ip, createText, 1, TimeUnit.HOURS); // 使用生产的验证码字符串返回一个BufferedImage对象并转为byte写入到byte数组中 BufferedImage challenge = defaultKaptcha.createImage(createText); ImageIO.write(challenge, "jpg", jpegOutputStream); } catch (IllegalArgumentException e) { httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND); return; } // 定义response输出类型为image/jpeg类型，使用response输出流输出图片的byte数组 captchaChallengeAsJpeg = jpegOutputStream.toByteArray(); httpServletResponse.setHeader("Cache-Control", "no-store"); httpServletResponse.setHeader("Pragma", "no-cache"); httpServletResponse.setDateHeader("Expires", 0); httpServletResponse.setContentType("image/jpeg"); ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream(); responseOutputStream.write(captchaChallengeAsJpeg); responseOutputStream.flush(); responseOutputStream.close(); } /** * 校对验证码 * * @param httpServletRequest 获取ip * @return */ @ResponseBody @RequestMapping("/check/{tryCode}") public R check(HttpServletRequest httpServletRequest, @PathVariable String tryCode) { String ip = httpServletRequest.getRemoteAddr(); logger.info("ip：" + ip + "，tryCode = " + tryCode); // 从 Redis 中校验 String rightCode = redisTemplate.opsForValue().get(ip); if (rightCode != null && rightCode.equals(tryCode)) { return R.ok("校验成功", rightCode); } return R.error("校验失败"); } }全部代码已经上传至 GitHub：https://github.com/larger5/code-server 3.前端核心代码 Check export default { data() { return { code: "" } }, methods: { async checkCode() { const { data: res } = await this.$http.get(`http://localhost/kaptcha/check/${this.code}`); if (res.code === 200) { this.$notify({ title: 'It works!', type: 'success', message: '验证码校验正确', duration: 2000 }) } else { this.$notify({ title: 'It do not works!', type: 'error', message: '校验失败', duration: 2000 }) } } } } #app { font-family: Helvetica, sans-serif; text-align: center; }全部代码已经上传至 GitHub：https://github.com/larger5/code-web 4.效果
近年来，以往的这一套防刷机制，还是有风险的，比如爬虫可以先把图片爬取下来，通过图片识别API识别出里边 code，再进行操作，依旧是可以通过机器对系统制造垃圾数据。 目前主流防刷机制有手滑、拼图等。 |
【本文地址】
今日新闻 |
推荐新闻 |