图形验证码的使用

在用户登录的时候，除了要输入用户名和密码，有时候还需要输入验证码进行验证，如下：

现在一般用短信验证码比较多，但是图形验证码也有使用。记录一下图形验证码的使用过程。

1、验证码生成器

先定义一个验证码的生成器，会用到awt，可以在网上找，有很多。如下：

/**
 * 验证码生成器
 * 
 */
public class CpachaUtil {
	
	/**
	 * 验证码来源
	 */
	final private char[] code = {
		'2', '3', '4', '5', '6', '7', '8', '9',
		'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
		'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 
		'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F',
		'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R',
		'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
	};
	
	/**
	 * 字体
	 */
	final private String[] fontNames = new String[]{
			"黑体", "宋体", "Courier", "Arial", 
			"Verdana", "Times", "Tahoma", "Georgia"};
	
	/**
	 * 字体样式
	 */
	final private int[] fontStyles = new int[]{
			Font.BOLD, Font.ITALIC|Font.BOLD
	};
	
	/**
	 * 验证码长度
	 * 默认4个字符
	 */
	private int vcodeLen = 4;
	
	/**
	 * 验证码图片字体大小
	 * 默认17
	 */
	private int fontsize = 21;
	
	/**
	 * 验证码图片宽度
	 */
	private int width = (fontsize+1)*vcodeLen+10;
	
	/**
	 * 验证码图片高度
	 */
	private int height = fontsize+12;
	
	/**
	 * 干扰线条数
	 * 默认3条
	 */
	private int disturbline = 3;
	
	
	public CpachaUtil(){}
	
	/**
	 * 指定验证码长度
	 * @param vcodeLen 验证码长度
	 */
	public CpachaUtil(int vcodeLen) {
		this.vcodeLen = vcodeLen;
		this.width = (fontsize+1)*vcodeLen+10;
	}
	
	/**
	 * 指定验证码长度、图片宽度、高度
	 * @param vcodeLen
	 * @param width
	 * @param height
	 */
	public CpachaUtil(int vcodeLen,int width,int height) {
		this.vcodeLen = vcodeLen;
		this.width = width;
		this.height = height;
	}
	
	/**
	 * 生成验证码图片
	 * @param vcode 要画的验证码
	 * @param drawline 是否画干扰线
	 * @return
	 */
	public BufferedImage generatorVCodeImage(String vcode, boolean drawline){
		//创建验证码图片
		BufferedImage vcodeImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		Graphics g = vcodeImage.getGraphics();
		//填充背景色
		g.setColor(new Color(246, 240, 250));
		g.fillRect(0, 0, width, height);
		if(drawline){
			drawDisturbLine(g);
		}
		//用于生成伪随机数
		Random ran = new Random();
		//在图片上画验证码
		for(int i = 0;i < vcode.length();i++){
			//设置字体
			g.setFont(new Font(fontNames[ran.nextInt(fontNames.length)], fontStyles[ran.nextInt(fontStyles.length)], fontsize));
			//随机生成颜色
			g.setColor(getRandomColor());
			//画验证码
			g.drawString(vcode.charAt(i)+"", i*fontsize+10, fontsize+5);
		}
		//释放此图形的上下文以及它使用的所有系统资源
		g.dispose();
		
		return vcodeImage;
	}
	
	/**
	 * 获得旋转字体的验证码图片
	 * @param vcode
	 * @param drawline 是否画干扰线
	 * @return
	 */
	public BufferedImage generatorRotateVCodeImage(String vcode, boolean drawline){
		//创建验证码图片
		BufferedImage rotateVcodeImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		Graphics2D g2d = rotateVcodeImage.createGraphics();
		//填充背景色
		g2d.setColor(new Color(246, 240, 250));
		g2d.fillRect(0, 0, width, height);
		if(drawline){
			drawDisturbLine(g2d);
		}
		//在图片上画验证码
		for(int i = 0;i < vcode.length();i++){
			BufferedImage rotateImage = getRotateImage(vcode.charAt(i));
			g2d.drawImage(rotateImage, null, (int) (this.height * 0.7) * i, 0);
		}
		g2d.dispose();
		return rotateVcodeImage;
	}
	
	/**
	 * 生成验证码
	 * @return 验证码
	 */
	public String generatorVCode(){
		int len = code.length;
		Random ran = new Random();
		StringBuffer sb = new StringBuffer();
		for(int i = 0;i < vcodeLen;i++){
			int index = ran.nextInt(len);
			sb.append(code[index]);
		}
		return sb.toString();
	}
	
	/**
	 * 为验证码图片画一些干扰线
	 * @param g 
	 */
	private void drawDisturbLine(Graphics g){
		Random ran = new Random();
		for(int i = 0;i < disturbline;i++){
			int x1 = ran.nextInt(width);
			int y1 = ran.nextInt(height);
			int x2 = ran.nextInt(width);
			int y2 = ran.nextInt(height);
			g.setColor(getRandomColor());
			//画干扰线
			g.drawLine(x1, y1, x2, y2);
		}
	}
	
