登录之验证码

       产生验证码,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 条评论
登录 后参与评论

相关文章

来自专栏Django中文社区

概述

通常情况下,Django 的视图函数(View)是一个纯粹的 Python 函数,它接收一个 request(HTTP 请求),返回一个 response(HT...

2717
来自专栏Keegan小钢

Android项目重构之路:界面篇

在前一篇文章《Android项目重构之路:架构篇》中已经简单说明了项目的架构,将项目分为了四个层级:模型层、接口层、核心层、界面层。其中,最上层的界面,是变化最...

754
来自专栏Python小屋

使用Python写入docx文件并控制字体颜色

背景知识:docx文件的结构分为三层,1、Docment对象表示整个文档;2、Docment包含了Paragraph对象的列表,每个Paragraph对象用来表...

2224
来自专栏Python、Flask、Django

Ajax与php进行数据交互

1102
来自专栏Micro_awake web

说说html 的<!DOCTYPE>声明&标准模式与兼容模式

我们都知道<!DOCTYPE>声明位于文档的最前面,处于<html>标签之前。 <!DOCTYPE>声明不是html标签,它的作用:告知web浏览界面应该使用哪...

20310
来自专栏SpringBoot

bootstrap-datepicker日期范围

实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制,

671
来自专栏前端迷

React与vue的生命周期对照

react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),...

763
来自专栏Angular&服务

防止微信小程序页面多次跳转

793
来自专栏yang0range

Android性能优化概述

对于Android的性能优化,想必大家并不陌生,但是没有真正的总结一下,在此我根据自己平时开发,在结合一些读书笔记,对Android的性能优化,进行一些总结。 ...

703
来自专栏vue

vue实例的生命周期函数

①实例创建时的生命周期函数;②实例执行时的生命周期的函数;③实例销毁时的生命周期的函数。

893

扫码关注云+社区