关于java通过前后台方式验证验证码图片问题
验证码问题我也是第一次做,遇到了不会的就百度百度,自己的理解能力比较差,或者说没有很好的理解HTML中的标签使用方式。本篇文章就-“网页注册码”-的前端后台如何使用做一个比较完整的总结。
OK废话不多说,使用的win7x64系统,谷歌浏览器(其他浏览器暂未测试),jdk为1.6,本篇用的都比较老哈,没有用到什么php和asp,不要喷我哦,大家可以和谐的交流交流嘛,不过大体的方式和思路是一样。
下面先撸代码:
package com.staterich.znkt.utils; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.util.Arrays; import java.util.Random; import javax.imageio.ImageIO; public class VerifyCodeUtils { // 使用到Algerian字体,系统里没有的话需要安装字体,字体只显示大写,去掉了1,0,i,o几个容易混淆的字符 public static final String VERIFY_CODES = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ"; private static Random random = new Random(); /** * 使用系统默认字符源生成验证码 * * @param verifySize * 验证码长度 * @return */ public static String generateVerifyCode(int verifySize) { return generateVerifyCode(verifySize, VERIFY_CODES); } /** * 使用指定源生成验证码 * * @param verifySize * 验证码长度 * @param sources * 验证码字符源 * @return */ public static String generateVerifyCode(int verifySize, String sources) { if (sources == null || sources.length() == 0) { sources = VERIFY_CODES; } int codesLen = sources.length(); Random rand = new Random(System.currentTimeMillis()); StringBuilder verifyCode = new StringBuilder(verifySize); for (int i = 0; i < verifySize; i++) { verifyCode.append(sources.charAt(rand.nextInt(codesLen - 1))); } return verifyCode.toString(); } /** * 生成随机验证码文件,并返回验证码值 * * @param w * @param h * @param outputFile * @param verifySize * @return * @throws IOException */ public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException { String verifyCode = generateVerifyCode(verifySize); outputImage(w, h, outputFile, verifyCode); return verifyCode; } /** * 输出随机验证码图片流,并返回验证码值 * * @param w * @param h * @param os * @param verifySize * @return * @throws IOException */ public static String outputVerifyImage(int w, int h, OutputStream os, int verifySize) throws IOException { String verifyCode = generateVerifyCode(verifySize); outputImage(w, h, os, verifyCode); return verifyCode; } /** * 生成指定验证码图像文件 * * @param w * @param h * @param outputFile * @param code * @throws IOException */ public static void outputImage(int w, int h, File outputFile, String code) throws IOException { if (outputFile == null) { return; } File dir = outputFile.getParentFile(); if (!dir.exists()) { dir.mkdirs(); } try { outputFile.createNewFile(); FileOutputStream fos = new FileOutputStream(outputFile); outputImage(w, h, fos, code); fos.close(); } catch(IOException e) { throw e; } } /** * 输出指定验证码图片流 * * @param w * @param h * @param os * @param code * @throws IOException */ public static void outputImage(int w, int h, OutputStream os, String code) throws IOException { int verifySize = code.length(); BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Random rand = new Random(); Graphics2D g2 = image.createGraphics(); g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); Color[] colors = new Color[5]; Color[] colorSpaces = new Color[] { Color.WHITE, Color.CYAN, Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.YELLOW }; float[] fractions = new float[colors.length]; for (int i = 0; i < colors.length; i++) { colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)]; fractions[i] = rand.nextFloat(); } Arrays.sort(fractions); g2.setColor(Color.GRAY);// 设置边框色 g2.fillRect(0, 0, w, h); Color c = getRandColor(200, 250); g2.setColor(c);// 设置背景色 g2.fillRect(0, 2, w, h - 4); // 绘制干扰线 Random random = new Random(); g2.setColor(getRandColor(160, 200));// 设置线条的颜色 for (int i = 0; i < 20; i++) { int x = random.nextInt(w - 1); int y = random.nextInt(h - 1); int xl = random.nextInt(6) + 1; int yl = random.nextInt(12) + 1; g2.drawLine(x, y, x + xl + 40, y + yl + 20); } // 添加噪点 float yawpRate = 0.05f;// 噪声率 int area = (int) (yawpRate * w * h); for (int i = 0; i < area; i++) { int x = random.nextInt(w); int y = random.nextInt(h); int rgb = getRandomIntColor(); image.setRGB(x, y, rgb); } shear(g2, w, h, c);// 使图片扭曲 g2.setColor(getRandColor(100, 160)); int fontSize = h - 4; Font font = new Font("Algerian", Font.ITALIC, fontSize); g2.setFont(font); char[] chars = code.toCharArray(); for (int i = 0; i < verifySize; i++) { AffineTransform affine = new AffineTransform(); affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1), (w / verifySize) * i + fontSize / 2, h / 2); g2.setTransform(affine); g2.drawChars(chars, i, 1, ((w - 10) / verifySize) * i + 5, h / 2 + fontSize / 2 - 10); } g2.dispose(); ImageIO.write(image, "jpg", os); os.flush(); os.close(); os=null; } private static Color getRandColor(int fc, int bc) { if (fc > 255) fc = 255; if (bc > 255) bc = 255; int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); } private static int getRandomIntColor() { int[] rgb = getRandomRgb(); int color = 0; for (int c : rgb) { color = color << 8; color = color | c; } return color; } private static int[] getRandomRgb() { int[] rgb = new int[3]; for (int i = 0; i < 3; i++) { rgb[i] = random.nextInt(255); } return rgb; } private static void shear(Graphics g, int w1, int h1, Color color) { shearX(g, w1, h1, color); shearY(g, w1, h1, color); } private static void shearX(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(2); boolean borderGap = true; int frames = 1; int phase = random.nextInt(2); for (int i = 0; i < h1; i++) { double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames); g.copyArea(0, i, w1, 1, (int) d, 0); if (borderGap) { g.setColor(color); g.drawLine((int) d, i, 0, i); g.drawLine((int) d + w1, i, w1, i); } } } private static void shearY(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(40) + 10; // 50; boolean borderGap = true; int frames = 20; int phase = 7; for (int i = 0; i < w1; i++) { double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames); g.copyArea(i, 0, 1, h1, 0, (int) d); if (borderGap) { g.setColor(color); g.drawLine(i, (int) d, i, 0); g.drawLine(i, (int) d + h1, i, h1); } } } //此处的main也可以直接使用,在本地生成一些验证码图片 //public static void main(String[] args) throws IOException // { // File dir = new File("E:/verifies"); // int w = 200, h = 80; // for (int i = 0; i < 50; i++) // { // String verifyCode = generateVerifyCode(4); // File file = new File(dir, verifyCode + ".jpg"); // outputImage(w, h, file, verifyCode); // } // } }
这一段代码是一个调用:
package com.staterich.znkt.utils; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; public class AuthImage extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet { static final long serialVersionUID = 1L; public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setHeader("Pragma", "No-cache");//不缓存参数 response.setHeader("Cache-Control", "no-cache");//不缓存 response.setDateHeader("Expires", 0); response.setContentType("image/jpeg"); //生成随机字串小写 String verifyCode = VerifyCodeUtils.generateVerifyCode(4); //存入会话session HttpSession session = request.getSession(); session.setAttribute("rand", verifyCode.toLowerCase()); //生成图片 int w = 120, h = 30;//设置图片大小 VerifyCodeUtils.outputImage(w, h, response.getOutputStream(), verifyCode); } }
以上代码呢就是JAVA部分的代码。但是后台还有一部分要修改。
1、就是怎么调用?
调用不同于Action的方式,不需要经过经过struts,而是通过servlet方式。方式如下:
修改/WEB-INF/下的web.xml
<!-- 显示验证码--> <servlet> <servlet-name>AuthImage</servlet-name> <servlet-class>com.staterich.znkt.utils.AuthImage</servlet-class> </servlet> <servlet-mapping> <servlet-name>AuthImage</servlet-name> <url-pattern>/authImage</url-pattern> </servlet-mapping>
第一个<servlet></servlet>中的内容配置了servlet的名,同时指定了是哪一个类。
<servlet-mapping> <servlet-name>AuthImage</servlet-name> <url-pattern>/authImage</url-pattern> </servlet-mapping>
第二个<servlet-mapping></servlet-mapping>中的内容规定了映射关系,通过url的方式如何调用上面定义的AuthImage的servlet。/authImage就是web访问的路径,可以修改,但是修改过后,调用的地方也要做相应的修改详细的方式在下面介绍。
OK,此时感觉一切就绪,可以通过URL的方式来验证下到底能不能在WEB显示图片。方式是这样:
在谷歌浏览器中输入:
http://IP:Port/projectName/authImage
即可。
OK,回车。发现出错了。
Could not find action or result
/projectName/authImage
There is no Action mapped for namespace [/] and action name [authImage] associated with context path [/projectName].
这个异常呢就是说你没有配置过“authImage”这个Action,很眼熟对不对,可上面也说到了不同于Aciton的servlet方式。其实这个问题出现的原因还是因为web.xml配置中的过滤器设置。开始的过滤规则如下web.xml:
<filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter </filter-class> <init-param> <param-name>actionPackages</param-name> <param-value>com.mycompany.myapp.actions</param-value> </init-param> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*</url-pattern> </filter-mapping>
原因是<filter-mapping></filter-mapping>中的内容为*。意思是不管是什么都被默认为是aciton,所以都被Spring认为是action从而去struts的配置中取找这个action。没找到所以出这个异常。在不影响项目其他功能的情况下!!这个很重要,因为项目中说不定会影响一些第三方的,或者自己写action的方式。解决方式:
将*改为*.aciton
<filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> <init-param> <param-name>actionPackages</param-name> <param-value>com.mycompany.myapp.actions</param-value> </init-param> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.action</url-pattern> </filter-mapping>
这样就可以使用servlet了。但是我也说了会影响你之前的aciton。因为本人的项目中调用action的时候都是通过*****.action的方式,所以没有什么影响。这个时候就需要将你所有的调用action的地方通通改为****.action。比如js中的:
document.location = "*.action?account="+loginID+"&password="+loginPWD;
还有form表中的
<form id="formid" method = 'post' action = '*.action' >
由于本人菜鸟一枚,所以也不知道如何有更好的方式实现。找到方法了总比没有的强!
OK,又一次准备就绪了。再次在浏览器输入地址。图片出来了。但是就只有图片在左上角,很尴尬啊有木有!别人的那玩意儿都是在input的text的后面啊有木有。那怎么把这个放在自己想要的位置呢?这个问题困我了半天。主要也没理解过html中的img标签的作用。
这里就要说明如何在JSP中使用了,方式如下:
<td>验证码:</td>
<td>
<input type="text" id="userCode" style="width: 160px;height: 30px;" value="">
<img id="authImage" src="authImage" style="cursor: pointer;" alt="Click here to refresh" onClick="this.src='authImage?s='+Math.random()">
</td>
这里的src=“authImage”就默认的去调用了一次servlet。一开始我写的是src=“/authImage”,还是会出现异常,所以就把前面的/给删掉了。这个很明显是路径问题。不必在意,多尝试几次就能对了。这里的authImage就是上述<servlet-mapping></servlet-mapping>中url-pattern的内容。不要用错了就好。。。
alt是指如果图片缺省的情况显示“Click here to refresh”的字样。
OK,这样也终于把问题都解决了。由于在java后台中
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
设置过缓存,应该不会出现相同图片的情况,出现相同图片说明是因为浏览器的缓存机制看你调用了同一个Action或者url地址。默认把缓存中的内容读出来,而不是再次获取。如果出现了图片重复的情况,那么久考虑在action的后面加一个时间参数。 onclick就给出了一个方式
onClick="this.src='authImage?s='+Math.random()"
onclick就用以看不清图片时,更新图片。
out = super.getResponse().getWriter();
再次OK,你懂的因为还有问题。图片出来了,验证码也存在了session中,拉模怎么比较呢?
我用的生成验证码图片中的字码都是大写的字母与数字的组合。而一般情况下是不区分大小写的,这里只是为了显示让人能看清楚大写比较容易辨认。那么用户所填验证码在表单提交后,交给后台action,比较如下:
//从前台获取的用户输入的验证码,可大写可小写
String userCode = getRequest().getParameter("userCode");
//从session中获取系统产生的验证码,这里均小写。
String sysCode = (String)super.getRequest().getSession().getAttribute(
"rand");
//比较方式
if (userCode.toLowerCase().equals(sysCode)){}
//userCode.toLowerCase()这个方法是将userCode全部转为小写
比较过后的处理逻辑就很清楚了,如果正确就通过注册。如果不正确就返回给前台一个标识,意味着验证码输入错误然后再次获取一次验证码。这里我用的是ajax的方式提交的表单中的内容。在后台会给出一个
out = super.getResponse().getWriter();
out.print("err");
的字符给前台。前台web接收后:
success: function(data){ if(data == "success"){ alert("注册成功!"); } else if(data=="err"){ alert("验证码错误!"); var verify=document.getElementById('authImage');//获取img元素 verify.setAttribute("src","authImage?"+Math.random()); } else { alert("账号已存在或出现未知错误!"); } }
判断data的内容,如果错误的话就通过js的方式刷新一次图片,方式如下:
var verify=document.getElementById('authImage');
verify.setAttribute("src","authImage?"+Math.random());
当然这个我也万万没想到是这样做的。。。。。
OK,这样之后所有的问题都解决了。结果显示的也很好。因为java的后台代码样式很不错,不是很挫的那种。
最终显示如下:
很明显验证码是GXEQ,遮挡线和点也是有的,也防止了别人通过特殊方式获得验证码。