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

一、前言

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

二、正文

前端使用 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<String, String> 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.前端核心代码

<template>
    <div id="app">
        <el-form :inline="true">
            <el-form-item>
                <el-image src="http://localhost/kaptcha/img" onclick="this.src='http://localhost/kaptcha/img?d='+new Date()*1">el-image>
            el-form-item>
            <el-form-item>
                <el-input v-model="code" style="width: 150px">el-input>
            el-form-item>
            <el-form-item>
                <el-button @click="checkCode" type="primary">Checkel-button>
            el-form-item>
        el-form>


    div>
template>

<script>
    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
                    })
                }
            }
        }
    }
script>

<style>
    #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    }
style>

全部代码已经上传至 GitHub：https://github.com/larger5/code-web

4.效果

三、结尾

近年来，以往的这一套防刷机制，还是有风险的，比如爬虫可以先把图片爬取下来，通过图片识别API识别出里边 code，再进行操作，依旧是可以通过机器对系统制造垃圾数据。

目前主流防刷机制有手滑、拼图等。