【九月打卡】第3天 三小时轻松掌握常用验证码制作

课程名称：三小时轻松掌握常用验证码制作-第4章

课程章节：Kaptcha矿建验证码

课程讲师：十方上下

课程内容：

1. 配置方式实现

1. 导入kaptcha相关jar包。

2. 在web.xml中进行配置

   <servlet>
           <servlet-name>KaptchaServlet</servlet-name>
           <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
       </servlet>
       <servlet-mapping>
           <servlet-name>KaptchaServlet</servlet-name>
           <url-pattern>/three</url-pattern>
       </servlet-mapping>
   

• Kaptcha有需对属性，设置不同的属性可以修改验证码图片的样式。

2. 代码方式实现

1. 编写生成验证码图片的Servlet.

   package com.zhoufengbin.servlet;
   
   import com.google.code.kaptcha.Constants;
   import com.google.code.kaptcha.impl.DefaultKaptcha;
   import com.google.code.kaptcha.util.Config;
   
   import javax.imageio.ImageIO;
   import javax.servlet.ServletException;
   import javax.servlet.ServletOutputStream;
   import javax.servlet.http.HttpServlet;
   import javax.servlet.http.HttpServletRequest;
   import javax.servlet.http.HttpServletResponse;
   import java.awt.image.BufferedImage;
   import java.io.IOException;
   import java.util.Properties;
   
   public class KaptchaServlet2 extends HttpServlet {
   
       @Override
       protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
           this.doPost(req, resp);
       }
   
       @Override
       protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
           //设置属性集
           Properties properties = new Properties();
           properties.put("kaptcha.border", "no");
           properties.put("kaptcha.textproducer.font.color", "red");
           properties.put("kaptcha.image.width", "80");
           properties.put("kaptcha.image.height", "30");
           properties.put("kaptcha.textproducer.char.string", "012345679");
           properties.put("kaptcha.textproducer.char.length", "4");
           properties.put("kaptcha.textproducer.char.space", "5");
           properties.put("kaptcha.textproducer.font.size", "24");
           properties.put("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
           properties.put("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.ShadowGimpy");
           Config config = new Config(properties);
           //创建Kaptcha对象
           DefaultKaptcha kaptcha = new DefaultKaptcha();
           kaptcha.setConfig(config);
           //生成验证码并保存Session
           String code = kaptcha.createText();
           req.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, code );
           //生成图片
           BufferedImage image = kaptcha.createImage(code);
           //返回图片
           ServletOutputStream outputStream = resp.getOutputStream();
           ImageIO.write(image, "png",outputStream);
       }
   }
   

2. 创建Servlet映射。

   <servlet>
           <servlet-name>KaptchaServlet2</servlet-name>
           <servlet-class>com.zhoufengbin.servlet.KaptchaServlet2</servlet-class>
       </servlet>
       <servlet-mapping>
           <servlet-name>KaptchaServlet2</servlet-name>
           <url-pattern>/three_2</url-pattern>
       </servlet-mapping>
   

3. 创建验证校验Servlet.

   package com.zhoufengbin.servlet;
   
   import javax.servlet.ServletException;
   import javax.servlet.http.HttpServlet;
   import javax.servlet.http.HttpServletRequest;
   import javax.servlet.http.HttpServletResponse;
   import java.io.IOException;
   
   public class ValiKaptchaServlet2 extends HttpServlet {
   
       @Override
       protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
           this.doPost(req, resp);
       }
   
       @Override
       protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
           //获取用户发来的验证码
           String parameter = req.getParameter("inCode").toLowerCase();
           //获取session中的验证码
           String code = (String) req.getSession().getAttribute("code");
           if (parameter.equals(code)){
               resp.sendRedirect("index.jsp");
           }else {
               String err = "验证码码输入错误，请从新输入！";
               req.getSession().setAttribute("err", err);
               //返回上一页
               String url = req.getHeader("Referer");
               resp.sendRedirect(url);
           }
   
       }
   }
   

4. 配置验证Serlvet映射

   <servlet>
           <servlet-name>ValiKaptchaServlet2</servlet-name>
           <servlet-class>com.zhoufengbin.servlet.ValiKaptchaServlet2</servlet-class>
       </servlet>
       <servlet-mapping>
           <servlet-name>ValiKaptchaServlet2</servlet-name>
           <url-pattern>/three_22</url-pattern>
       </servlet-mapping>
   

5. jsp页面

   <%--
     Created by IntelliJ IDEA.
     User: zfb22
     Date: 2022/9/5
     Time: 20:44
     To change this template use File | Settings | File Templates.
   --%>
   <%@ page contentType="text/html;charset=UTF-8" language="java" %>
   <html>
   <head>
       <title>随机字符串验证码</title>
       <style>
           .code_a {
               color: #0000ff;
               font-size:12px;
               text-decoration: none;
               cursor: pointer;
           }
           #imgCode {
                cursor: pointer;
           }
       </style>
       <script>
           function changcode(){
               var imgCode = document.getElementById("imgCode");
               imgCode.src = "three?"+Math.random();
           }
       </script>
   </head>
   <body>
   <form action="three_22" method="post">
       <label>验证码</label>
       <input type="text" id="inCode" name="inCode"/><br>
       <img src="three" align="center" id="imgCode" onclick="changcode()"/>
       <a class="code_a" onclick="changcode()" >换一张</a><br>
       <input type="submit" value="登录"/>
   </form>
   <div style="color:red">${err}</div>
   
   </body>
   </html>
   
   

课程截图：