Web登录常用验证码功能

JavaCrazyer

浏览: 3009056 次
性别:
来自: 河南

最近访客更多访客>>

beifengbei08

mnisummer

kristy_yy

qijojo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web/JSP

Web JSP jQuery JavaScript Servlet

目前大多网站登录时要么是回答一个问题，要么是输入验证码，主要是基于安全性方面的考虑，至于怎样使用验证码，我觉得有必要说一下，很多人上网一搜很多程序却不知道怎么用，为此我要详细讲解一下

先说第一种，就是页面输入后到后端验证验证码是否是正确的

像上图这样各种各样的验证码大家估计都遇到过，一般来说验证码从内容来分主要有纯数字的例如最后两个，字母数字混合的例如前三个或者是纯中文的例如第四个，那么这些生成图片的代码其实内容大都大同小异，只不过是个别参数值设置不同而已，下面假如你上网搜到了一个生成纯中文的验证码程序

public class ColorFulChenese {
	//生成随机颜色   
	Color getRandColor(Random random,int fc,int bc)   
	{   
	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);   
	}   


	public String getPic(int width,int height,OutputStream os){
	// 设置图片的长宽   
	//设置备选汉字，剔除一些不雅的汉字   
	String base = "\u7684\u4e00\u4e86\u662f\u6211\u4e0d\u5728\u4eba\u4eec\u6709\u6765\u4ed6\u8fd9\u4e0a\u7740\u4e2a\u5730\u5230\u5927\u91cc\u8bf4\u5c31\u53bb\u5b50\u5f97\u4e5f\u548c\u90a3\u8981\u4e0b\u770b\u5929\u65f6\u8fc7\u51fa\u5c0f\u4e48\u8d77\u4f60\u90fd\u628a\u597d\u8fd8\u591a\u6ca1\u4e3a\u53c8\u53ef\u5bb6\u5b66\u53ea\u4ee5\u4e3b\u4f1a\u6837\u5e74\u60f3\u751f\u540c\u8001\u4e2d\u5341\u4ece\u81ea\u9762\u524d\u5934\u9053\u5b83\u540e\u7136\u8d70\u5f88\u50cf\u89c1\u4e24\u7528\u5979\u56fd\u52a8\u8fdb\u6210\u56de\u4ec0\u8fb9\u4f5c\u5bf9\u5f00\u800c\u5df1\u4e9b\u73b0\u5c71\u6c11\u5019\u7ecf\u53d1\u5de5\u5411\u4e8b\u547d\u7ed9\u957f\u6c34\u51e0\u4e49\u4e09\u58f0\u4e8e\u9ad8\u624b\u77e5\u7406\u773c\u5fd7\u70b9\u5fc3\u6218\u4e8c\u95ee\u4f46\u8eab\u65b9\u5b9e\u5403\u505a\u53eb\u5f53\u4f4f\u542c\u9769\u6253\u5462\u771f\u5168\u624d\u56db\u5df2\u6240\u654c\u4e4b\u6700\u5149\u4ea7\u60c5\u8def\u5206\u603b\u6761\u767d\u8bdd\u4e1c\u5e2d\u6b21\u4eb2\u5982\u88ab\u82b1\u53e3\u653e\u513f\u5e38\u6c14\u4e94\u7b2c\u4f7f\u5199\u519b\u5427\u6587\u8fd0\u518d\u679c\u600e\u5b9a\u8bb8\u5feb\u660e\u884c\u56e0\u522b\u98de\u5916\u6811\u7269\u6d3b\u90e8\u95e8\u65e0\u5f80\u8239\u671b\u65b0\u5e26\u961f\u5148\u529b\u5b8c\u5374\u7ad9\u4ee3\u5458\u673a\u66f4\u4e5d\u60a8\u6bcf\u98ce\u7ea7\u8ddf\u7b11\u554a\u5b69\u4e07\u5c11\u76f4\u610f\u591c\u6bd4\u9636\u8fde\u8f66\u91cd\u4fbf\u6597\u9a6c\u54ea\u5316\u592a\u6307\u53d8\u793e\u4f3c\u58eb\u8005\u5e72\u77f3\u6ee1\u65e5\u51b3\u767e\u539f\u62ff\u7fa4\u7a76\u5404\u516d\u672c\u601d\u89e3\u7acb\u6cb3\u6751\u516b\u96be\u65e9\u8bba\u5417\u6839\u5171\u8ba9\u76f8\u7814\u4eca\u5176\u4e66\u5750\u63a5\u5e94\u5173\u4fe1\u89c9\u6b65\u53cd\u5904\u8bb0\u5c06\u5343\u627e\u4e89\u9886\u6216\u5e08\u7ed3\u5757\u8dd1\u8c01\u8349\u8d8a\u5b57\u52a0\u811a\u7d27\u7231\u7b49\u4e60\u9635\u6015\u6708\u9752\u534a\u706b\u6cd5\u9898\u5efa\u8d76\u4f4d\u5531\u6d77\u4e03\u5973\u4efb\u4ef6\u611f\u51c6\u5f20\u56e2\u5c4b\u79bb\u8272\u8138\u7247\u79d1\u5012\u775b\u5229\u4e16\u521a\u4e14\u7531\u9001\u5207\u661f\u5bfc\u665a\u8868\u591f\u6574\u8ba4\u54cd\u96ea\u6d41\u672a\u573a\u8be5\u5e76\u5e95\u6df1\u523b\u5e73\u4f1f\u5fd9\u63d0\u786e\u8fd1\u4eae\u8f7b\u8bb2\u519c\u53e4\u9ed1\u544a\u754c\u62c9\u540d\u5440\u571f\u6e05\u9633\u7167\u529e\u53f2\u6539\u5386\u8f6c\u753b\u9020\u5634\u6b64\u6cbb\u5317\u5fc5\u670d\u96e8\u7a7f\u5185\u8bc6\u9a8c\u4f20\u4e1a\u83dc\u722c\u7761\u5174\u5f62\u91cf\u54b1\u89c2\u82e6\u4f53\u4f17\u901a\u51b2\u5408\u7834\u53cb\u5ea6\u672f\u996d\u516c\u65c1\u623f\u6781\u5357\u67aa\u8bfb\u6c99\u5c81\u7ebf\u91ce\u575a\u7a7a\u6536\u7b97\u81f3\u653f\u57ce\u52b3\u843d\u94b1\u7279\u56f4\u5f1f\u80dc\u6559\u70ed\u5c55\u5305\u6b4c\u7c7b\u6e10\u5f3a\u6570\u4e61\u547c\u6027\u97f3\u7b54\u54e5\u9645\u65e7\u795e\u5ea7\u7ae0\u5e2e\u5566\u53d7\u7cfb\u4ee4\u8df3\u975e\u4f55\u725b\u53d6\u5165\u5cb8\u6562\u6389\u5ffd\u79cd\u88c5\u9876\u6025\u6797\u505c\u606f\u53e5\u533a\u8863\u822c\u62a5\u53f6\u538b\u6162\u53d4\u80cc\u7ec6";   
	//备选汉字的长度   
	int length = base.length();   
	  
	//创建内存图像   
	BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);   
	// 获取图形上下文   
	Graphics g = image.getGraphics();   
	  
	//创建随机类的实例   
	Random random = new Random();   
	  
	// 设定图像背景色(因为是做背景，所以偏淡)   
	g.setColor(getRandColor(random,200,250));   
	g.fillRect(0, 0, width, height);   
	  
	//备选字体   
	String[] fontTypes = {"\u5b8b\u4f53","\u65b0\u5b8b\u4f53","\u9ed1\u4f53","\u6977\u4f53","\u96b6\u4e66"};   
	int fontTypesLength = fontTypes.length;   
	  
	//在图片背景上增加噪点   
	g.setColor(getRandColor(random,160,200));   
	g.setFont(new Font("Times New Roman",Font.PLAIN,14));   
	for (int i=0;i<6;i++)   
	{   
	g.drawString("*********************************************",0,5*(i+2));   
	}   
	  
	  
	//取随机产生的认证码(6个汉字)   
	  
	//保存生成的汉字字符串   
	String sRand="";   
	for (int i=0;i<6;i++)   
	{   
	int start = random.nextInt(length);   
	 String rand=base.substring(start,start+1);   
	sRand+=rand;   
	//设置字体的颜色   
	g.setColor(getRandColor(random,10,150));   
	//设置字体   
	g.setFont(new Font(fontTypes[random.nextInt(fontTypesLength)],Font.BOLD,18 + random.nextInt(6)));   
	//将此汉字画到图片上   
	g.drawString(rand,24*i+ 10 + random.nextInt(8),24);   
	}   
	  
	
	g.dispose();   
	//输出图象到页面   
	try {
		ImageIO.write(image, "JPEG", os);
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}   
	
	
	return sRand;
	}
}

