验证码实现-1

验证码实现

在实际的项目开发中实现登录的时候需要提供验证码功能,主要的目的是防止机械代码暴力破解密码

验证码原理是在服务器端生成验证码信息并且保存在session对象中,再将这个验证码的副本以流的方式发送一份到浏览器显示到页面,用户再将这个验证码填写到表单提交到服务器端和保存在session中的验证码进行比较,

实现验证码

package com.xie;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@WebServlet("/imgCode")
public class RandomCode extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private static int WIDTH = 102;//锟斤拷锟缴碉拷图片锟侥匡拷锟�
	private static int HEIGHT = 50;// 锟斤拷锟缴碉拷图片锟侥高讹拷
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		HttpSession session = request.getSession();
		response.setContentType("image/jpeg");
		ServletOutputStream sos = response.getOutputStream();
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		BufferedImage image = new BufferedImage(WIDTH, HEIGHT,
				BufferedImage.TYPE_INT_RGB);
		Graphics g = image.getGraphics();
		char[] rands = generateCheckCode();
		drawBackground(g);
		drawRands(g, rands);
		g.dispose();
		ByteArrayOutputStream bos = new ByteArrayOutputStream();
		ImageIO.write(image, "JPEG", bos);
		byte[] buf = bos.toByteArray();
		response.setContentLength(buf.length);
		sos.write(buf);  //锟斤拷锟斤拷锟缴碉拷锟斤拷证锟斤拷图片写锟斤拷页锟斤拷
		bos.close();
		sos.close();
		//锟斤拷锟斤拷锟缴碉拷锟斤拷证锟诫保锟芥到session
		session.setAttribute("rand", new String(rands));
	}

	private void drawBackground(Graphics g) {
		g.setColor(new Color(0xDCDCDC));
		g.fillRect(0, 0, WIDTH, HEIGHT);
		for (int i = 0; i < 120; i++) {
			int x = (int) (Math.random() * WIDTH);
			int y = (int) (Math.random() * HEIGHT);
			int red = (int) (Math.random() * 255);
			int green = (int) (Math.random() * 255);
			int blue = (int) (Math.random() * 255);
			g.setColor(new Color(red, green, blue));
			g.drawOval(x, y, 1, 0);
		}
	}

	private void drawRands(Graphics g, char[] rands) {
		// g.setColor(Color.BLUE);
		Random random = new Random();
		int red = random.nextInt(110);
		int green = random.nextInt(50);
		int blue = random.nextInt(50);
		g.setColor(new Color(red, green, blue));
		g.setFont(new Font(null, Font.ITALIC | Font.BOLD, 30));
		g.drawString("" + rands[0], 5, 35);
		g.drawString("" + rands[1], 25, 34);
		g.drawString("" + rands[2], 45, 36);
		g.drawString("" + rands[3], 65, 33);
	}

	private char[] generateCheckCode() {
		String chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
		char[] rands = new char[4];
		for (int i = 0; i < 4; i++) {
			int rand = (int) (Math.random() * 36);
			rands[i] = chars.charAt(rand);
		}
		return rands;
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doGet(request, response);
	}
}

修改表单
login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<base href="/ServletProject/">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<span>${msg}</span>
	<form action="emp/login" method="POST">
		<fieldset>
			<legend>请登录•</legend>
			用户名<input type="text" name="username"><br><br>&nbsp;码š<input type="password" name="pwd"><br><br>
			<img alt="图片不存在" src="imgCode"><a href="javascript:(0)">看不清换一张</a><br><br>
			验证码:<input type="text" name="code">
			<br><br>
			<input type="submit" value="提交">
			<input type="submit" value="重置">
		</fieldset>		
	</form>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

刷新验证码

点击后面的链接重新获取验证码,此时可以重新为图片的src属性赋值

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<base href="/ServletProject/">
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<title>Insert title here</title>
</head>
<body>
	<span>${msg}</span>
	<form action="emp/login" method="POST">
		<fieldset>
			<legend>请登录•</legend>
			用户名<input type="text" name="username"><br><br>&nbsp;码š<input type="password" name="pwd"><br><br>
			<img alt="图片不存在" src="imgCode"><a href="javascript:void(0)">看不清换一张</a><br><br>
			验证码:<input type="text" name="code">
			<br><br>
			<input type="submit" value="提交">
			<input type="submit" value="重置">
		</fieldset>		
	</form>
</body>
</html>

login.js

$(function(){
	$("form a").click(function(){
		$("form img").attr("src","imgCode?ran="+Math.random());
	})
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值