网站安全之为Web项目添加验证码功能（一）

1.需求说明

     首先，读者先来说明验证码的作用。对于安全性要求比较高的系统来说，添加下验证码的功能是必不可少的。有主要是为是防止黑客的入侵。有些黑客为了故意攻击一个系统，可能会使用攻击工具，连续不断地重试用户名或密码登录系统。如果我们不加入验证码，那么就有可能会被破解用户名和密码的。所以加入验证码是非常有必要的。

2.开发思路

     对于这样的需求是小功能，我想实现的话是不难的，主要看你要怎样来实现生成验证这个功能了。我们可以使用js来生成验证码，也可以使用java来实现。笔者将会分为两篇的博客来说明，这一篇主要是说明使用js来实现。

3.代码实现

1)        创建登录页面,页面我们需要输入用户和验证码。所以需要两个文件框，同时还需要生成验证码图片的。大概登录的页面login.jsp的代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>



	
		
		

		


	

	
		
			

				






			
			
				请输入用户名：
				
				


				
				
				

				请输入验证码：
				
				


				
				
				
				


				
				
				
					${sessionScope.loginError } <%session.removeAttribute("loginError"); %>
				
				
			
		
	

2)        细心的读者已经发现了，上面的代码已经的checkcode.jsp的字段，这个页面就是生成验证码的文件，代码的逻辑就不多说了，在代码已经的注释了，读者可以自己看。

<%@ page import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="gbk"%>
<%@ page import="java.io.OutputStream"%>

<%--	采用JPG格式的图片验证码	--%>

<%!Color getRandColor(int fc, int bc)	//随机生成图片中rgb的值
	{
		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);
	}
%>

<%
	try
	{
		response.setHeader("Pragma", "No-cache");
		
		response.setHeader("Cache-Control", "no-cache");
		
		response.setDateHeader("Expires", 0);
		
		int width = 60, height = 20;
		
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		
		OutputStream os = response.getOutputStream();
		
		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 < 155; 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);
		}
		
		String sRand = "";

		//生成4为随机的、有彩色值得验证码
		for (int i = 0; i < 4; i++)
		{
			//生成一位验证码的值
			String rand = String.valueOf(random.nextInt(10));

			sRand += rand;
			
			g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
			
			//对生成的验证码值进行颜色设置，已进行干扰
			g.drawString(rand, 13 * i + 6, 16);
		}
		
		session.setAttribute("checkcode_inSession", sRand);
		
		g.dispose();
		
		//生成JPEG格式的图片验证码
		ImageIO.write(image, "gif", os);
		
		os.flush();
		os.close();
		
		os = null;
		
		// 用来将缓冲区的数据立即输出到浏览器当中
		response.flushBuffer();
		
		/*	两句关键代码	*/
		out.clear();
		
		out = pageContext.pushBody();
	} 
	catch (IllegalStateException e)
	{
		System.out.println(e.getMessage());
		e.printStackTrace();
	}
%>

3)        加入了验证码之后，我们会把生产的验证码放入到session中，以便后端可以拿到并且验证用户输入的验证码是还有问题。所以CheckCodeServlet.java的后端逻辑处理的类的代码如下。主要实现的是，验证用户输入的用户名是否正确还有就是验证码是否正确。

@SuppressWarnings("serial")
public class CheckCodeServlet extends HttpServlet
{

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		response.setContentType("text/html;charset=UTF-8");

		HttpSession session = request.getSession();

		String userName = request.getParameter("userName"); // 账号
		String userCode = request.getParameter("userCode"); // 输入的验证码

		
		/*	获取系统生成的验证码，同时移除掉	*/
		String verificationCode = (String) session.getAttribute("checkcode_inSession");
		session.removeAttribute("checkcode_inSession");


		/*	验证码正确才进行账户信息检查	*/
		
		// 验证码错误
		if (!userCode.equals(verificationCode))
		{
			session.setAttribute("loginError", "验证码错误");
			response.sendRedirect("login.jsp");
		} 
		else
		{			
			// 账号存在,此处也可以通过js进行合法性检查
			if (userName!=null && userName!="")
			{
				// 登录成功
				if (userName.equals("admin"))
				{
					//把登录成功的用户信息存放在session中
					session.setAttribute("UserInfoSession", userName);
					response.sendRedirect("main.jsp");
				}
				// 登录失败，账号信息有误
				else
				{
					session.setAttribute("loginError", "账号信息有误");
					response.sendRedirect("login.jsp");
				}			
			}
		}
	}
}

4)        当然要想前端与后端可以关联起来，我们还还需要在Web.xml中配置上我们定义的CheckCodeServlet.java.

 

  
    This is the description of my J2EE component
    This is the display name of my J2EE component
    CheckCodeServlet
    com.owen.checkcode.servlet.CheckCodeServlet
  

  
    CheckCodeServlet
    /checkCodeServlet
  
  
    index.jsp
  

5)        最后，当用户登录成功后，我们给个简单的页面main.jsp。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>



	

		



	

	
		欢迎你：<%=session.getAttribute("UserInfoSession") %>

	

6)        说明：项目可能用到的jar有：javax.servlet-5.1.12.jar、jstl-1.2.jar

4.实现功能

1)        登录页面。

2)        登录成功。

5.项目结构