Java 验证码的实现

java 验证码的实现

1、绘制出一个随机验证码的Java类。

package com.utils;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.ArrayList;
import java.util.Random;

public class VerifyCode {

    private static ArrayList<Character> randString = new ArrayList<>();//随机产生的字符表

    static {//初始化验证码可选字符
        for (char i = 'a'; i <= 'z'; i++)
            randString.add(i);
        for (char i = 'A'; i <= 'Z'; i++)
            randString.add(i);
        for (char i = '0'; i <= '9'; i++)
            randString.add(i);
    }

    public static final String VERIFY_CODE_KEY = "VERIFY_CODE_KEY";//放到session中的key
    private static int width = 95;// 图片宽
    private static int height = 25;// 图片高
    private static int lineSize = 40;// 干扰线数量
    private static int stringNum = 4;// 随机产生字符数量


    private static Random random = new Random();


    /*
     * 获取随机字符
     */
    private static String getRandomString() {
        return String.valueOf(randString.get(random.nextInt(randString.size())));
    }


    /*
     * 获得字体
     */
    private static Font getFont() {
        return new java.awt.Font("Fixedsys", Font.BOLD, 20);
    }


    /*
     * 获得随机颜色
     */
    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 - 16);
        int g = fc + random.nextInt(bc - fc - 14);
        int b = fc + random.nextInt(bc - fc - 18);
        return new Color(r, g, b);
    }


    /**
     * 生成随机图片
     */
    public static void getVerifydcode(HttpServletRequest request,
                                   HttpServletResponse response) {
        HttpSession session = request.getSession();
        // BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
        Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
        g.fillRect(0, 0, width, height);
        g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
        g.setColor(getRandColor(110, 133));
        // 绘制干扰线
        for (int i = 0; i <= lineSize; i++) {
            drowLine(g);
        }
        // 绘制随机字符
        String randomString = "";
        for (int i = 1; i <= stringNum; i++) {
            randomString = drowString(g, randomString, i);
        }
        //将生成的随机字符串保存到session中，而jsp界面通过session.getAttribute("RANDOMCODEKEY")，
        //获得生成的验证码，然后跟用户输入的进行比较
        session.setAttribute(VERIFY_CODE_KEY, randomString);
        g.dispose();
        try {
            // 将内存中的图片通过流动形式输出到客户端
            ImageIO.write(image, "JPEG", response.getOutputStream());
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


    /*
     * 绘制字符串
     */
    private static String drowString(Graphics g, String randomString, int i) {
        g.setFont(getFont());
        g.setColor(new Color(random.nextInt(101), random.nextInt(111), random
                .nextInt(121)));
        String rand = String.valueOf(getRandomString());
        randomString += rand;
        g.translate(random.nextInt(3), random.nextInt(3));
        g.drawString(rand, 13 * i, 16);
        return randomString;
    }


    /*
     * 绘制干扰线
     */
    private static void drowLine(Graphics g) {
        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);
    }
}

2、创建一个servlet（用于请求生成验证码 VerifyCodeServlet.java）

public class VerifyCodeServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("image/jpeg");//设置相应类型,告诉浏览器输出的内容为图片
        response.setHeader("Pragma", "No-cache");//设置响应头信息，告诉浏览器不要缓存此内容
        response.setHeader("Cache-Control", "no-cache");//设置响应头信息，告诉浏览器不要缓存此内容
        response.setDateHeader("Expire", 0);//0为立刻过期，不让页面缓存该数据。
        try {
            //使用RandomValidateCode类绘制眼验证码并输出响应到response中
            VerifyCode.getVerifydcode(request, response);//输出验证码图片方法
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

3、web.xml配置

<!--登录的servlet-->
 <servlet>
        <servlet-name>UserServlet</servlet-name>
        <servlet-class>com.servlet.UserServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>UserServlet</servlet-name>
        <url-pattern>login.user</url-pattern>
    </servlet-mapping>
	<!--用于生成验证码的servlet-->
  <servlet>
        <servlet-name>VerifyCodeServlet</servlet-name>
        <servlet-class>com.servlet.VerifyCodeServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>VerifyCodeServlet</servlet-name>
        <url-pattern>/verifycode</url-pattern>
    </servlet-mapping>

4、登录servlet验证(UserServlet.java)

private void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        HttpSession session = request.getSession();
        String verifyCode = request.getParameter("verifyCode");//得到用户提交的验证码
        Object attribute = session.getAttribute(VerifyCode.VERIFY_CODE_KEY);//从session中取出生成的验证码
		//如果用户提交的验证码为空，或者验证码忽略大小写比较不相等则退回到登录界面
        if (verifyCode == null || !verifyCode.equalsIgnoreCase(String.valueOf(attribute))) {
            request.setAttribute("tip", "验证码错误");
            request.getRequestDispatcher("/login.jsp").forward(request, response);
        }else{
		//登录成功可以进行后续操作
	}
}

5、登录页面login.jsp

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title> 
    <script type="text/javascript">
        onload = function () {
            document.getElementById("img_vc").addEventListener("click", function (event) {
                event.target.src = "/context/verifycode?" + Math.random(); //添加随机数是请求地址发生变化点击验证码图片重新获取验证码
            })
        }
    </script>
</head>
<body>

<div id="content">
    <form id="from_login" action="login.user" method="post">
        <div>
            <input name="name" placeholder="用户名">
        </div>
        <div>
            <input name="psw" placeholder="密码">
        </div>
        <div>
            <input name="verifyCode" placeholder="验证码">
            <img id="img_vc" src="/context/verifycode" alt="获取验证码">
        </div>
        <div>
            <button id="btn_login" type="submit">登录</button>
        </div>  
    </form>
</div>
</body>
</html>

6、验证码截图