`

前台常用的验证码的生成方式

阅读更多
今天整理一下做Web前台常用的验证码的示例,用于登陆提交,以预防程序自动注册提交,可根据实际业务,利用框架技术,异步提交方式处理;主要生成方法类同
处理的servlet如下:

/**
 * @author laker
 */
public class PicServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;
	/**
	 * 图片中出现的随机字符数组
	 */
	private static final char[] CHARS = { '2', '3', '4', '5', '6', '7', '8',
			'9', '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' };
	/**
	 * 产生随机字符对象实例
	 */
	public static Random random = new Random();
	private String randomString = null;

	/**
	 * 获取字符窜方法
	 * 
	 * @return 返回随机字符窜
	 */
	public static String getRandomString() {
		StringBuffer sBuffer = new StringBuffer();
		for (int i = 0; i < 6; i++) {
			sBuffer.append(CHARS[random.nextInt(CHARS.length)]);
		}
		return sBuffer.toString();
	}

	/**
	 * 获取随机的着色方法
	 * 
	 * @return 返回随机的背景着色
	 */
	public static Color getRandomColor() {
		return new Color(random.nextInt(255), random.nextInt(255),
				random.nextInt(255));
	}

	/**
	 * 获取对应的前景着色方法,以例识别
	 * 
	 * @return 获取对应的前景着色
	 */
	public static Color getReverseColor(Color c) {
		return new Color(255 - c.getRed(), 255 - c.getGreen(),
				255 - c.getBlue());
	}

	/**
	 * get方式调用
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * post方式调用
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("更换图片" + request.getParameter("inputString"));
		// 响应设置为图片响应类型
		response.setContentType("image/jpeg");
		if (null != request.getParameter("inputString")
				&& request.getParameter("inputString").toLowerCase()
						.equals(randomString.toLowerCase())) {
			System.out.println("验证码输入确");
			//跳转到成功页面
			String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
			response.sendRedirect(basePath + "success.jsp");
			return;
		} else {
			System.out.println("验证码输入有误");
			// 随机字符窜实例
			randomString = getRandomString();
		}
		// 获取当前session实例,没胡即创建之
		request.getSession(true).setAttribute("randomString", randomString);
		// 定义图片长高
		int width = 100;
		int height = 30;
		// 获取随机着色
		Color color = getRandomColor();
		// 获取对应着色
		Color reverse = getReverseColor(color);
		// 创建图片
		BufferedImage bi = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_BGR);
		Graphics2D gf = bi.createGraphics();
		// 图片样式
		gf.setFont(new Font(Font.SANS_SERIF, Font.BOLD, 16));
		// 着色
		gf.setColor(color);
		// 填充
		gf.fillRect(0, 0, width, height);
		// 前景色
		gf.setColor(reverse);
		// 绘制图片
		gf.drawString(randomString, 18, 20);
		// 按高度随机绘制.出现的位置
		for (int i = 0, n = random.nextInt(100); i < n; i++) {
			gf.drawRect(random.nextInt(width), random.nextInt(width), 1, 1);
		}
		// 输出流
		ServletOutputStream out = response.getOutputStream();
		// 以图片格试编码
		JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
		encoder.encode(bi);
		// 刷新进行显示
		out.flush();
	}

}


表单提交项:
<form id="frm" action="servlet/PicServlet">
			<input type="text" name="inputString">
			<img alt="验证码" src="servlet/PicServlet" id="picture"
				onload="btn.disabled=false;">
			<input type="button" value="换一个" onclick="reloadImage()" id="btn">
			<br>
			<input type="submit" value="提交">
		</form>


JS:
function reloadImage() {
	document.getElementById('btn').disabled = true;
	document.getElementById('picture').src = 'servlet/PicServlet?ts=' + new Date()
			.getTime();
}
分享到:
评论

相关推荐

    生成随机前台验证码图片

    生成随机前台验证码图片

    SpringMVC生成的验证码图片不显示问题及解决方法

    "SpringMVC生成的验证码图片不显示问题及解决方法" 知识点1: SpringMVC验证码图片生成 在SpringMVC中,生成验证码图片需要使用@Controller注解的Controller类,通过@RequestMapping注解的方法来处理验证码图片的...

    Java后端产生验证码后台验证功能的实现代码

    Java后台验证码生成的实现主要包括以下几个步骤: 1. 生成验证码图片:使用BufferedImage类生成验证码图片,设置图片的宽度和高度,并创建一个随机数生成器类用于生成随机验证码。 2. 生成随机验证码:使用Random...

    java生成随机图片验证码

    Java生成随机图片验证码 Java生成随机图片验证码是指使用...Java生成随机图片验证码是一种常用的验证技术,广泛应用于Web开发中。通过了解Java生成随机图片验证码的实现原理和安全性,可以更好地应用于实际项目中。

    c#生成图片验证码代码

    - **作用**:定义了一个点击事件,当用户点击验证码图片时,触发新的验证码生成请求。 - **注意**:`number`变量未定义,应为随机数生成逻辑的一部分。 ##### 2. 后台C#部分 ```csharp public partial class ...

    JAVA验证码生成

    自定义验证码图片大小,颜色,验证码字数,直接返回给前台后台生成好的验证码图片 ,加验证码校验,非常好用!!

    java后台类生成的验证码

    后台验证码类生成验证码图片流回传到前台显示,再通过ajax去后台进行验证

    手机发送验证码和前台页面相关的样式.rar

    以上就是手机发送验证码功能涉及的主要技术点,包括前端与后端的交互、验证码生成与发送、用户验证以及安全性措施。这个压缩包文件“手机发送验证码和前台页面相关的样式”可能包含了实现这些功能的具体代码和设计...

    php生成图片验证码-附五种验证码

    以前输出验证码的时候用过一个方法,在前台用JS生成验证码字符串,再传递到后台用PHP输出验证码图像。这样在验证时就不需要使用$_SESSION传递验证码的值,直接用JS比较生成的字符串和输入的字符串是否相等即可。 ...

    java后台生成验证码.rar

    在我们使用进行系统开发时,为了提高系统的安全性,在登录的时候多数人都会要求输入验证,此次将java后台生成验证码的源码分享,以供学习!

    JS实现获取短信验证码功能(前台代码)

    通常,当用户在网站上注册或进行敏感操作时,系统会发送一个随机生成的一次性验证码到用户的手机上,用户需要输入这个验证码来验证他们的身份。 要实现这个功能,我们需要以下几个步骤: 1. **创建HTML结构**: ...

    SpringBoot实现短信验证码校验方法思路详解

    如果没有超时,就用用户输入的验证码 + 时间 + 自定义秘钥生成MD5值与之前的MD5值比较,如果相等则验证码校验通过,如果不等则说明验证码输入错误校验失败。 原理 验证码的生成和验证原理有点像解方程:xyz经过一...

    thinkphp3.2点击刷新生成验证码

    最后,在实际项目中,还需要注意如何在ThinkPHP3.2中实例化验证码生成类,并确保前台页面中的验证码img标签正确指向验证码生成的控制器方法。通过以上步骤,可以确保验证码功能在ThinkPHP3.2框架中正常运行,并有效...

    java实现汉字验证码

    今天整理了一个java实现的汉字输入验证码 主要包含两个类,一个是生成...实现原理非常简单,将汉字和干扰线生成图片并将汉字保存到session,前台获取每次生成验证码图片并用文本框值和session值比较,功能就这么简单。

    java实现验证码类生成中文验证码

    java实现的汉字输入验证码,主要包含两个类,一个是生成验证码,一个是判断验证码输入是否正确,实现原理非常简单,将汉字和干扰线生成图片并将汉字保存到session,前台获取每次生成验证码图片并用文本框值和session值...

    Java汉字随机验证码

    主要包含两个类,一个是...实现原理比较简单,将汉字和干扰线生成图片并将汉字保存到session,前台获取每次生成的验证码图片进行展示,验证的时候就获取文本框输入的值传到后台与session值进行比较,功能就怎么简单。

    php+js实现极验,拖动滑块验证码验证表单.docx

    4. 图像处理技术在验证码生成中的应用 5. 防盗刷和机器人攻击的方法 技术要点: 1. 使用原生 PHP 实现极验验证码 2. 使用 SESSION 保存验证码的状态 3. 使用 JavaScript 实现无刷新提交和验证 4. 使用图像处理技术...

    ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能示例

    当点击图片时,会触发一个点击事件处理函数,该函数将图片的`src`属性更新为验证码生成URL,并附带一个随机参数,使得浏览器请求到新的验证码图片。 对于验证码的验证,可以采用多种方式。本例中提供了两种方式:一...

    验证码例子VerifyCode

    验证码(VerifyCode)是互联网应用中..."VerifyCode"类作为验证码生成器,提供了实现这一安全功能的基础框架。在实际开发中,可以根据需求进行定制和优化,确保既能有效防止自动化攻击,又不会对用户体验造成过大影响。

Global site tag (gtag.js) - Google Analytics