	/**
	 * 获取一张旋转的图片
	 * @param c 要画的字符
	 * @return
	 */
	private BufferedImage getRotateImage(char c){
		BufferedImage rotateImage = new BufferedImage(height, height, BufferedImage.TYPE_INT_ARGB);
		Graphics2D g2d = rotateImage.createGraphics();
		//设置透明度为0
		g2d.setColor(new Color(255, 255, 255, 0));
		g2d.fillRect(0, 0, height, height);
		Random ran = new Random();
		g2d.setFont(new Font(fontNames[ran.nextInt(fontNames.length)], fontStyles[ran.nextInt(fontStyles.length)], fontsize));
		g2d.setColor(getRandomColor());
		double theta = getTheta();
		//旋转图片
		g2d.rotate(theta, height/2, height/2);
		g2d.drawString(Character.toString(c), (height-fontsize)/2, fontsize+5);
		g2d.dispose();
		
		return rotateImage;
	}
	
	/**
	 * @return 返回一个随机颜色
	 */
	private Color getRandomColor(){
		Random ran = new Random();
		return new Color(ran.nextInt(220), ran.nextInt(220), ran.nextInt(220)); 
	}
	
	/**
	 * @return 角度
	 */
	private double getTheta(){
		return ((int) (Math.random()*1000) % 2 == 0 ? -1 : 1)*Math.random();
	}

	/**
	 * @return 验证码字符个数
	 */
	public int getVcodeLen() {
		return vcodeLen;
	}
	
	/**
	 * 设置验证码字符个数
	 * @param vcodeLen
	 */
	public void setVcodeLen(int vcodeLen) {
		this.width = (fontsize+3)*vcodeLen+10;
		this.vcodeLen = vcodeLen;
	}
	
	/**
	 * @return 字体大小
	 */
	public int getFontsize() {
		return fontsize;
	}
	
	/**
	 * 设置字体大小
	 * @param fontsize
	 */
	public void setFontsize(int fontsize) {
		this.width = (fontsize+3)*vcodeLen+10;
		this.height = fontsize+15;
		this.fontsize = fontsize;
	}
	
	/**
	 * @return 图片宽度
	 */
	public int getWidth() {
		return width;
	}
	
	/**
	 * 设置图片宽度
	 * @param width
	 */
	public void setWidth(int width) {
		this.width = width;
	}
	
	/**
	 * @return 图片高度
	 */
	public int getHeight() {
		return height;
	}
	
	/**
	 * 设置图片高度
	 * @param height 
	 */
	public void setHeight(int height) {
		this.height = height;
	}
	
	/**
	 * @return 干扰线条数
	 */
	public int getDisturbline() {
		return disturbline;
	}
	
	/**
	 * 设置干扰线条数
	 * @param disturbline
	 */
	public void setDisturbline(int disturbline) {
		this.disturbline = disturbline;
	}
	
}

2、控制器

控制器中需要写一个方法，来使用验证码生成器生成验证码，并且以图片流的形式写到响应对象中返回给页面。如下：

    /**
     * codeLen 验证码长度
     * width 图片宽度
     * height 图片高度
     * cpachaType 相当于一个key，存到session中验证码的key
     */
    // 生成验证码
    @GetMapping("/getCpacha")
    public void getCpacha(
            @RequestParam(name = "len",required = false,defaultValue = "4") Integer codeLen,
            @RequestParam(name = "width",required = false,defaultValue = "100") Integer width,
            @RequestParam(name = "height",required = false,defaultValue = "30") Integer height,
            @RequestParam(name = "type",required = true,defaultValue = "loginCpacha") String cpachaType,
            HttpServletRequest request,HttpServletResponse response) {
        // 获取工具类对象
        CpachaUtil caCpachaUtil = new CpachaUtil(codeLen, width, height);
        // 生成验证码字符串
        String code = caCpachaUtil.generatorVCode();
        // 获取Session对
        HttpSession httpSession = request.getSession();
        // 存进session域中
        httpSession.setAttribute(cpachaType, code);
        // 获得旋转字体的验证码图片
        BufferedImage bufferedImage = caCpachaUtil.generatorRotateVCodeImage(code, true);
        try {
            // 以图片流的形式写到响应对象中
            ImageIO.write(bufferedImage, "gif", response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
        
    }

启动应用，然后测试：

OK，成功返回验证码图片到浏览器。

3、点击刷新验证码

有时候由于干扰线的问题，可能使用户看不清图片中的验证码内容，这时用户往往会重新刷新验证码图片，即重新生成一个图形验证码，然后看不清再刷新，直到认清为止。因此图形验证码往往会伴随着刷新功能。

页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
    <div>
        <input type="text" placeholder="输入验证码"/>
        <div>
                      验证码
        
        div>
    div>
<script type="text/javascript">
   function changeCpacha(){
	   // 获取一个时间戳
	   var date = new Date().getTime();
	   // 给img元素重新赋值属性src，即重新请求验证码
	   var img = document.getElementById("cpacha_img");
	   // 因为时间戳一直在变，带上时间戳每次请求带的时间戳参数都会不一样，保证每次生成的验证码内容不一样
	   // 如果不带t这个参数，那么可能每次验证码的内容都会一样
	   img.src = "./person/getCpacha?len=4&width=100&height=30&type=loginCpacha&t="+date;
   }
script>
body>
html>

启动测试：

点击验证码图片：

再点击：

可以刷新，没问题。