对于这段程序，我是经过修改的，一般你上网搜到的生成验证码的程序要么直接输入要么就没有返回值，我这个主要方法是含有返回值的，为什么要这么做，待会就知道了

首先，我们来写一个简单的JSP登陆页面，如第一个图片上显示的那样login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="ctx"/>
<html>
  <head>
    <title</title>
  </head>
  <script type="text/javascript">
  
  </script>
  <body>验证码示例<hr/>
    <table border="1" bordercolor="blue">
    <tr>
    <td>用户名</td><td><input type="text" /></td>
    </tr>
    <tr>
    <td>密码</td><td><input type="text" /></td>
    </tr>
    <tr>
    <td>验证码1</td><td><input id="checkcode" type="text" /><img src='${ctx}/checkcode.do?method=method1' style='cursor:pointer;' alt='请输入图片验证码' onClick="this.src='${ctx}/checkcode.do?method=method1&'+ Math.random()">  </td>
    </tr>
     <tr>
    <td>验证码2</td><td><input id="checkcode" type="text" /><img src='${ctx}/checkcode.do?method=method2' style='cursor:pointer;' alt='请输入图片验证码' onClick="this.src='${ctx}/checkcode.do?method=method2&'+ Math.random()">  </td>
    </tr>
    <tr>
    <td>验证码3</td><td><input id="checkcode" type="text" /><img src='${ctx}/checkcode.do?method=method3' style='cursor:pointer;' alt='请输入图片验证码' onClick="this.src='${ctx}/checkcode.do?method=method3&'+ Math.random()">  </td>
    </tr>
    <tr>
    <td>验证码4</td><td><input id="checkcode" type="text" /><img src='${ctx}/checkcode.do?method=method4' style='cursor:pointer;' alt='请输入图片验证码' onClick="this.src='${ctx}/checkcode.do?method=method4&'+ Math.random()">  </td>
    </tr>
     <tr>
    <td>验证码5</td><td><input id="checkcode" type="text" /><img src='${ctx}/checkcode.do?method=method5' style='cursor:pointer;' alt='请输入图片验证码' onClick="this.src='${ctx}/checkcode.do?method=method5&'+ Math.random()">  </td>
    </tr>
     <tr>
    <td>验证码6</td><td><input id="checkcode" type="text" /><img src='${ctx}/checkcode.do?method=method6' style='cursor:pointer;' alt='请输入图片验证码' onClick="this.src='${ctx}/checkcode.do?method=method6&'+ Math.random()">  </td>
    </tr>
     <tr>
    <td colspan="2"><a href="javascript:val();">验证输入</a></td>
    </tr> 
    
    </table>
  </body>
