jsp + servlet 实现验证码

前言:验证码是我们每天都在打交道的东西,你知道用 jsp + servlet 怎么实现吗?快来看看吧!

1. 验证码定义

  • 是一种区分用户是计算机还是人的公共全自动程序

2. 验证码作用

  • 可以防止恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

3. 成品

这里写图片描述

4. 流程

这里写图片描述

5. 具体类

  • Servlet
    • ImageServlet
      生成验证码图片,并将验证码字符串传递给 session
    • LoginServlet
      从 session 取出验证码和前台传回的验证码比较,输出结果
  • Jsp
    • index.jsp
      显示前台界面
      这里写图片描述

6. 详细实现

  • ImageServlet
package servlet;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ImageServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 画出背景
        BufferedImage bi = new BufferedImage(68, 22, BufferedImage.TYPE_INT_RGB);
        Graphics g = bi.getGraphics();
        g.setColor(new Color(200, 155, 255));
        g.fillRect(0, 0, 68, 22);

        // 画出验证码,同时使用 sb 将随机出来的验证码保存起来,方便传给其他servlet
        char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
        Random r = new Random();
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < 4; i++) {
            int index = r.nextInt(ch.length);
            g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));
            g.drawString(ch[index] + "", (i * 15) + 3, 18);
            sb.append(ch[index]);
        }

        // 传递保存的验证码
        request.getSession().setAttribute("piccode", sb.toString());

        // 将画出来的图片输出
        ImageIO.write(bi, "jpg", response.getOutputStream());
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

}
  • LoginServlet
package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        // 获得图片验证码
        String piccode = (String) request.getSession().getAttribute("piccode");
        // 获得前台传递验证码
        String checkcode = request.getParameter("checkcode").toUpperCase();
        PrintWriter out = response.getWriter();
        if (piccode.equals(checkcode)) {
            out.println("<h1>验证正确!</h1>");
        } else {
            out.println("<h1>验证失败!</h1>");
        }
        out.flush();
        out.close();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

}
  • web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
    <servlet>
        <servlet-name>ImageServlet</servlet-name>
        <servlet-class>servlet.ImageServlet</servlet-class>
    </servlet>
    <servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>servlet.LoginServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>ImageServlet</servlet-name>
        <url-pattern>/servlet/ImageServlet</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/servlet/LoginServlet</url-pattern>
    </servlet-mapping>
</web-app>
  • index.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
    //切换图片
    function reloadCode(){
        document.getElementById("imagecode").src = "<%=request.getContextPath() %>/servlet/ImageServlet?d="+new Date().getTime();
    }
</script>
</head>
<body>
    <form action="<%=request.getContextPath() %>/servlet/LoginServlet" method="post">
        验证码:<input type="text" name="checkcode">
        <img src="<%=request.getContextPath() %>/servlet/ImageServlet" id="imagecode">
        <a href="javascript:reloadCode();">看不清楚</a><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/liyuanyue2017/article/details/81606044