验证码现在无处不在，比如最常见的字母数字验证码，12306的图形验证码，简书的滑动验证码，还有一些论坛的计算验证码，百度的中文汉字验证码等等，非常多。验证码出现的原因就是降低人的无操作性，让人来再次确认要做的事情，比如注册时，需要发短信，但是发短信是有成本的，就需要先输入验证码，验证码没问题后才能点击发送短信。
为什么会有这么多种类的验证码呢，目的就是防止机器来识别这些验证码，确保是人来操作的。现在简单的字母数字验证码很容易被破解，由机器简单的模糊识别就能获取对应的值。12306的验证码主要是组合太多，而且图片又太模糊，由人来识别还很困难，机器识别也比较困难。简书的滑动验证很高级，以后可以尝试做一下。
这一节还是从最简单的入手，讲讲字母数字验证码的实现。验证码的原理就是在服务端生成数字加字母的图片，图片以流的方式传送到web端。同时验证码在服务端用session或其他缓存工具存储起来。
整个工程依赖SpringMVC进行展示，便于后续用到的时候可以手到擒来。
添加依赖SpringMVC相关依赖
随机数生成工具RandomCodeUtil.java
public class RandomCodeUtil {
private static final char[] codeSequenceRandom = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4',
'5', '6', '7', '8', '9', '0' };
private static final char[] numberSequenceRandom = { '1', '2', '3', '4', '5', '6', '7', '8', '9', '0' };
/**
*
* 功能描述:生成字符串随机数
*
* @return String
* @version 1.0.0
* @author 孔垂云
*/
public static String createRandomCode(int count) {
String serialNum = "";
Random random = new Random();
for (int i = 0; i < count; i++) {
String strRand = String.valueOf(codeSequenceRandom[random.nextInt(codeSequenceRandom.length)]);
serialNum += strRand;
}
return serialNum;
}
/**
* 生成数字随机数
* @param count
* @return
*/
public static String createRandomNum(int count) {
String serialNum = "";
Random random = new Random();
for (int i = 0; i < count; i++) {
String strRand = String.valueOf(numberSequenceRandom[random.nextInt(numberSequenceRandom.length)]);
serialNum += strRand;
}
return serialNum;
}
}
这个工具类可以好好看看，可以简单生成纯数字的随机数和数字加字母的随机数。
验证码工具类VerifyCodeUtil
/**
* 验证码工具类
*/
public class VerifyCodeUtil {
// 图片的宽度。
private int width = 120;
// 图片的高度。
private int height = 40;
// 验证码字符个数
private int codeCount = 5;
// 验证码干扰线数
private int lineCount = 150;
// 验证码
private String code = null;
// 验证码图片Buffer
private BufferedImage buffImg = null;
public VerifyCodeUtil(String randomCode) {
this.createCode(randomCode);
}
/**
* @param width 图片宽
* @param height 图片高
* @param randomCode 随机数
*/
public VerifyCodeUtil(int width, int height, String randomCode) {
this.width = width;
this.height = height;
this.createCode(randomCode);
}
/**
* @param width 图片宽
* @param height 图片高
* @param codeCount 字符个数
* @param lineCount 干扰线条数
* @param randomCode 随机数
*/
public VerifyCodeUtil(int width, int height, int codeCount, int lineCount, String randomCode) {
this.width = width;
this.height = height;
this.codeCount = codeCount;
this.lineCount = lineCount;
this.createCode(randomCode);
}
public void createCode(String randomCode) {
int x = 0, fontHeight = 0, codeY = 0;
int red = 0, green = 0, blue = 0;
x = width / (codeCount + 2);//每个字符的宽度
fontHeight = height - 2;//字体的高度
codeY = height - 4;
// 图像buffer
buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
// 生成随机数
Random random = new Random();
// 将图像填充为白色
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height);
// 创建字体
ImgFontByte imgFont = new ImgFontByte();
Font font = imgFont.getFont(fontHeight);
g.setFont(font);
for (int i = 0; i < lineCount; i++) {
int xs = random.nextInt(width);
int ys = random.nextInt(height);
int xe = xs + random.nextInt(width / 8);
int ye = ys + random.nextInt(height / 8);
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
g.setColor(new Color(red, green, blue));
g.drawLine(xs, ys, xe, ye);
}
// randomCode记录随机产生的验证码
// StringBuffer randomCode = new StringBuffer();
// 随机产生codeCount个字符的验证码。
for (int i = 0; i < randomCode.length(); i++) {
String strRand = randomCode.substring(i, i + 1);
// 产生随机的颜色值，让输出的每个字符的颜色值都将不同。
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
g.setColor(new Color(red, green, blue));
g.drawString(strRand, (i + 1) * x, codeY);
// 将产生的四个随机数组合在一起。
}
}
public void write(String path) throws IOException {
OutputStream sos = new FileOutputStream(path);
this.write(sos);
}
public void write(OutputStream sos) throws IOException {
ImageIO.write(buffImg, "png", sos);
sos.close();
}
public BufferedImage getBuffImg() {
return buffImg;
}
public String getCode() {
return code;
}
}
这个工具类可以很简单的根据传入的随机数生成对应的图片。而且可以对生成的图片进行模糊处理，比如变斜、加干扰线等，而且可以各个字母的颜色都不一样。
创建字体工具类ImgFontByte
public class ImgFontByte {
public Font getFont(int fontHeight) {
try {
Font baseFont = Font.createFont(Font.TRUETYPE_FONT, new ByteArrayInputStream(hex2byte(getFontByteStr())));
return baseFont.deriveFont(Font.PLAIN, fontHeight);
} catch (Exception e) {
return new Font("Arial", Font.PLAIN, fontHeight);
}
}
private byte[] hex2byte(String str) {
if (str == null)
return null;
str = str.trim();
int len = str.length();
if (len == 0 || len % 2 == 1)
return null;
byte[] b = new byte[len / 2];
try {
for (int i = 0; i < str.length(); i += 2) {
b[i / 2] = (byte) Integer.decode("0x" + str.substring(i, i + 2)).intValue();
}
return b;
} catch (Exception e) {
return null;
}
}
/**
* ttf字体文件的十六进制字符串
* @return
*/
private String getFontByteStr() {
return null;
}
}
这个工具类可以对验证码的字体做一些处理。
VerifyController.java
@Controller
public class VerifyController {
/**
* 进入界面
*
* @return
*/
@RequestMapping("/verify")
public ModelAndView verify() {
ModelAndView mv = new ModelAndView();
mv.setViewName("verify");
return mv;
}
/**
* 生成图形验证码
*
* @param request
* @param response
* @param username
* @throws Exception
*/
@RequestMapping(value = "/generateVerifyCode")
public void generateVerifyCode(HttpServletRequest request, HttpServletResponse response, String username) throws Exception {
String randomCode = RandomCodeUtil.createRandomNum(4);//生成四位随机数
response.setContentType("image/jpeg");
//禁止图像缓存。
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
VerifyCodeUtil vCode = new VerifyCodeUtil(120, 40, 4, 100, randomCode);
request.getSession().setAttribute("verifyCode", randomCode);//放入到session中
vCode.write(response.getOutputStream());
}
}
controller共包括两个方法，一个是进入界面，很简单，另一个是生成验证码的方法。首先生成随机数计，然后禁止图片缓存，把验证码加入session，最后直接以outputStream输出到前台。
页面verify.jsp
<input type="text" class="form-control" name="verifyCode" placeholder="验证码"
id="verifyCode" style="width: 180px;"/>
<img id="verifyCodeImg"
style="cursor: pointer;" src="" width="80" height="30" title=" 点击刷新" onclick="javascript:changeCode()">
<script type="text/javascript">
// 点击验证码图片
function changeCode() {
$('#verifyCodeImg').attr('src', "generateVerifyCode.htm?random=" + Math.random());
$("#verifyCode").val("")
}
$(function(){
changeCode();
})
</script>
这是对应jsp页面的所有代码，比较简单，真正的核心就一句话，设置图片的src为刚才那个生成验证码的controller地址，地址加上一个随机数random=" + Math.random())，防止缓存的。
这样一个最简单的验证码就做出来了。
验证码显示
当然验证码的技术是非常非常复杂的，这个对付一些小系统还是可以的。
网友评论