前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >登录之验证码

登录之验证码

作者头像
高爽
发布2017-12-28 14:48:18
1.6K0
发布2017-12-28 14:48:18
举报
文章被收录于专栏:高爽的专栏

       产生验证码,MakeCertPic.java:

代码语言:javascript
复制
public class MakeCertPic {
	
	// 验证码图片中可以出现的字符集,可根据需要修改
	private char mapTable[] = 
		{ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
		  'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
		  'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8',
		  '9' };

	/**
	 * 功能:生成彩色验证码图片 参数width为生成图片的宽度,参数height为生成图片的高度,参数os为页面的输出流
	 * 在getCertPic()方法中,首先创建了一个内存图像的实例对象,再得到此内存图像的图形上下文对象,
	 * 接着再用这个上下文对象画背景、边框。接下来,随机生成4个在mapTable[]数组中的字符,组成字符串作为验证字符串,
	 * 并输出在内存中,为了造成一定的干扰,随机画了10个干扰点,如果要加大干扰效果,可再多画一些点。
	 */
	public String getCertPic(int width, int height, OutputStream os) {
		if (width <= 0)
			width = 60;
		if (height <= 0)
			height = 20;
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		// 获取图形上下文
		Graphics g = image.getGraphics();
		// 设定背景色
		g.setColor(new Color(0xDCDCDC));
		g.fillRect(0, 0, width, height);
		// 画边框
		g.setColor(Color.black);
		g.drawRect(0, 0, width - 1, height - 1);
		// 取随机产生的认证码
		String strEnsure = "";
		// 4代表4位验证码,如果要生成更多位的认证码,则加大数值
		for (int i = 0; i < 4; ++i) {
			strEnsure += mapTable[(int) (mapTable.length * Math.random())];
		}
		// 将认证码显示到图像中,如果要生成更多位的认证码,增加drawString语句
		g.setColor(Color.black);
		g.setFont(new Font("Atlantic Inline", Font.PLAIN, 18));
		String str = strEnsure.substring(0, 1);
		g.drawString(str, 8, 17);
		str = strEnsure.substring(1, 2);
		g.drawString(str, 20, 15);
		str = strEnsure.substring(2, 3);
		g.drawString(str, 35, 18);
		str = strEnsure.substring(3, 4);
		g.drawString(str, 45, 15);
		// 随机产生10个干扰点
		Random rand = new Random();
		for (int i = 0; i < 10; i++) {
			int x = rand.nextInt(width);
			int y = rand.nextInt(height);
			g.drawOval(x, y, 1, 1);
		}
		// 释放图形上下文
		g.dispose();
		try {
			// 输出图像到页面
			ImageIO.write(image, "JPEG", os);
		} catch (IOException e) {
			return "";
		}
		return strEnsure;
	}
}

       生成图片,makeCertPic.jsp

代码语言:javascript
复制
<%@page contentType="image/jpeg;charset=UTF-8"%>
<jsp:useBean id="image" scope="page" class="com.online.util.MakeCertPic" />
<!-- 这里把生成的验证码作为session变量写入,因此在接收登录页面输入的数据页面中,
	 可用用户输入的验证码和这个session变量作比较,如果相同则表示验证通过。 -->
<%
	String str = image.getCertPic(0, 0, response.getOutputStream());
	// 将认证码存入SESSION
	session.setAttribute("certCode", str);  
	out.clear();
	out = pageContext.pushBody();
%>

       登录页面或者其它页面得到验证码:

代码语言:javascript
复制
<img src="makeCertPic.jsp" id="code" onclick="reloadcode()" style="cursor: pointer;" alt="看不清楚,换一张" />

       刷新验证码:

代码语言:javascript
复制
function reloadcode(){
  var verify = document.getElementById('code');
  verify.setAttribute('src', 'makeCertPic.jsp?it='+Math.random());
}

       这里的makeCertPic.jsp路径需要按照自己项目情况重新处理,现在很多网站都对登录时的验证码做这样处理,为了好的用户体验,前3次登录不需要输入验证码,如果3次全输入错误,第4次登录,就会需要输入验证码,这样做的好处是,既有好的用户体验又可以防止暴力破解。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2012-09-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档