【老系统改造】---登陆页面加验证码

1、老系统结构：jsp，servlet，jdk1.6，中途又加过一次spring security做登录验证

结果图：

 

2、生成验证码validateCode.jsp，产生的验证码存session，用于后端检验。这里生成验证码的逻辑改成java，有登录安全检验的要在Filter中排除这个生成验证码的url

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.Random"%>
<%@ page import="java.io.OutputStream"%>
<%@ page import="java.awt.Color"%>
<%@ page import="java.awt.Font"%>
<%@ page import="java.awt.Graphics"%>
<%@ page import="java.awt.image.BufferedImage"%>
<%@ page import="javax.imageio.ImageIO"%>
<%
    //设置页面不缓存
    response.setHeader("Pragma","no-cache");
    response.setHeader("Cache-Control","no-catch");
    response.setDateHeader("Expires",0);

    int width = 80;
    int height = 32;
    //create the image
    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    Graphics g = image.getGraphics();
    // set the background color
    g.setColor(new Color(0xDCDCDC));
    g.fillRect(0, 0, width, height);
    // draw the border
    g.setColor(Color.black);
    g.drawRect(0, 0, width - 1, height - 1);
    // create a random instance to generate the codes
    Random rdm = new Random();
    StringBuilder builder = new StringBuilder();
    String str = "123456789qwertyuiopasdfghjklzxcvbnm";
    for (int i=0; i<4; i++) {
    	int pos = rdm.nextInt(str.length());
    	builder.append(str.substring(pos,pos+1));
    }
    // make some confusion
    for (int i = 0; i < 50; i++) {
        int x = rdm.nextInt(width);
        int y = rdm.nextInt(height);
        g.drawOval(x, y, 0, 0);
    }
    String capstr = builder.toString();
    // 将验证码放入request.session
    session.setAttribute("genValCode", capstr);
    g.setColor(new Color(0, 100, 0));
    g.setFont(new Font("Candara", Font.BOLD, 24));
    g.drawString(capstr, 8, 24);
    g.dispose();
    response.setContentType("image/jpeg");
    out.clear();
    out = pageContext.pushBody();
    OutputStream strm = response.getOutputStream();
    ImageIO.write(image, "jpeg", strm);
    strm.close();
%>

 

登录页面加验证码div

<div class="validate-div">
            	<input type="text" placeholder="验证码" class="validatecode" name="validate_code" id="validate_codeD">
            	<img alt="validateCode" id="validateCodeD" class="validateimg" src="../pages/validateCode.jsp" onclick="loadimage('D');">
 </div>

2、切换验证码，验证码提交后端检查的js

//切换验证码图片
function loadimage(ele){
	document.getElementById("validateCode"+ele).src = "../pages/validateCode.jsp?"+Math.random();
}


function checkValidateCode(ele) {
	var bool = true;
	var validate_code;
	validate_code = $("#validate_code"+ele).val();
	if (validate_code == "") {
		error.validateCodeErr(ele,"请输入验证码");
		return false;
	}
	$.post("../pages/validateCode.action", 
			{
				"validateCode" : validate_code
			},
			function(msg){
				if(eval(msg)=="-1"){
					error.validateCodeErr(ele,"请输入验证码");
					bool = false;
				}else if(eval(msg) == "1"){
					$('.validatecode-error').remove();
					bool = true;
				}else if(eval(msg) == "0"){
					error.validateCodeErr(ele,"验证码错误");
					bool = false;
				}else if(eval(msg) == "2") {
					error.validateCodeErr(ele,"请点击验证码图片刷新");
					bool = false;
				}
			}
		);
	
	return bool;
}

 

3、后端检查，登录安全检验也要排除这个url

package .....servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class ValidateCodeServlet extends HttpServlet {

	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		int flag = -1;

		HttpSession session = req.getSession();
		String realKey = (String) session.getAttribute("genValCode");
		String userKey = req.getParameter("validateCode");
		if (realKey == null || realKey.trim().equals("")) {
			flag = 2;
		} else {
			if (userKey == null || userKey.trim().equals("")) {
				flag = -1;
			} else {
				realKey = realKey.toLowerCase();
				userKey = userKey.toLowerCase();
				if (realKey.equals(userKey)) {
					flag = 1;
				} else {
					flag = 0;
				}
			}
		}
		
		resp.getWriter().write(String.valueOf(flag));
	}
	
}

剩下的就是调调样式，和以前登录页面风格差不多就可以了