验证码的作用: 防止恶意提交表单(密码猜测工具要逐一尝试每个密码的前提条件是先输入正确的验证码,而验证码是一次性有效的,这样基本上就阻断了密码猜测工具的自动地处理过程)。本次实例的验证码为四字成语。
验证码的流程分析:
验证码的具体实现
一、前端部分:
1). 表单部分代码:
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputPassword3" name="checkCode" placeholder="请输入验证码">
</div>
<div class="col-sm-3">
<img src="/WEB16/checkImg" id="reflashImg"/><!-- src="/WEB16/checkImg" 生成验证码图片的接口地址 -->
</div>
</div>
2). js部分代码,该部分代码作用是点击图片,验证码更换:
<script>
$("#reflashImg").click(function(){this.src="/WEB16/checkImg?t="+ new Date().getTime();});
</script>
二、后台代码:
1). 产生验证码图片的servlet(对应前端中的接口地址:/WEB16/checkImg
):
/**
* 验证码生成程序
*/
public class CheckImgServlet extends HttpServlet {
// 集合中保存所有成语
private List<String> words = new ArrayList<String>();
@Override
public void init() throws ServletException {
// 初始化阶段,读取new_words.txt
// web工程中读取 文件,必须使用绝对磁盘路径
String path = getServletContext().getRealPath("/WEB-INF/new_words.txt");
try {
//BufferedReader reader = new BufferedReader(new FileReader(path));
FileInputStream fis = new FileInputStream(path); //防止读取的中文字符为乱码,所以先读取文件字节输入流
InputStreamReader isr = new InputStreamReader(fis,"UTF-8"); //指定以UTF-8编码读入
BufferedReader reader = new BufferedReader(isr);
String line;
while ((line = reader.readLine()) != null) {
words.add(line);
}
reader.close();
} catch (IOException e) {
e.printStackTrace();
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 禁止缓存
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", -1);
int width = 120;
int height = 30;
// 步骤一 绘制一张内存中图片
BufferedImage bufferedImage = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
// 步骤二 图片绘制背景颜色 ---通过绘图对象
Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔
// 绘制任何图形之前 都必须指定一个颜色
graphics.setColor(getRandColor(200, 250));
graphics.fillRect(0, 0, width, height);
// 步骤三 绘制边框
graphics.setColor(Color.WHITE);
graphics.drawRect(0, 0, width - 1, height - 1);
// 步骤四 四个随机数字
Graphics2D graphics2d = (Graphics2D) graphics;
// 设置输出字体
graphics2d.setFont(new Font("宋体", Font.BOLD, 18));
Random random = new Random();// 生成随机数
int index = random.nextInt(words.size());
String word = words.get(index);// 获得成语
// 定义x坐标
int x = 10;
for (int i = 0; i < word.length(); i++) {
// 随机颜色
graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random
.nextInt(110), 20 + random.nextInt(110)));
// 旋转 -30 --- 30度
int jiaodu = random.nextInt(60) - 30;
// 换算弧度
double theta = jiaodu * Math.PI / 180;
// 获得字母数字
char c = word.charAt(i);
// 将c 输出到图片
graphics2d.rotate(theta, x, 20);
graphics2d.drawString(String.valueOf(c), x, 20);
graphics2d.rotate(-theta, x, 20);
x += 30;
}
// 将验证码内容保存session
request.getSession().setAttribute("checkcode_session", word);
// 步骤五 绘制干扰线
graphics.setColor(getRandColor(160, 200));
int x1;
int x2;
int y1;
int y2;
for (int i = 0; i < 30; i++) {
x1 = random.nextInt(width);
x2 = random.nextInt(12);
y1 = random.nextInt(height);
y2 = random.nextInt(12);
graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
}
// 将上面图片输出到浏览器 ImageIO
graphics.dispose();// 释放资源
//将图片写到response.getOutputStream()中
ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
/**
* 取其某一范围的color
*
* @param fc
* int 范围参数1
* @param bc
* int 范围参数2
* @return Color
*/
private Color getRandColor(int fc, int bc) {
// 取其随机颜色
Random random = new Random();
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);
}
}
该servlet主要作用:
1、在servlet初始化时,读取存储在项目目录下保存有四字成语的.txt文件(/WEB-INF/new_words.txt
),具体格式如下图。
2、生成带有四字成语的验证码图片。
3、将四字成语保存至该请求对应的Session中。
2). 表单提交的对应servlet,验证账号、密码、验证码的正确性:
public class LoginServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
//验证码校验
//获得页面输入的验证
String checkCode_client = request.getParameter("checkCode");
//获得生成图片的文字的验证码
String checkCode_session = (String) request.getSession().getAttribute("checkcode_session");
//删除session中对应保存的验证码,防止服务器缓存引起的错误。
request.getSession().removeAttribute("checkcode_session");
//比对页面的和生成图片的文字的验证码是否一致
if(!checkCode_session.equals(checkCode_client)){
request.setAttribute("loginInfo", "您的验证码不正确");
request.getRequestDispatcher("/login.jsp").forward(request, response);
return;
}
//获得页面的用户名和密码进行数据库的校验
//......
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
至此,验证码功能结束。