关于登录验证码的开发思路——超详细

前言

我们在使用网站的注册/登录功能时，常常会看到除了账号密码外，还会有一个验证码的输入框。那么从技术层面来说，验证码这个功能应该如何实现呢？本篇文章将从SpringBoot + Vue为例，讲解一下开发的思路。如果只看开发步骤，可以直接跳至步骤分解开始阅读。

在进行开发之前，我们可以先想一想，验证码的作用是什么？
验证码设计之初是用于拦截爬虫和机器的大量暴力访问，也就是说它的目标对象不是人，而是机器。
我们仔细想想会发现验证码对于正常的用户而言，其实并没有起到任何优化作用，甚至在一定程度上会延长用户登录/注册操作的流程，降低用户体验。但是对于机器或者爬虫来说，验证码的作用就体现出来了，试想如果只需要账号+密码，那么恶意用户就可以通过爬虫轻而易举的爬取网站的数据，或者在没有其他风控系统的条件下，甚至可以通过多次尝试来暴力破解密码。
当然了，如今简单的字符验证码已经很容易被破解了，也自然地推出了更难破解、更加智能化的验证机制。诸如手机短信验证码、滑块验证机制、数值计算等等...

image.png

讲完验证码的作用后，再说说代码设计
我们已经知道，验证码的主要作用是为了防止非人类手动操作的请求，那么对于验证码功能应该放在前端还是后端校验这个问题，答案就不言而喻了，需要放在后端校验。原因是，验证码功能一旦只单纯放在前端进行校验，对于恶意破坏者可以轻而易举地绕过你的前端校验，直接朝后台发起POST请求。

这里解释一下绕过前端校验的可行思路
对于客户端而言，我们的前端代码是完全公开透明的
恶意用户完全可以将我们的前端资源保存在自己本地后，删去验证码校验，直接发起请求。
此时，我们的服务器就不得不面对大量的恶意请求直接打在我们的服务器上面，后果不堪设想。

所以，我们的验证码必须要放在后台进行二次校验，这样才能保障验证码机制的有效性。同时，前端代码可以对用户输入字符长度、是否有非法字符等格式进行校验，从而降低过多无效的请求直接落在我们的服务器校验上，降低压力。

步骤分解：

前端：

1）进入登录/注册页面时，获取验证码图片
2）对用户输入的验证码进行简单的规则校验
3）返回登录结果
4）提供刷新验证码的动作，防止出现用户难以辨识的识别码

后端：

1）随机生成四位数字的验证码图片和数字
2）结合随机生成的UUID作为Key，4位数字验证码作为Value保存验证码到Redis中
3）将Key和验证码响应给用户，等用户提交后验证校验码是否有效

后端代码：

图片工具类，用于生成验证码图片

package com.qiqv.music.utils;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * 验证码生成器
 */
public class VerifyCodeUtils {
    private int width = 100;// 生成验证码图片的宽度
    private int height = 30;// 生成验证码图片的高度
    private String[] fontNames = { "宋体", "楷体", "隶书", "微软雅黑" };
    private Color bgColor = new Color(255, 255, 255);// 定义验证码图片的背景颜色为白色
    private Random random = new Random();
    // 从下面的字符串中挑选字符放入验证码集中，去掉1、l、L等容易混淆的字符
    private String codes = "023456789abcdefghijkmnopqrstuvwxyzABCDEFGHIJKMNOPQRSTUVWXYZ";
    private String text;// 记录随机字符串

    /**
     * 获取一个随意颜色
     *
     * @return
     */
    private Color randomColor() {
        int red = random.nextInt(150);
        int green = random.nextInt(150);
        int blue = random.nextInt(150);
        return new Color(red, green, blue);
    }

    /**
     * 获取一个随机字体
     *
     * @return
     */
    private Font randomFont() {
        String name = fontNames[random.nextInt(fontNames.length)];
        int style = random.nextInt(4);
        int size = random.nextInt(5) + 24;
        return new Font(name, style, size);
    }

    /**
     * 获取一个随机字符
     *
     * @return
     */
    private char randomChar() {
        return codes.charAt(random.nextInt(codes.length()));
    }

    /**
     * 创建一个空白的BufferedImage对象
     *
     * @return
     */
    private BufferedImage createImage() {
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        g2.setColor(bgColor);// 设置验证码图片的背景颜色
        g2.fillRect(0, 0, width, height);
        return image;
    }

    public BufferedImage getImage() {
        BufferedImage image = createImage();
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < 4; i++) {
            String s = randomChar() + "";
            sb.append(s);
            g2.setColor(randomColor());
            g2.setFont(randomFont());
            float x = i * width * 1.0f / 4;
            g2.drawString(s, x, height - 8);
        }
        this.text = sb.toString();
        drawLine(image);
        return image;
    }

    /**
     * 绘制干扰线
     *
     * @param image
     */
    private void drawLine(BufferedImage image) {
        Graphics2D g2 = (Graphics2D) image.getGraphics();
        int num = 5;
        for (int i = 0; i < num; i++) {
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int x2 = random.nextInt(width);
            int y2 = random.nextInt(height);
            g2.setColor(randomColor());
            g2.setStroke(new BasicStroke(1.5f));
            g2.drawLine(x1, y1, x2, y2);
        }
    }

    public String getText() {
        return text;
    }

    public static void output(BufferedImage image, OutputStream out) throws IOException {
        ImageIO.write(image, "JPEG", out);
    }
}

