【验证码】登录界面生成随机验证图片

在登录界面生成验证码用于校验登录，如下图所示

 生成验证码

生成验证码的类，用的是@WebServlet注解的servlet.

生成的验证码会先放到session中，然后再传到前端显示，用于登录的时候验证。

package com.sed.zuul.base.servlet;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.security.SecureRandom;


/**
 * 随机生成验证图片
 * 
 * @author sed<br/>
 *         2021-09-01 11:43:12
 * 
 */
@WebServlet(urlPatterns = "/randCodeImage")
public class RandCodeImageServlet extends HttpServlet {
    private static final long serialVersionUID = -1257947018545327308L;
    private static final String SESSION_KEY_OF_RAND_CODE = "randCode"; // todo 要统一常量
    
    static{
        System.setProperty("java.awt.headless", "true");
    }
    /**
	 * 
	 */
	private static final int COUNT = 200;

    /**
     * 定义图形大小
     */
    private static final int WIDTH = 105;
	/**
	 * 定义图形大小
	 */
	private static final int HEIGHT = 35;
	// private Font mFont = new Font("Arial Black", Font.PLAIN, 15); //设置字体
	/**
	 * 干扰线的长度=1.414*lineWidth
	 */
	private static final int LINE_WIDTH = 2;

	@Override
	public void doGet(final HttpServletRequest request,
			final HttpServletResponse response) throws ServletException,
			IOException {
		// 设置页面不缓存
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		// response.setContentType("image/png");

		// 在内存中创建图象
		final BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
		// 获取图形上下文
		final Graphics2D graphics = (Graphics2D) image.getGraphics();

		// 设定背景颜色
		graphics.setColor(Color.WHITE); // ---1
//		graphics.setColor(new Color(27, 37, 83));
		graphics.fillRect(0, 0, WIDTH, HEIGHT);
		// 设定边框颜色
		graphics.setColor(getRandColor(100, 200)); // ---2
//		graphics.drawRect(0, 0, WIDTH - 1, HEIGHT - 1);

        final SecureRandom random = new SecureRandom();
		// 随机产生干扰线，使图象中的认证码不易被其它程序探测到
		for (int i = 0; i < COUNT; i++) {
			graphics.setColor(getRandColor(150, 200)); // ---3

			final int x = random.nextInt(WIDTH - LINE_WIDTH - 1) + 1; // 保证画在边框之内
			final int y = random.nextInt(HEIGHT - LINE_WIDTH - 1) + 1;
			final int xl = random.nextInt(LINE_WIDTH);
			final int yl = random.nextInt(LINE_WIDTH);
			graphics.drawLine(x, y, x + xl, y + yl);
		}

		// 取随机产生的认证码(4位数字)
		final String resultCode = exctractRandCode();
		for (int i = 0; i < resultCode.length(); i++) {
			// 将认证码显示到图象中,调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
			// graphics.setColor(new Color(20 + random.nextInt(130), 20 + random
			// .nextInt(130), 20 + random.nextInt(130)));

            // 设置字体颜色
			graphics.setColor(Color.BLACK);
//			graphics.setColor(new Color(182, 190, 231));
            // 设置字体样式
			graphics.setFont(new Font("Arial Black", Font.ITALIC, 18));
//            graphics.setFont(new Font("Times New Roman", Font.BOLD, 24));
            // 设置字符，字符间距，上边距
			graphics.drawString(String.valueOf(resultCode.charAt(i)), (23 * i) + 8, 26);
		}

		// 将认证码存入SESSION
		request.getSession().setAttribute(SESSION_KEY_OF_RAND_CODE, resultCode);
		// 图象生效
		graphics.dispose();

		// 输出图象到页面
		ImageIO.write(image, "JPEG", response.getOutputStream());
	}

	@Override
	public void doPost(final HttpServletRequest request,
			final HttpServletResponse response) throws ServletException,
			IOException {
		doGet(request, response);
	}

	/**
	 * @return 随机码
	 */
	private String exctractRandCode() {
		final String randCodeType = "5";
        int randCodeLength = 4;
        if (randCodeType == null) {
			return RandCodeImageEnum.NUMBER_CHAR.generateStr(randCodeLength);
		} else {
			switch (randCodeType.charAt(0)) {
			case '1':
				return RandCodeImageEnum.NUMBER_CHAR.generateStr(randCodeLength);
			case '2':
				return RandCodeImageEnum.LOWER_CHAR.generateStr(randCodeLength);
			case '3':
				return RandCodeImageEnum.UPPER_CHAR.generateStr(randCodeLength);
			case '4':
				return RandCodeImageEnum.LETTER_CHAR.generateStr(randCodeLength);
			case '5':
				return RandCodeImageEnum.ALL_CHAR.generateStr(randCodeLength);

			default:
				return RandCodeImageEnum.NUMBER_CHAR.generateStr(randCodeLength);
			}
		}
	}

