262-JavaWEB实现验证码登录验证功能.md

注意

本博文仅供学术研究和交流参考，严禁将其用于商业用途。如因违规使用产生的任何法律问题，使用者需自行负责。

前置条件

1. jdk系统环境与IDE工具配置完成

2. IDE工具与tomcat服务器配置完成

3. JavaWEB项目创建好并自行测试完成

4. 所需要的jar包请自行配置完成

实现步骤

1. 后端 Java 类

package net.tencent.tickets.servlet.login;

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

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;

/**
 * 生成验证码的Servlet
 */
@WebServlet("/ValidateCodeServlet")
public class ValidateCodeServlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;

	private char code[] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
			'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y',
			'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M',
			'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '2',
			'3', '4', '5', '6', '7', '8', '9' };
	
	private static final int WIDTH = 50;
	private static final int HEIGHT = 20;
	private static final int LENGTH = 4;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		// 设置响应报头信息
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		// 设置响应的MIME类型
		response.setContentType("image/jpeg");

		BufferedImage image = new BufferedImage(WIDTH, HEIGHT,
				BufferedImage.TYPE_INT_RGB);
		
		
		//画笔工具
		Graphics g = image.getGraphics();
		
		Random rd = new Random();

		// 设置背景颜色
		g.setColor(new Color(rd.nextInt(55) + 200, rd.nextInt(55) + 200, rd
				.nextInt(55) + 200));
		g.fillRect(0, 0, WIDTH, HEIGHT);

		// 设置字体
		Font mFont = new Font("Arial", Font.TRUETYPE_FONT, 18);
		g.setFont(mFont);

		// 画边框
		g.setColor(Color.black);
		g.drawRect(0, 0, WIDTH - 1, HEIGHT - 1);

		// 随机产生的验证码
		String result = "";
		for (int i = 0; i < LENGTH; ++i) {
			result += code[rd.nextInt(code.length)];
		}
		HttpSession se = request.getSession();
		se.setAttribute("code", result);//将随机生成的验证码存储到session中，用来与用户输入的验证码作对比

		// 画验证码
		for (int i = 0; i < result.length(); i++) {
			g.setColor(new Color(rd.nextInt(200), rd.nextInt(200), rd
					.nextInt(200)));
			g.drawString(result.charAt(i) + "", 12 * i + 1, 16);
		}

		// 随机产生2个干扰线
		for (int i = 0; i < 2; i++) {
			g.setColor(new Color(rd.nextInt(200), rd.nextInt(200), rd
					.nextInt(200)));
			int x1 = rd.nextInt(WIDTH);
			int x2 = rd.nextInt(WIDTH);
			int y1 = rd.nextInt(HEIGHT);
			int y2 = rd.nextInt(HEIGHT);
			g.drawLine(x1, y1, x2, y2);
		}

		// 释放图形资源
		g.dispose();
		try {
			OutputStream os = response.getOutputStream();

			// 输出图像到页面
			ImageIO.write(image, "JPEG", os);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

}

package net.tencent.tickets.servlet.login;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

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 net.sf.json.JSONArray;

@WebServlet("/UserCodeServlet")
public class UserCodeServlet extends HttpServlet {

	/**
	 * serialVersionUID
	*/
	private static final long serialVersionUID = 1L;
	
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		HttpSession session = request.getSession();
		request.setCharacterEncoding("utf-8");
		String userCode = request.getParameter("code");// 用户输入的验证码
		// 服务端验证码
		String serverCode = (String) session.getAttribute("code");
		Map<String, Boolean> map = new HashMap<>();
		response.setContentType("application/json;charset=utf-8");
		PrintWriter writer = response.getWriter();
		
		// ③ 验证码校验：用户输入验证码与服务器生成的验证码是否匹配
		if (userCode == null || !userCode.equalsIgnoreCase(serverCode)) {
			map.put("result", false);
		}else {
			map.put("result", true);
		}
		
		JSONArray JsonArray = JSONArray.fromObject(map);
		writer.write(JsonArray.toString());
		writer.flush();
		writer.close();
	}

}

2. 前端

//验证码输入框失去焦点时触发
$("#text_code").blur(function (){
    let text_code = $("#text_code").val();
    $.ajax({
        url: "/tickets/UserCodeServlet",
        method: "POST",
        data: {
            code: text_code
        },
        dataType: "json",
        beforeSend: function (XMLHttpRequest) {
        },
        success: function (data, textStatus, XMLHttpRequest) {
            if(!data[0].result){
                // 验证不通过给出提示
                $("#alert_title").text("验证码输入错误");
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThorwn) {
            console.error(XMLHttpRequest);
            console.error(textStatus);
            console.error(errorThorwn)
        },
        complete: function (XMLHttpRequest, textStatus) {
        }
    })
})

3. 前端所需要输入框请自行补全

测试

1. 测试URL接口

2. 测试前端页面

如上所示测试完成，其核心原理在于后端Java生成图片前端获取，而后更改前端图片的路径即可 而后用户根据图上所示的字母输入前端传入后端进行服务端验证，后端返回前端结果而后前端对用户进行提示即可

---

分割线

---

相关信息

以上就是我关于 JavaWEB实现验证码登录验证功能 知识点的整理与总结的全部内容，希望对你有帮助。。。。。。。