登录验证码的实现

目标

使用servlet和前端页面实现简单的验证码功能

实现方式

前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>登录</title>
    <script>
        window.οnlοad=function (){
            var img = document.getElementById("image");
            img.onclick = function () {
                img.src="/day39/checkcode?time"+new Date().getTime();
            }
        }
    </script>
</head>
<body>
    <form action="/day39/checkLogin">
        用户名<input type="text" name="username"><br>
        密码  <input type="password" name="pwd"><br>
        验证码<input type="text" name="checkcode"><img id="image" src="/day39/checkcode"><br>

        <input type="submit" value="登录">${msg}
    </form>
</body>
</html>

验证码部分使用图片连接到一个servlet，在servlet中实现画图片，在js代码中实现点击图片进行更新验证码的功能，因为使用同一个地址会有缓存，在重新选择的地址中加上当前时间，保证地址的不同，使用EL表达式来显示用户输入错误信息的提示

servlet部分

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
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.io.IOException;
import java.util.Random;

@WebServlet("/checkcode")
public class CheckCodeServelt extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int width=100;
        int height = 30;
        //在内存中生成一张图片
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        Graphics graphics = image.getGraphics();//得到画笔
        graphics.setColor(Color.yellow);
        graphics.fillRect(0,0,width,height);//填充背景色
        //画边框
        graphics.setColor(Color.BLACK);
        graphics.drawRect(0,0,width-1,height-1);
        //生成验证码
        String str="ABCDEFGHIGKLMNOPQRSTUVWXYZ123456789%$#@";
        StringBuilder stringBuilder = new StringBuilder();
        String code="";
        Random random = new Random();
        int index =-1;
        graphics.setColor(Color.red);
        for(int i=1;i<=4;i++){
            index=random.nextInt(str.length());
            char ch = str.charAt(index);
            stringBuilder.append(ch);
            //将生成的随机字符画到图片上面
            graphics.drawString(ch+"",width/5*i,height/2);

        }
        String codes = stringBuilder.toString();
        //把验证码存储到session中
        req.getSession().setAttribute("checkCode",codes);
        //生成干扰线
        graphics.setColor(Color.green);
        for (int i = 0; i < 5; i++) {
            int x1=random.nextInt(width);
            int x2=random.nextInt(width);
            int y1=random.nextInt(height);
            int y2=random.nextInt(height);

            graphics.drawLine(x1,y1,x2,y2);
        }
        ImageIO.write(image,"jpg",resp.getOutputStream());
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

实现画一张验证码的图片，包括背景、边框、字符、干扰线等，使用循环控制字符的个数和每个字符的具体位置，干扰线的生成通过random生成的随机数实现

BufferedImage生成内存中的一张图片，getGraphics获取这张图片的画笔，setColor设置画笔颜色，将生成的验证码序列存放在session中

进行验证码匹配的servlet

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
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.io.IOException;
import java.util.Random;

@WebServlet("/checkLogin")
public class CheckLoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");

        String username = req.getParameter("username");
        String pwd = req.getParameter("pwd");
        String checkcode = req.getParameter("checkcode");

        //从session中取出正确的验证码
        HttpSession session = req.getSession();
        String  checkCoke = (String) session.getAttribute("checkCode");
        if(checkCoke!=null && !checkCoke.equals("") && checkcode.equalsIgnoreCase(checkCoke))
        {
            //判断用户名密码是否正确
            if(username.equals("admin") && pwd.equals("123")){
                //登录成功,把用户信息放到session中
                //req.getSession().setAttribute("user",obj);
                resp.sendRedirect("/day39/success.jsp");
            }else{
                //用户名或密码错误
                req.setAttribute("msg","用户名或密码错误");
                req.getRequestDispatcher("/login.jsp").forward(req,resp);
            }
        }else{
            //验证码输入错误
            req.setAttribute("msg","验证码错误");
            req.getRequestDispatcher("/login.jsp").forward(req,resp);
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

对比从session中获取的验证码和从表单中提交过来的验证码是否相同

原文链接：https://blog.csdn.net/dao_cao_renshuai/article/details/119509923