登录功能图片验证码的实现

最新推荐文章于 2025-07-05 12:00:54 发布

特雷西_

最新推荐文章于 2025-07-05 12:00:54 发布

阅读量2w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： Web 日记

本文链接：https://blog.youkuaiyun.com/kingtracy8/article/details/79648991

Web 同时被 2 个专栏收录

12 篇文章

订阅专栏

日记

1 篇文章

订阅专栏

首先从网上下载一个生成验证码的Servlet：

package com.train.controller;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.List;
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;

@WebServlet("/CodeServlet")
public class CodeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	// 集合中保存所有成语
	private List<String> words = new ArrayList<String>();

	public CodeServlet() {
		super();
	}

	@Override
	public void init() throws ServletException {
		// 初始化阶段，读取new_words.txt
		// web工程中读取 文件，必须使用绝对磁盘路径
		String path = getServletContext().getRealPath("/WEB-INF/new_words.txt");
		try {
			BufferedReader reader = new BufferedReader(new InputStreamReader(new FileInputStream(path), "utf-8"));
			String line;
			while ((line = reader.readLine()) != null) {
				words.add(line);
			}
			reader.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		int width = 120;
		int height = 36;

		// 步骤一 绘制一张内存中图片
		BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

		// 步骤二 图片绘制背景颜色 ---通过绘图对象
		Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔
		// 绘制任何图形之前 都必须指定一个颜色
		graphics.setColor(getRandColor(200, 250));
		graphics.fillRect(0, 0, width, height);

		// 步骤三 绘制边框
		graphics.setColor(Color.WHITE);
		graphics.drawRect(0, 0, width - 1, height - 1);

		// 步骤四 四个随机数字
		Graphics2D graphics2d = (Graphics2D) graphics;
		// 设置输出字体
		graphics2d.setFont(new Font("宋体", Font.BOLD, 18));

		Random random = new Random();// 生成随机数
		int index = random.nextInt(words.size());
		String word = words.get(index);// 获得成语

		// 定义x坐标
		int x = 10;
		for (int i = 0; i < word.length(); i++) {
			// 随机颜色
			graphics2d
					.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
			// 旋转 -30 --- 30度
			int jiaodu = random.nextInt(60) - 30;
			// 换算弧度
			double theta = jiaodu * Math.PI / 180;

			// 获得字母数字
			char c = word.charAt(i);

			// 将c 输出到图片
			graphics2d.rotate(theta, x, 20);
			graphics2d.drawString(String.valueOf(c), x, 20);
			graphics2d.rotate(-theta, x, 20);
			x += 30;
		}

		// 将验证码内容保存session作用域
		request.getSession().setAttribute("checkcode_session", word);

		// 步骤五 绘制干扰线
		graphics.setColor(getRandColor(160, 200));
		int x1;
		int x2;
		int y1;
		int y2;
		for (int i = 0; i < 30; i++) {
			x1 = random.nextInt(width);
			x2 = random.nextInt(12);
			y1 = random.nextInt(height);
			y2 = random.nextInt(12);
			graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
		}

		// 将上面图片输出到浏览器 ImageIO
		graphics.dispose();// 释放资源
		ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

	private Color getRandColor(int fc, int bc) {
		// 取其随机颜色
		Random random = new Random();
		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);
	}

}

如代码里写的，我们需要一个new_words.txt用来生成图片验证码：

在登录页面添加验证码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div class="register">
		<form action="/Train1/loginServlet" method="post">
			<div class="login-box">

				<table width="350" height="200">

					<tr align="center">

						<td><div>用户名：</div></td>
						<td colspan="2"><input type="text" name="userName" /></td>

					</tr>

					<tr align="center">

						<td><div>密  码：</div></td>
						<td colspan="2"><input type="password" name="passWord" /></td>

					</tr>



					<tr>
						<td>验证码：<input type="text" id="checkCode" name="checkCode" /></td>
						<td><img id="imageCode" onclick="changeImage()"
							src="CodeServlet"></td>
					</tr>

					<tr align="center">

						<td colspan="3"><input type="submit"
							style="width: 50px; background-color: red;" value="登录" /></td>

					</tr>
					<tr>
						<td><%=request.getAttribute("msg")%></td>
					</tr>

				</table>


			</div>
		</form>
	</div>
	<script type="text/javascript">
		function changeImage() {
			document.getElementById("imageCode").src="CodeServlet?"+new Date().getTime();
		}
	</script>
</body>
</html>

changeImage()方法里的+new Date().getTime()是为了让用户点击一下就能换图片。

在Servlet里验证用户输入的验证码是否正确，如果不正确就给出提示，拒绝登录：

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

		request.setCharacterEncoding("utf-8");
		String userName = request.getParameter("userName");
		String passWord = MD5Utils.md5(request.getParameter("passWord"));
		userModel model = new userModel();
		model.setUserName(userName);
		model.setPassWord(passWord);

		userService service = new userService();

		if (request.getSession().getAttribute("checkcode_session").equals(request.getParameter("checkCode"))) {

			try {
				userModel md = service.selectByNameAndPass(model);
				if (md != null) {
					// 找到记录，登录成功
					request.getSession().setAttribute("userName", md.getUserName());
					request.getRequestDispatcher("welcome.jsp").forward(request, response);
				} else {
					request.setAttribute("msg", "登录失败！请重试！");
					request.getRequestDispatcher("login.jsp").forward(request, response);
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		} else {
			request.setAttribute("msg", "验证码输入有误！请重试！");
			request.getRequestDispatcher("login.jsp").forward(request, response);
		}

	}

即可实现登录图片验证码功能，点击一次换一次图片。