</html>

对于这个JSP代码来说，大都是重复性的，其中导致你能正确显示验证码的程序就是

img src='${ctx}/checkcode.do?method=method1' 这个src在你显示登陆页面之前就已经与后台程序交互产生相应的验证码图片了

处理程序，在servlet中我这么处理

package com.test.servlet;

import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.omg.CORBA.Request;

public class CheckCodeServlet extends HttpServlet {

	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String method=req.getParameter("method");
		String str=null;
		if(method.equals("method1")){
		
		   str= ImgUtil.getCertPic(0, 0, resp.getOutputStream());
		//防止出现getOutputStream() has already been called for this response异常
		//out.clear();
		//out = pageContext.pushBody();
		//将认证码存入SESSION   
		}else if(method.equals("method2")){
			 str = ImgUtil.getCertPic(0, 0, resp.getOutputStream());
	        
		}else if(method.equals("method3")){
			PictureCheckCode pc=new PictureCheckCode();
			str=pc.getPic(100, 40,resp.getOutputStream());
		   
		}else if(method.equals("method4")){
			ColorFulChenese optUtil2=new ColorFulChenese();
			optUtil2.getPic(172, 30, resp.getOutputStream());
			
		}else if(method.equals("method5")){
			ColorFulNum optUtil2=new ColorFulNum();
			optUtil2.getPic(60, 30, resp.getOutputStream());
		}else{
			MohuValPic mp=new MohuValPic();
			mp.getPic(60, 30,resp.getOutputStream());
		}
		System.out.println(str);
		req.getSession().setAttribute("checkCode", str);
        //禁止页面缓存
        resp.addHeader("Pragma", "No-Cache");
        resp.addHeader("Cache-Control", "No-Cache");
        resp.addHeader("Expires", "0");
	}

}

看见我往session中存放str了没有，这个str将来做登录请求处理时会起很大作用的，你输入的验证码要与验证码图片上显示的内容一致，那么这个str就是图片上的内容，对比下是否一样就可以进行相应处理了

再说第二种，只在页面客户端就将判断验证码输入正确与否

其实这么说不怎么专业，毕竟我下面还是用到了JSP程序，感觉就是比第一种要稍微简单些了，不过仁者见仁智者见智，喜欢第一种第二种的都可以啦

这里的判断是否为空，是否为无效都用到了JQuery了

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
  <head>
    <title>ValidateCodeTest</title>
    <script type="text/javascript" src="js/jquery-1.4.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
  </head>
  
  <body bgcolor="pink">
  <FORM id="loginForm" >
     <table>
     <tr><td>验证码<input type="text" name="chknumber"/></td><td><img src="validImage.jsp" id="checkCodeImg" onclick="this.src='validImage.jsp?rnd=' + Math.random();"/></td></tr>
     <tr><td colspan="2" align="center"><input type="button" value="登录 " onClick="form_submit()" /></td></tr>
     </table>
  </FORM>
  </body>
