用法,在后台生成验证码图片,将图片内容存入用户session,通过用户输入校验输入内容与session中的验证码比对进行比较。
1.工具类
package com.caissa.paygateway.common.util;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.awt.image.RenderedImage;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
import javax.imageio.ImageIO;
/**
* 生成验证码工具类
* @author wanghuan04
*/
public class CodeUtil {
private static int width = 90;// 定义图片的width
private static int height = 20;// 定义图片的height
private static int codeCount = 4;// 定义图片上显示验证码的个数
private static int xx = 15;
private static int fontHeight = 18;
private static int codeY = 16;
private static char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
/**
* 生成一个map集合
* code为生成的验证码
* codePic为生成的验证码BufferedImage对象
* @return
*/
public static Map<String,Object> generateCodeAndPic() {
// 定义图像buffer
BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// Graphics2D gd = buffImg.createGraphics();
// Graphics2D gd = (Graphics2D) buffImg.getGraphics();
Graphics gd = buffImg.getGraphics();
// 创建一个随机数生成器类
Random random = new Random();
// 将图像填充为白色
gd.setColor(Color.WHITE);
gd.fillRect(0, 0, width, height);
// 创建字体,字体的大小应该根据图片的高度来定。
Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
// 设置字体。
gd.setFont(font);
// 画边框。
gd.setColor(Color.BLACK);
gd.drawRect(0, 0, width - 1, height - 1);
// 随机产生40条干扰线,使图象中的认证码不易被其它程序探测到。
gd.setColor(Color.BLACK);
for (int i = 0; i < 15; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
gd.drawLine(x, y, x + xl, y + yl);
}
// randomCode用于保存随机产生的验证码,以便用户登录后进行验证。
StringBuffer randomCode = new StringBuffer();
int red = 0;
// 设置三原色 int green = 0;
// 设置三原色 int blue = 0;
// 随机产生codeCount数字的验证码。
for (int i = 0; i < codeCount; i++) {
// 得到随机产生的验证码数字。
String code = String.valueOf(codeSequence[random.nextInt(36)]);
// 产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。
red = random.nextInt(255);
// 设置三原色 green = random.nextInt(255);
// 设置三原色 blue = random.nextInt(255);
// 用随机产生的颜色将验证码绘制到图像中。
// 设置三原色 gd.setColor(new Color(red ,green, blue));
gd.setColor(new Color(red));
gd.drawString(code, (i + 1) * xx, codeY);
// 将产生的四个随机数组合在一起。
randomCode.append(code);
}
Map<String,Object> map =new HashMap<String,Object>();
//存放验证码
map.put("code", randomCode);
//存放生成的验证码BufferedImage对象
map.put("codePic", buffImg);
return map;
}
public static void main(String[] args) throws Exception {
//创建文件输出流对象
OutputStream out = new FileOutputStream("D://img/"+System.currentTimeMillis()+".jpg");
Map<String,Object> map = CodeUtil.generateCodeAndPic();
ImageIO.write((RenderedImage) map.get("codePic"), "jpeg", out);
System.out.println("验证码的值为:"+map.get("code"));
}
}
2.生成验证码和校验验证码的action
package com.caissa.paygateway.web.action.consume;
import java.awt.image.RenderedImage;
import java.io.IOException;
import java.util.Map;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.caissa.paygateway.common.util.CodeUtil;
import com.caissa.paygateway.web.action.BaseAction;
@Controller
@RequestMapping("/yzm_code")
public class YZMConsumeAction extends BaseAction {
/**
* 日志
*/
private static final Logger log = LoggerFactory.getLogger(YZMConsumeAction.class);
/**
* 前台请求得到验证码
*
* @param request
* @param response
* @throws Exception
*/
@RequestMapping("/getCode")
public void getCode(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 调用工具类生成的验证码和验证码图片
Map<String, Object> codeMap = CodeUtil.generateCodeAndPic();
// 将四位数字的验证码保存到Session中。
HttpSession session = request.getSession();
session.setAttribute("yzm_code", codeMap.get("code").toString());
// 禁止图像缓存。
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", -1);
response.setContentType("image/jpeg");
// 将图像输出到Servlet输出流中。
ServletOutputStream sos;
try {
sos = response.getOutputStream();
ImageIO.write((RenderedImage) codeMap.get("codePic"), "jpeg", sos);
sos.close();
log.info("生成二维码成功:code:"+codeMap.get("code").toString());
} catch (IOException e) {
log.info("生成验证码失败");
e.printStackTrace();
}
}
/**
* 后台请求验证验证码是否正确
*
* @param request
* @param response
* @throws Exception
*/
@RequestMapping("/checkCode")
public void checkCode(HttpServletRequest request, HttpServletResponse response) throws Exception {
String code_request = request.getParameter("yzm_code_request");
// 验证验证码
String sessionYZMCode = request.getSession().getAttribute("yzm_code").toString();
if (code_request != null && !"".equals(code_request) && sessionYZMCode != null && !"".equals(sessionYZMCode)) {
if (code_request.equalsIgnoreCase(sessionYZMCode)) {
response.getWriter().println("1");
} else {
response.getWriter().println("0");
}
} else {
response.getWriter().println("0");
}
}
}
3.校验验证码的js
/**
* 验证码控制JS
*/
var Yzm_Code = {
/**
* 创建验证码
*/
createCode : function(){
var imgSrc = $("#yzm_code");
var src = imgSrc.attr("src");
imgSrc.attr("src", Yzm_Code.changeYzmUrl(src));
},
/**
* 更新时间搓,切换图片
* @returns {返回验证内容}
*/
changeYzmUrl : function(url){
var timestamp = (new Date()).valueOf();
url = url.substring(0, 20);
if ((url.indexOf("&") >= 0)) {
url = url + "×tamp=" + timestamp;
} else {
url = url + "?timestamp=" + timestamp;
}
return url;
},
/**
* 检查验证码输入是否正确
* @return flag 验证成功或失败
*/
checkYZMCode : function(){
var flag = false;
var cardyzm = $("#cardyzm").val();
$.ajax({
url: "yzm_code/checkCode.do",
data:{
yzm_code_request : cardyzm,
},
async: false,
dataType: "json",
success: function (data) {
if(data=='1'){
$('.yzm_box .notes').html("");
flag = true;
}else{
$('.yzm_box .notes').html("* 验证码错误,请重新输入!");
}
}
});
return flag;
},
}
// 验证码标签光标消失事件
$('.yzm_box').focusout(function() {
var cardyzm = $('input[name="cardyzm"]').val();
if(!$.trim(cardyzm)){
$('.yzm_box .notes').text("* 请输入验证码");
}else{
// 验证验证码
var checkYZMCodeFlag = Yzm_Code.checkYZMCode();
if(!checkYZMCodeFlag){
Yzm_Code.createCode();
}
}
});
4.页面展示标签
<ul><li class="yzm_box"><p class="top_inp"><input type="text" placeholder="请输入图片中的字符 " id="cardyzm" name="cardyzm" /><img id="yzm_code" class="nocode" alt="验证码" src="yzm_code/getCode.do"></p><p class="notes"></p></li></ul>