在用户登录的时候,除了要输入用户名和密码,有时候还需要输入验证码进行验证,如下:
现在一般用短信验证码比较多,但是图形验证码也有使用。记录一下图形验证码的使用过程。
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();//设置透明度为0g2d.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"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><div><input type="text" placeholder="输入验证码"/><div>验证码<img src="./person/getCpacha?len=4&width=100&height=30&type=loginCpacha"id="cpacha_img" οnclick="changeCpacha()" title="点击更换验证码"style= "width:110px;height:30px;cursor:pointer;" /></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>
启动测试:
点击验证码图片:
再点击:
可以刷新,没问题。