转载:http://blog.csdn.net/u010648555/article/details/52261050
Spring整合生成图片验证码。
前端代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/tag/tag.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${pageTitle}——Powered by TaoJie</title>
<link rel="stylesheet" href="${ctx}/static/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx}/static/bootstrap3/css/bootstrap-theme.min.css">
<link href="http://blog.java1234.com/favicon.ico" rel="SHORTCUT ICON">
<link rel="stylesheet" href="${ctx}/static/css/login.css">
<script src="${ctx}/static/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${ctx}/static/bootstrap3/js/bootstrap.min.js"></script>
<!-- 验证码 验证脚本 -->
<script type="text/javascript">
$(document).ready(function() {
flushValidateCode(); //进入页面就刷新生成验证码
});
/* 刷新生成验证码 */
function flushValidateCode() {
var validateImagObject = document.getElementById("codeValidateImg");
validateImagObject.src = "${ctx}/getLoginImageCode?time=" + new Date();//向服务器请求验证码
}
/* 校验验证码输入的是否正确 */
/* 参数code是输入的验证码的值 */
function checkImg(code) {
var url = "${ctx}/checkImgCode";
/* Ajax */
$.get(url, {"validateCode":code}, function(data) {
if(data == "ok") {
$('#validate_info').attr('class', 'glyphicon glyphicon-ok');
document.getElementById('loginForm').onsubmit = function() {return true;};//表单提交
} else {
$('#validate_info').attr('class', 'glyphicon glyphicon-remove');
flushValidateCode();//刷新验证码
document.getElementById('loginForm').onsubmit = function() {return false;};//禁止表单提交
}
});
}
</script>
</head>
<body>
<div class="login_back">
<!-- 登录表单 -->
<div class="login">
<div class="model_ct">
<div class="model_header">
<h3>用户登录</h3>
<span class="msg">${msg }</span>
</div>
<div class="model_form">
<form:form id="loginForm" action="${ctx }/user/login" method="post" commandName="loginForm">
<div class="txt-fld">
<label for="userName">用户名</label>
<input type="text" id="userName" name="userName" />
</div>
<div class="txt-fld">
<label for="password">密码</label>
<input type="password" id="password" name="password" />
</div>
<div class="txt-fld">
<label for="validateCode">验证码</label>
<input type="text" id="validateCode" class="float_lf lf_20" name="validateCode"
maxlength="4" οnblur="checkImg(this.value)" style="width:70px;" />
<img id="codeValidateImg" class="float_lf codeValidateImg" />
<a class="float_lf kan" href="javascript:flushValidateCode();">看不清</a>
<span id="validate_info"></span>
</div>
<div class="btn-fld">
<button class="submit" id="btnLogin">登 录 »</button>
</div>
</form:form>
<p><a class="float_lf" href="${ctx }/index">返回主页</a>还没有账号? <a href="${ctx }/user/register">点击注册</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
前端代码主要需要两部分:(1)验证码显示和填写的区域(2)刷新和验证的javascript脚本
后端生成验证码的工具类:
package com.tao.myBlogV3.core.util;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 生成验证码的工具类
* @author Tao
*
*/
public class RandomValidateCode {
private Random random = new Random();
private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机生成字符串的取值范围
private int width = 80; //图片宽度
private int height = 26; //图片高度
private int StringNum = 4; //验证码图片中随机产生字符的数量
private int lineSize = 40; //干扰线数量
/**
* 获取随机字符,并返回字符的String格式
* @param index (指定位置)
* @return
*/
public String getRandomChar(int index) {
//获取指定位置index的字符,并转换成字符串表示形式
return String.valueOf(randString.charAt(index));
}
/**
* 获得字体
* @return
*/
private Font getFont() {
return new Font("Fixedsys", Font.CENTER_BASELINE, 18); //名称、样式、磅值
}
/**
* 获得颜色
* @param fc
* @param bc
* @return
*/
private Color getRandColor(int frontColor, int backColor) {
if(frontColor > 255)
frontColor = 255;
if(backColor > 255)
backColor = 255;
int red = frontColor + random.nextInt(backColor - frontColor - 16);
int green = frontColor + random.nextInt(backColor - frontColor -14);
int blue = frontColor + random.nextInt(backColor - frontColor -18);
return new Color(red, green, blue);
}
/**
* 绘制字符串,返回绘制的字符串
* @param g
* @param randomString
* @param i
* @return
*/
private String drawString(Graphics g, String randomString, int i) {
g.setFont(getFont()); //设置字体
g.setColor(new Color(random.nextInt(101), random.nextInt(111), random.nextInt(121)));//设置颜色
String randChar = String.valueOf(getRandomChar(random.nextInt(randString.length())));
randomString += randChar; //组装
g.translate(random.nextInt(3), random.nextInt(3));
g.drawString(randChar, 13*i, 16);
return randomString;
}
/**
* 绘制干扰线
* @param g
*/
private void drawLine(Graphics g) {
//起点(x,y) 偏移量x1、y1
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(13);
int yl = random.nextInt(15);
g.drawLine(x, y, x + xl, y + yl);
}
/**
* 生成随机图片
* @param request
* @param response
* @param key
*/
public void getRandomCode(HttpServletRequest request, HttpServletResponse response, String key) {
// BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
Graphics g = image.getGraphics();// 获得BufferedImage对象的Graphics对象
g.fillRect(0, 0, width, height);//填充矩形
g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));//设置字体
g.setColor(getRandColor(110, 133));//设置颜色
//绘制干扰线
for(int i = 0; i <= lineSize; i++) {
drawLine(g);
}
//绘制字符
String randomString = "";
for(int i = 1; i <= StringNum; i++) {
randomString = drawString(g, randomString, i);
}
//将生成的验证码放入session
String sessionId = request.getSession().getId();//获取session的id
request.getSession().setAttribute(sessionId+key, randomString);
System.out.println("生成的验证码为:" + randomString);
g.dispose();//释放绘图资源
try {
ByteArrayOutputStream tmp = new ByteArrayOutputStream();
ImageIO.write(image, "png", tmp);//将会值得图片输出到流
tmp.close();
Integer contentLength = tmp.size();//内容长度
response.setHeader("content-length", contentLength+"");
response.getOutputStream().write(tmp.toByteArray());//通过response输出图片
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
response.getOutputStream().flush();
response.getOutputStream().close();
} catch (Exception e2) {
e2.printStackTrace();
}
}
}
}
package com.tao.myBlogV3.web.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.tao.myBlogV3.core.util.RandomValidateCode;
import com.tao.myBlogV3.core.util.StringUtil;
/**
* 负责生成图片的控制器
* @author Tao
*
*/
@Controller
@RequestMapping(value="/")
public class ImageGenerateController {
/* 验证码管理 */
//刷新(向服务器请求)生成验证码
@RequestMapping(value="/getLoginImageCode")
@ResponseBody
public String getLoginImageCode(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("image/jpeg");//设置响应类型,告知浏览器输出的是图片
response.setHeader("Pragma", "No-cache");//设置响应头信息,告诉浏览器不要缓存此内容
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Set-Cookie", "name=value; HttpOnly");//设置HttpOnly属性,防止Xss攻击
response.setDateHeader("Expire", 0);
RandomValidateCode randomValidateCode = new RandomValidateCode();
try {
randomValidateCode.getRandomCode(request, response, "imageCode");//生成图片并通过response输出
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
/**
* 验证码 验证
* @param request
* @param response
* @return
*/
@RequestMapping(value="/checkImgCode")
@ResponseBody
public String checkImgCode(HttpServletRequest request, HttpServletResponse response) {
//1:获取用户输入的验证码(字符串)
String inputValidateCode = request.getParameter("validateCode");
//2:获取用户session中存储的本次生成的验证码信息(字符串)
String sessionId = request.getSession().getId();
String validateCode = (String) request.getSession().getAttribute(sessionId+"imageCode");
//3:判断验证码是否输入的正确
if(!StringUtil.isBlank(inputValidateCode) && inputValidateCode.equalsIgnoreCase(validateCode)) {
//非空并且匹配上了
return "ok";
} else {
return "error";
}
}
}
主要使用的是Ajax请求。
还有一个生成验证码的工具 google开源工具 Kaptcha,有空的时候好好研究研究......