在进行登陆的时候，往往会需要输入验证码，那么验证码是怎么实现的呢?
首先我们的验证码图片是在JSP页面中展示的，所以先从JSP页面入手。
流程：登录界面->后台生成图片和这个图片对应的数字（把数字存入session）->前台的jsp页面获得图片所对应的数字->当用户点击提交后判断用户输入的与存储的数字是否一样。
- 登录主页面（login.jsp）
-
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
pageEncoding="UTF-8"%>
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<title>登录</title>
-
<script type="text/javascript">
-
function refresh() {
-
//IE存在缓存,需要new Date()实现更换路径的作用
-
document.getElementById("image").src="../login/image.jsp?"+new Date();
-
}
-
</script>
-
</head>
-
<body>
-
<form action="../login/check.jsp" method="post" id="loginForm" name="loginForm">
-
用户名：<input type="text" name="userName">
-
密码：<input type="password" name="userPwd">
-
验证码：<input type="text" name="code" maxlength="4">
-
<img id="image" border="0" onclick="refresh()" src="../login/image.jsp" title="点击更换图片">
-
<input type="submit" value="登录">
-
</form>
-
</body>
-
</html>
2. 验证码生成jsp(image.jsp)
-
<%@page import="javax.imageio.ImageIO"%>
-
<%@page import="java.awt.Font"%>
-
<%@page import="java.awt.Graphics"%>
-
<%@page import="java.awt.image.BufferedImage"%>
-
<%@page import="java.util.Random"%>
-
<%@page import="java.awt.Color"%>
-
<%@ page language="java" contentType="image/JPEG; charset=UTF-8"
-
pageEncoding="UTF-8"%>
-
<%!
-
//获取随机颜色
-
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);
-
}
-
%>
-
<%
-
//设置页面不缓存
-
response.setHeader("Pragma", "No-cache");
-
response.setHeader("Cache-Control", "no-cache");
-
response.setDateHeader("Expires", 0);
-
//在内存中创建图像
-
int width = 60;
-
int height = 20;
-
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
-
//获取图形上下文
-
Graphics g = image.getGraphics();
-
//随机类
-
Random random = new Random();
-
//设定背景
-
g.setColor(getRandColor(200, 250));
-
g.fillRect(0, 0, width, height);
-
//设定字体
-
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
-
//随机产生干扰线
-
g.setColor(getRandColor(160, 200));
-
for (int i = 0; i < 100; i++) {
-
int x = random.nextInt(width);
-
int y = random.nextInt(height);
-
int xl = random.nextInt(12);
-
int yl = random.nextInt(12);
-
g.drawLine(x, y, x + xl, y + yl);
-
}
-
//随机产生4位验证码
-
String[] codes = {"2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z"};
-
String code = "";
-
for(int i=0;i<4;i++){
-
String str = codes[random.nextInt(codes.length)];
-
code += str;
-
// 将认证码显示到图象中
-
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
-
//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
-
g.drawString(str, 13 * i + 6, 16);
-
}
-
// 将认证码存入SESSION
-
session.setAttribute("code", code);
-
// 图象生效
-
g.dispose();
-
// 输出图象到页面
-
ImageIO.write(image, "JPEG", response.getOutputStream());
-
//加上下面代码,运行时才不会出现java.lang.IllegalStateException: getOutputStream() has already been called ..........等异常
-
response.getOutputStream().flush();
-
response.getOutputStream().close();
-
response.flushBuffer();
-
out.clear();
-
out = pageContext.pushBody();
-
%>
3. 验证码检查页面（check.jsp：检查验证码是否输入正确）
-
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
pageEncoding="UTF-8"%>
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<title>验证</title>
-
<script type="text/javascript">
-
function same(){
-
loginForm.action = "login/login_login";
-
loginForm.submit();
-
}
-
function different(){
-
alert("请输入正确的验证码");
-
location.href = "login.jsp";
-
}
-
</script>
-
</head>
-
<body>
-
<%
-
String userName = request.getParameter("userName");
-
String password = request.getParameter("userPwd");
-
%>
-
<form id="loginForm" name="loginForm" method="post">
-
<input type="hidden" id="userName" value=<%=userName %> name="user.userName">
-
<input type="hidden" id="userPwd" value=<%=password %> name="user.userPwd">
-
</form>
-
<%
-
String rand = session.getAttribute("code").toString();
-
String input = request.getParameter("code");
-
if(rand.equals(input)){
-
out.println("<script language='javascript'>same();</script>");
-
}else{
-
out.print("<script language='javascript'>different();</script>");
-
}
-
%>
-
-
</body>
-
</html>