效果图:
loginProcess.jsp
java
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% String captcha=request.getParameter("captcha");%>
<% String captcha_session=(String)session.getAttribute("captchaCode");%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
if (captcha.equals(captcha_session))
out.print("验证码正确~!");
else
out.print("验证码不正确~!");
%>
</body>
</html>
java
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面之验证码原理</title>
<script>
// JavaScript code to refresh captcha every 30 seconds
function refreshCaptcha() {
var img = document.getElementById("captchaImg");
img.src = "./abc?" + new Date().getTime(); // add timestamp to force reload
}
setInterval(refreshCaptcha, 30000); // refresh captcha every 30 seconds
</script>
</head>
<body>
<h1>登录页面之验证码原理</h1>
<form action="loginProcess.jsp" method="post">
<div>
<label for="username">姓名:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</div>
<div>
<label for="captcha">验证码:</label>
<input type="text" id="captcha" name="captcha">
<img id="captchaImg" width=100 src="./abc" alt="Captcha Image" onclick="refreshCaptcha()">
<button type="button" onclick="refreshCaptcha()">刷新验证码</button>
</div>
<div>
<button type="submit">登录</button>
</div>
</form>
</body>
</html>
java
package src;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Base64;
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("/abc")
public class GenerateCaptchaServlet extends HttpServlet {
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Set content type of the response
response.setContentType("image/jpeg");
// Create a random captcha code
String captchaCode = generateRandomCode(6); // Generate 6-character random code
// Store the captcha code in session for validation
request.getSession().setAttribute("captchaCode", captchaCode);
// Create a BufferedImage for captcha image
int width = 200;
int height = 50;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = image.createGraphics();
// Draw the captcha code on the image
g2d.setFont(new Font("Arial", Font.BOLD, 24));
g2d.setColor(Color.RED);
g2d.drawString(captchaCode, 50, 30);
// Dispose the graphics
g2d.dispose();
// Output the image as JPEG to the client
OutputStream out = response.getOutputStream();
ImageIO.write(image, "jpeg", out);
out.close();
}
private String generateRandomCode(int length) {
String charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
Random random = new Random();
StringBuilder sb = new StringBuilder(length);
for (int i = 0; i < length; i++) {
int index = random.nextInt(charset.length());
sb.append(charset.charAt(index));
}
return sb.toString();
}
}