网页注册验证码的使用说明

关于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，遮挡线和点也是有的，也防止了别人通过特殊方式获得验证码。