	/**
	 * 描述：
	 * 
	 * @param fc
	 *            描述：
	 * @param bc
	 *            描述：
	 * 
	 * @return 描述：
	 */
	private Color getRandColor(int fc, int bc) { // 取得给定范围随机颜色
		final SecureRandom random = new SecureRandom();
		if (fc > 255) {
			fc = 255;
		}
		if (bc > 255) {
			bc = 255;
		}

		final int r = fc + random.nextInt(bc - fc);
		final int g = fc + random.nextInt(bc - fc);
		final int b = fc + random.nextInt(bc - fc);

		return new Color(r, g, b);
	}
}

/**
 * 验证码辅助类
 * 
 * 
 */
enum RandCodeImageEnum {

	/**
	 * 混合字符串
	 */
	ALL_CHAR("0123456789abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ"), // 去除小写的l和o这个两个不容易区分的字符；
	/**
	 * 字符
	 */
	LETTER_CHAR("abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ"),
	/**
	 * 小写字母
	 */
	LOWER_CHAR("abcdefghijkmnopqrstuvwxyz"),
	/**
	 * 数字
	 */
	NUMBER_CHAR("0123456789"),
	/**
	 * 大写字符
	 */
	UPPER_CHAR("ABCDEFGHJKLMNOPQRSTUVWXYZ");

	/**
	 * 待生成的字符串
	 */
	private String charStr;

	/**
	 * @param charStr
	 */
	private RandCodeImageEnum(final String charStr) {
		this.charStr = charStr;
	}

	/**
	 * 生产随机验证码
	 * 
	 * @param codeLength
	 *            验证码的长度
	 * @return 验证码
	 */
	public String generateStr(final int codeLength) {
		final StringBuffer sb = new StringBuffer();
		final SecureRandom random = new SecureRandom();
		final String sourseStr = getCharStr();

		for (int i = 0; i < codeLength; i++) {
			sb.append(sourseStr.charAt(random.nextInt(sourseStr.length())));
		}

		return sb.toString();
	}

	/**
	 * @return the {@link #charStr}
	 */
	public String getCharStr() {
		return charStr;
	}

}

需要在入口加上【@ServletComponentScan】用于使@WebServlet注解生效

@SpringBootApplication
@ServletComponentScan
public class application {

    public static void main(String[] args) {
        SpringApplication.run(ZuulApplication.class, args);
    }
}

 拦截器放行该路径

@Configuration
public class WebConfigurer implements WebMvcConfigurer {
    @Autowired
    private LoginInterceptor loginInterceptor;

     // 这个方法用来注册拦截器，我们自己写好的拦截器需要通过这里添加注册才能生效
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginInterceptor).excludePathPatterns("/randCodeImage").addPathPatterns("/**");
    }
}

前端调用

仅贴出关键代码

【vue.config.js】中配置调用该接口的基础路径

devServer: {
    proxy: {
      '/randCodeImage': {
        target: 'http://localhost:8094',
        changeOrigin: true
      }
    }
}

template:

<FormItem prop="identifyCode" label="验证码">
  <Row :gutter="8" type="flex">
    <Col span="17">
      <Input v-model="form.identifyCode" placeholder="验证码"></Input>
    </Col>
    <Col span="7" style="height: 38px;">
      <img
        :src="codeImg"
        @click="refreshImage"
        height="38"
        width="112"
        style="cursor: pointer;width: 100%;border-radius: 4px;height: 90%"
      />
    </Col>
  </Row>
</FormItem>

data：

data () {
    return {
        form: {identifyCode: ''},
        codeImg: '/randCodeImage?1'
    }
}

method:

注意加上Date.parse(new Date())，否则会出现img标签src缓存问题

methods: {
    refreshImage () {
        this.codeImg = '/randCodeImage?' + Date.parse(new Date())
        this.form.identifyCode = ''
    }
}

登录验证

仅贴出校验验证码部分的登录方法，校验方法就是将前端输入的验证码与存入session中的验证码进行对比，如果一样则验证通过。

public RestResult<Object> login(String userName, String password, String randCode, HttpServletRequest req) throws Exception {
    System.out.println("开始校验验证码=========="+randCode+"======session中验证码======="+session.getAttribute("randCode"));
    if (!randCode.equalsIgnoreCase(String.valueOf(session.getAttribute("randCode")))) {
        session.removeAttribute("randCode");
        System.out.println("验证码校验失败，不一致==========");
        return RestResult.error(ResultEnum.INCORRECT_RANDCODE);
    }    
}

至此功能实现。