• Controller生成验证码

/**
     * 用户登录/注册校验码生成
     * 生成验证码后，将本次生成验证码操作存入redis中，有效期为3分钟
     * 键值规则为  USER_VERIFYCODE_SESSION + UUID : 4位数字验证码
     * @param request
     * @param response
     * @return
     */
    @RequestMapping(path = "/getVerifyCodePic",method = RequestMethod.GET)
    public QiqvJSONResult getVerifyCodePic(HttpServletRequest request, HttpServletResponse response) throws IOException {
        Map<String, String> result = new HashMap<>();
        VerifyCodeUtils code = new VerifyCodeUtils();
        // 生成验证码图片
        BufferedImage image = code.getImage();
        // 获取验证码四位数字
        String text = code.getText();
        // 验证码-键值对存入分别存入redis
        String verifyCode_key = USER_VERIFYCODE_SESSION+UUID.randomUUID().toString();
        redisOperator.setValue(verifyCode_key,text,60*3);
        //进行base64编码
        ByteArrayOutputStream bos = new ByteArrayOutputStream();
        try{
            ImageIO.write(image, "png", bos);
            String string = Base64Utils.encodeToString(bos.toByteArray());
            result.put("key", verifyCode_key);
            result.put("image", string);
            return QiqvJSONResult.ok(result);
        }catch (IOException e){
            System.out.println(e);
        }finally {
            bos.close();
        }
        return QiqvJSONResult.errorMsg("生成验证码失败");
    }

这里要注意，用户的请求时无状态的，我们生成验证码后，怎么将当前发起验证码请求的用户和提交验证码的用户关联起来，确认是同一名用户呢？
这里选择的方案是：
后台生成一个随机的凭证号连同验证码一起同时发给用户并保存到Redis中。后续通过这个凭证来作为用户标识。
（这里也可以采用session来做，具体可以百度找相关案例）

• Controller 校验验证码是否合法

/**
     * 验证码校验
     * 将用户写入的验证码和保存到redis的验证码比对
     * @param verifyCode
     * @return
     */
    private String verifyCodeCheck(String verifyCodeKey,String verifyCode){
        if(StringUtils.isBlank(verifyCode) || StringUtils.isBlank(verifyCodeKey)){
            return "验证码不能为空";
        }
        String value = redisOperator.getValue(verifyCodeKey);
        // 验证码已过期
        if(null == value){
            return "验证码已过期，请刷新后重试";
            //说明是用户乱填或者有缓存
        }else if(!verifyCode.equalsIgnoreCase(value)){
            return "无效的验证码，请刷新后重试";
        }
        return null;
    }

前端代码

1、发起获取验证码请求

getVerifyCodePic(){
            var that = this;
            getVerifyCode().then(res => {
                 if(res.code == 200 && res.data){
                    that.loginForm.verifyKey = res.data.key;
                    that.verifyCodePicUrl = "data:image/png;base64," + res.data.image;
                }else if(res.code ==500 && res.msg){
                    that.$message.error(res.msg);
                }else{
                    that.$message.error('获取验证码失败');
                }
            }).catch(err => {
                console.log(err);
            })
        },

这里要注意两点：

• 对后端传来的图片信息进行转码
• getVerifyCode()方法是封装了一个get请求，大家参考回调函数就行

2、验证码的规则校验

// 校验验证码格式是否正确
        checkVerifyCode(verifyCode){
            var pattern = /[0-9A-Za-z]{4}/g;
            console.log(verifyCode)
            if(!verifyCode || verifyCode == ''){
                this.$message.error('请输入验证码');
                return false;
            }else if(verifyCode.length < 4){
                this.$message.error('验证码不得小于4位');
                return false;
            }else if(!pattern.exec(verifyCode)){
                this.$message.error('验证码不合法');
                return false;
            }else{
                return true;
            }
        }

3、页面显示验证码

image.png
image.png

4、刷新验证码

// 重新生成验证码
        resetVerifyCode(){
            this.isDisable=true;
            this.getVerifyCodePic();
            setTimeout(() => {
                this.isDisable=false;
            },1500)
        }

这里需要注意，为了防止用户疯狂点击验证码给后台带去无谓的流量请求，所以前台做了一下限制，每次点击后要1.5s后才可以继续点击。

最终效果图如下：

最终效果图.gif

结束语：

到这里，对于验证码功能已经讲解完毕了，如果需要整个项目的源码，可以去我的GitHub项目中下载：https://github.com/moutory/QiQvCloud-Music
如果有不懂或者文章有误的内容，欢迎交流。