登录页面添加图形验证码功能

之前前辈写的登录表单还是提交到同一个页面，前端直接读取用户输入的验证码与session并不同步，所以使用ajax将用户输入传递到后台进行验证，这样也更安全。

生成验证码validatecode.jsp

<%@ 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();
String hash1 = Integer.toHexString(rdm.nextInt());
//System.out.print(hash1);
// 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);
}
// generate a random code
String capstr = hash1.substring(0, 4);
session.setAttribute("key", capstr); // 将验证码放入request
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();
%>

前端代码login.jsp：

<div class="loginFormContent">
<form id="loginForm" action="${ctx }/login.jsp" method="post" >
<div id="loginTabContent" >
<div id="login-error" class="errorMsg" style="color: red;padding-left: 60px;"></div>
<div class="dlcLeft">
<div class="frmItem">
<label for="" class="frm_label">工号</label>
<div class="frm_controls">
<input id="username" type="text" class="frm-controlM" name="username" value="" >
</div>
</div>
<div class="frmItem">
<label for="" class="frm_label">密码</label>
<div class="frm_controls">
<input type="password"  name="password" id="passwordInput"  class="frm-controlM" value="" >
</div>
</div>

<%--图形验证码--%>
<div class="frmItem">
<label for="" class="frm_label">验证码</label>
<div class="frm_controls">
<input type="text" id="checkcode" name="checkcode"/>
<img  class="btnSearch" id="code" src="${pageContext.request.contextPath }/validatecode.jsp"  onclick="loadimage();" />
</div>
</div>
<div class="frmItem" style="padding: 6px 5px;">
<label for="" class="frm_label">&nbsp;</label>
<input type="button" value=" 登 录 " class="btnGreen" style="width: 330px;height: 45px;" onclick="checkInput()"/>
</div>
</div>
</div>
</form>
</div>

后台处理CheckCodeServlet：

package com.key.common.plugs.security;

import javax.servlet.*;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;

public class CheckCodeServlet extends HttpServlet {

public CheckCodeServlet(){
super();
}

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");
PrintWriter out = response.getWriter();
int flag=-1;

HttpSession session = request.getSession();
String realKey = (String) session.getAttribute("key");

String userKey = request.getParameter("userKey");

//不区分大小写
if(realKey != null && !realKey.trim().equals("")){
realKey = realKey.toLowerCase();
}
if (realKey != null && !realKey.trim().equals("")){
realKey = realKey.toLowerCase();
}

//验证码
if(userKey==null || userKey==""){
flag = -1;
}else if(realKey.equals(userKey) || realKey==userKey){
flag=1;
}else{
flag=0;
}
//如果两个验证码一致，并移除sesssion域中的属性值
//session.removeAttribute("key");
//String code = realKey+"-"+userKey+"-"+flag;
out.println(flag);
out.flush();
out.close();
}
}

CheckCodeServlet的web.xml路径配置：

<servlet>
<servlet-name>checkCode</servlet-name>
<servlet-class>com.key.common.plugs.security.CheckCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkCode</servlet-name>
<url-pattern>/checkCode</url-pattern>
</servlet-mapping>

验证：

function checkInput() {
var userKey=$("#checkcode").val();
$.ajax({
type: "POST",
url: "checkCode",
data: {userKey: userKey},
success: function(msg){
//console.log(typeof msg);  String
if(eval(msg)=="-1"){
document.getElementById("login-error").innerHTML="请输入验证码";
//alert("验证码输入不能为空");
}else if(eval(msg) == "1"){
$("#passwordInput").val(hex_md5($("#passwordInput").val()));
$("#loginForm").submit();
}else if(eval(msg) == "0"){
document.getElementById("login-error").innerHTML="验证码输入错误";
setTimeout(function(){
window.location.reload();
},1000);
}
}
})
}

//切换验证码图片
function loadimage(){
document.getElementById("code").src = "${pageContext.request.contextPath }/validatecode.jsp?"+Math.random();
}

结果页：