黑马程序员技术交流社区
标题: 【上海校区】用Java代码实现验证码功能 [打印本页]
作者: yuchengmin 时间: 2018-7-25 23:20
标题: 【上海校区】用Java代码实现验证码功能
用Java代码实现验证码功能
一、实现验证码功能的目的在访问登录页面时，为了避免用户使用程序进行恶意登陆，从而造成系统不安全，为了解决恶意登陆，需要生产验证码，让每一次登陆的验证码不一样，进而避免恶意登陆。如图1所示。
图1：用户验证码登陆界面
二、具体代码实现1、前端代码修改修改login.jsp页面，确定验证码图片显示的位置
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：点击更换验证码图片
代码实现，点击图片或文件，都可以更换验证码图片。
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。
作者: 摩西摩西OvO 时间: 2018-7-26 09:10
作者: wuqiong 时间: 2018-7-26 09:39
作者: 不二晨 时间: 2018-7-26 11:30
奈斯，很赞
作者: 吴琼老师 时间: 2018-7-26 15:26
作者: 490489656 时间: 2018-10-17 17:23
666666666666666666666666666666666
作者: 490489656 时间: 2018-10-18 09:04
怎么验证输入的验证码是否正确呢
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
