用Java代码实现验证码功能
一、实现验证码功能的目的在访问登录页面时,为了避免用户使用程序进行恶意登陆,从而造成系统不安全,为了解决恶意登陆,需要生产验证码,让每一次登陆的验证码不一样,进而避免恶意登陆。如图1所示。 图1:用户验证码登陆界面 二、具体代码实现1、前端代码修改修改login.jsp页面,确定验证码图片显示的位置 1 <div class="col-sm-3"> 2 <!-- 当前验证码图片位置 --> 3 <img id="img" src="${pageContext.request.contextPath}/checkcodeServlet"/> 4 </div> 注解: 这里提供的是jsp页面,提交路径是checkcodeServlet。 2、后台Java代码实现CheckcodeServlet 具体代码实现。 1 import java.awt.Color; 1 import java.awt.Font; 2 import java.awt.Graphics; 3 import java.awt.image.BufferedImage; 4 import java.io.IOException; 5 import java.util.Random; 6 import javax.imageio.ImageIO; 7 import javax.servlet.ServletException; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 public class CheckcodeServlet extends HttpServlet { 12 private static final long serialVersionUID = 1L; 13 14 protected void doGet(HttpServletRequest request, HttpServletResponse response) 15 throws ServletException, IOException { 16 // gui 生成图片 17 // 1 高和宽 18 int height = 30; 19 int width = 60; 20 String data = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz"; 21 Random random = new Random(); 22 // 2 创建一个图片 23 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); 24 // 3 获得画板 25 Graphics g = image.getGraphics(); 26 // 4 填充一个矩形 27 // * 设置颜色 28 g.setColor(Color.BLACK); 29 g.fillRect(0, 0, width, height); 30 g.setColor(Color.WHITE); 31 g.fillRect(1, 1, width - 2, height - 2); 32 // * 设置字体 33 g.setFont(new Font("宋体", Font.BOLD | Font.ITALIC, 25)); 34 StringBuilder sb = new StringBuilder();// 获取验证码字符信息 35 // 5 写随机字 36 for (int i = 0; i < 4; i++) { 37 // 设置颜色--随机数 38 g.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255))); 39 // 获得随机字 40 int index = random.nextInt(data.length()); 41 String str = data.substring(index, index + 1); 42 sb.append(str); 43 // 写入 44 g.drawString(str, width / 6 * (i + 1), 20); 45 } 46 // 验证码保存到session对象中 47 request.getSession().setAttribute("checkcode", sb.toString()); 48 // 6 干扰线 49 for (int i = 0; i < 3; i++) { 50 // 设置颜色--随机数 51 g.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255))); 52 // 随机绘制先 53 g.drawLine(random.nextInt(width), random.nextInt(height), random.nextInt(width), random.nextInt(height)); 54 // 随机点 55 g.drawOval(random.nextInt(width), random.nextInt(height), 2, 2); 56 } 57 58 // end 将图片响应给浏览器 59 ImageIO.write(image, "jpg", response.getOutputStream()); 60 } 61 protected void doPost(HttpServletRequest request, HttpServletResponse response) 62 throws ServletException, IOException { 63 doGet(request, response); 64 } 65 } 3、配置文件的修改编写web.xml文件 1 <servlet> 2 <servlet-name>CheckcodeServlet</servlet-name> 3 <servlet-class>cn.itcast.web.CheckcodeServlet</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>CheckcodeServlet</servlet-name> 7 <url-pattern>/checkcodeServlet</url-pattern> 8 </servlet-mapping> 二、点击验证码实现切换功能如图2所示,点击验证码图片或者点击文字“换一张”,可以更改验证码内容。 图2:点击更换验证码图片 代码实现,点击图片或文件,都可以更换验证码图片。 5 <div class="col-sm-3"> 6 <!-- 当前验证码图片位置 --> 7 <img id="img" src="${pageContext.request.contextPath}/checkcodeServlet"/> 8 </div> 9 <script type="text/javascript"> 10 function changeImg(){ 11 document.getElementById('img').src="${pageContext.request.contextPath}/checkcodeServlet?e="+new Date().getTime(); 12 } 13 </script> 注解: 这里提供的是jsp页面,提交路径是checkcodeServlet。
|