</html>

jquery-1.4.js就不用说了吧，上网可以下载到

index.js

function form_submit(){
	var chknumber = $("#loginForm input[name=chknumber]");
	var chknumberVal = chknumber.val();
	if (chknumberVal == null || $.trim(chknumberVal) == "") {
		alert("验证码不能为空");
		chknumber[0].focus();
		chknumber[0].select();
		return false;
	}
	
	var validCheckCode = fnValidCheckCode();
	if (validCheckCode == null || validCheckCode == "") {
		alert("无法读取验证码");
		return false;
	}

	if (chknumberVal.toLowerCase() != validCheckCode.toLowerCase()) {
		alert("无效的验证码");
		chknumber[0].focus();
		//chknumber[0].select();
		return false;
	}
	$("#loginForm").submit();

};

function fnValidCheckCode() {
	var validCheckCode = "";
	$.ajax({
		type : 'post',
		url : 'readValidCheckCode.jsp',
		dataType : 'text',	//xml, html, script, json, jsonp, text
		async : false,	//同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式
		//processData: false,	//设置 processData 选项为 false，防止自动转换数据格式，可以避免把自动把数据转换为字符串
		success : function(data, textStatus, xhr) {
			if (textStatus == "success") {
				validCheckCode = data;
			}
		}
		, error : function(xhr, textStatus, errorThrown) {
			alert(errorThrown);
		}
		,complete : function(xhr, textStatus) {
			//alert(typeof(xhr.responseText) + "--" + textStatus);
		}
	});
	
	return validCheckCode;
}

用于产生验证码以及将验证码存放到SESSION的程序validImage.jsp

<%@   page contentType="image/jpeg"
    import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"%>
<%@page import="java.io.InputStream"%>

<%
 int width = 68; //图片宽度
 int height = 22; //图片高度
 int count = 4; //码数

//验证码源
 char[] codes = {'0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

 InputStream inputStream;


	BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
	
	Graphics2D g = bi.createGraphics();
	g.setColor(Color.WHITE);
	g.fillRect(0, 0, width, height); //画背景
	
	g.setColor(Color.BLACK);
	g.drawRect(0, 0, width - 1, height - 1); //画边框
	
	//设置画笔的颜色和字体
	g.setFont(new Font("Fixedsys",Font.PLAIN, 14));
	StringBuilder sb = new StringBuilder();  //用来保存产生的码值
	Random random = new Random();
	for(int i = 0; i < count; i++){
		char c = codes[random.nextInt(codes.length)];
		sb.append(c);
		//产生随机颜色
		g.setColor(new Color(random.nextInt(200), random.nextInt(200), random.nextInt(200)));
		g.drawString(String.valueOf(c), i * (width/count)+2, height-3);
	}
	
	//随机数的干扰线 
	for(int i = 0; i < 1; i++){
		g.setColor(new Color(160 + random.nextInt(96), 
				160 + random.nextInt(96), 160 + random.nextInt(96)));
		int x = 2+random.nextInt(width);
		int y = 2+random.nextInt(height);
		int x1 = random.nextInt(6);
		int y1 = random.nextInt(6);
		g.drawLine(x, y, x+x1 > width - 3 ? width-3 : x+x1, y+y1 > height-3 ? height - 3 : y+y1);
	}

    //   将认证码存入SESSION 
    session.setAttribute("ValidCheckCode", sb.toString());
	System.err.println( "ValidCheckCode : " + sb);
    g.dispose();
   	out.clear(); 
    out = pageContext.pushBody();
    ImageIO.setUseCache(true);
    ImageIO.write(bi, "JPEG", response.getOutputStream());
 
%>

index.js中通过AJAX判断输入验证码是否是无效的所用到从SESSION中去验证码的程序readValidCheckCode.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%
	String validCheckCode = (String) session.getAttribute("ValidCheckCode");
	if (validCheckCode == null)
		validCheckCode = "";
	out.print(validCheckCode);
%>

查看图片附件

5
顶

2
踩

分享到：

如何利用JS快速显示当前页面动态时间 | SVN插件安装过程以及有关SVN各种软件的使 ...

2010-10-12 15:45
浏览 7951
评论(2)
分类:编程语言
查看更多

2 楼 ZiFo 2013-11-11

您好，我刚开始学习Java Web开发，用到了登录验证功能，看到这篇文章很受益，但是里面一下详细的实现比如ImgUtil没有，不知道您可否把该项目的源码发我邮箱？不胜感谢！

sloooooowly@126.com

1 楼 xeq 2013-05-31

常用的汉字编码很有用哦。。。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论