前后端分离模式下验证码实现

一、前言

验证码，主要用于防刷，特别是注册页面。如果没有防刷机制，攻击者可以通过爬虫等技术，批量注册空虚的用户。

二、正文

前端使用 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 {