登录之验证码

       产生验证码,MakeCertPic.java:

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

<%@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();
%>

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

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

       刷新验证码:

function reloadcode(){
  var verify = document.getElementById('code');
  verify.setAttribute('src', 'makeCertPic.jsp?it='+Math.random());
}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java成神之路

Eclipse_常用技巧_02_使用Eclipse进行源码分析

       在代码区中选择需要的类和接口定义,然后右击,选择“Open Type Hiberarchy”,可以在“Hiberarchy View”中看到继承关...

792
来自专栏IT派

前端本地文件操作与上传

前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:

662
来自专栏数据的力量

给Excel工作表建立目录

1444
来自专栏HTML5学堂

2016.07 第4周 群问题分享

HTML+CSS CSS pixels与Device pixels有何区别? 2016.07.25~2016.07.29 核心概念 CSS pixels、Dev...

2805
来自专栏前端儿

简单的文本框输入自动提示

简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来。

541
来自专栏吴老师移动开发

Flutter路由跳转及参数传递

做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过star...

1034
来自专栏ionic3+

【指令篇】自定义mode实现平台样式选择

关于指令的简单介绍可以看此文:【开发指南】(六)ionic3应该善用组件和指令,在此我们命令行创建一个指令:

552
来自专栏林德熙的博客

win10 uwp 如何创建修改保存位图 创建保存图片在 Image 控件使用WriteableBitmap 转换通过读写像素转换 CanvasBitmap

在 UWP 使用底层的图像渲染就是使用 Softwarebitmap ,这个类提供直接数据修改,可以使用这个类进行软渲染。实际上 Softwarebitmap ...

601
来自专栏编程

如何用Vim提高开发效率

背景 虽然笔者是Android开发工程师,但也接触过各种IDE(不限于Android开发)。不同的IDE往往都有不同的快捷键,我们总不能对每种IDE都进行配置吧...

1848
来自专栏州的先生

对Python渗透测试探测器的改善

602

扫码关注云+社区