Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说「JavaWeb 19-11」案例-验证码展示与校验,希望能够帮助你!!!。

#头条创作挑战赛#

9.4.6 验证码-展示

0. 需求分析

展示验证码：展示验证码图片，并可以点击切换

验证码的生成是通过工具类来实现的，具体的工具类参考

04-资料\1. 登录注册案例\CheckCodeUtil.java

在该工具类中编写main方法进行测试:

 public static void main(String[] args) throws IOException {
     //生成验证码的图片位置
     OutputStream fos = new FileOutputStream("d://a.jpg");
     //checkCode为最终验证码的数据
     String checkCode = CheckCodeUtil.outputVerifyImage(100, 50, fos, 4);
     System.out.println(checkCode);
 }
 

生成完验证码以后，我们就可以知晓:

• 验证码就是使用Java代码生成的一张图片
• 验证码的作用:防止机器自动注册，攻击服务器

2. 实现流程分析

(1)前端发送请求给CheckCodeServlet

(2)CheckCodeServlet接收到请求后，生成验证码图片，将图片用Reponse对象的输出流写回到前端

思考:如何将图片写回到前端浏览器呢?

(1)Java中已经有工具类生成验证码图片，测试类中只是把图片生成到磁盘上 (2)生成磁盘的过程中使用的是OutputStream流，如何把这个图片生成在页面呢? (3)前面在将Reponse对象的时候，它有一个方法可以获取其字节输出流，getOutputStream() (4)综上所述，我们可以把写往磁盘的流对象更好成Response的字节流，即可完成图片响应给前端

3. 具体实现

(1)修改Register.jsp页面，将验证码的图片从后台获取

 <tr>
     <td>验证码</td>
         <td class="inputs">
         <input name="checkCode" type="text" id="checkCode">
         <img id="checkCodeImg" src="/brand-demo/checkCodeServlet">
         <a href="#" id="changeImg" >看不清？</a>
     </td>
 </tr>
 
 <script>
     document.getElementById("changeImg").onclick = function () {
         //路径后面添加时间戳的目的是避免浏览器进行缓存静态资源
         document.getElementById("checkCodeImg").src = "/brand-demo/checkCodeServlet?"+new Date().getMilliseconds();
     }
 </script>

(2)编写CheckCodeServlet类，用来接收请求生成验证码

 @WebServlet("/checkCodeServlet")
 public class CheckCodeServlet extends HttpServlet {
     @Override
     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         // 生成验证码
         ServletOutputStream os = response.getOutputStream();
         String checkCode = CheckCodeUtil.outputVerifyImage(100, 50, os, 4);
     }
 
     @Override
     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         this.doGet(request, response);
     }
 }

9.4.7验证码-校验

0. 需求

• 判断程序生成的验证码 和 用户输入的验证码 是否一样，如果不一样，则阻止注册
• 验证码图片访问和提交注册表单是两次请求，所以要将程序生成的验证码存入Session中

思考:为什么要把验证码数据存入到Session中呢?

• 生成验证码和校验验证码是两次请求，此处就需要在一个会话的两次请求之间共享数据
• 验证码属于安全数据类的，所以我们选中Session来存储验证码数据。

2. 实现流程分析

(1)在CheckCodeServlet中生成验证码的时候，将验证码数据存入Session对象

(2)前端将验证码和注册数据提交到后台，交给RegisterServlet类

(3)RegisterServlet类接收到请求和数据后，其中就有验证码，和Session中的验证码进行对比

(4)如果一致，则完成注册，如果不一致，则提示错误信息

3. 具体实现

(1)修改CheckCodeServlet类，将验证码存入Session对象

 @WebServlet("/checkCodeServlet")
 public class CheckCodeServlet extends HttpServlet {
     @Override
     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
         // 生成验证码
         ServletOutputStream os = response.getOutputStream();
         String checkCode = CheckCodeUtil.outputVerifyImage(100, 50, os, 4);
 
         // 存入Session
         HttpSession session = request.getSession();
         session.setAttribute("checkCodeGen",checkCode);
 
 
     }
 
     @Override
     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         this.doGet(request, response);
     }
 }

(2)在RegisterServlet中，获取页面的和session对象中的验证码，进行对比

 package com.itheima.web;
 
 import com.itheima.pojo.User;
 import com.itheima.service.UserService;
 
 import javax.servlet.ServletException;
 import javax.servlet.annotation.WebServlet;
 import javax.servlet.http.*;
 import java.io.IOException;
 
 @WebServlet("/registerServlet")
 public class RegisterServlet extends HttpServlet {
     private UserService service = new UserService();
 
     @Override
     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 获取用户名和密码数据
         String username = request.getParameter("username");
         String password = request.getParameter("password");
 
         User user = new User();
         user.setUsername(username);
         user.setPassword(password);
 
         // 获取用户输入的验证码
         String checkCode = request.getParameter("checkCode");
 
         // 程序生成的验证码，从Session获取
         HttpSession session = request.getSession();
         String checkCodeGen = (String) session.getAttribute("checkCodeGen");
 
         // 比对
         if(!checkCodeGen.equalsIgnoreCase(checkCode)){
 
             request.setAttribute("register_msg","验证码错误");
             request.getRequestDispatcher("/register.jsp").forward(request,response);
 
             // 不允许注册
             return;
         }
         //2. 调用service 注册
         boolean flag = service.register(user);
         //3. 判断注册成功与否
         if(flag){
              //注册功能，跳转登陆页面
 
             request.setAttribute("register_msg","注册成功，请登录");
             request.getRequestDispatcher("/login.jsp").forward(request,response);
         }else {
             //注册失败，跳转到注册页面
 
             request.setAttribute("register_msg","用户名已存在");
             request.getRequestDispatcher("/register.jsp").forward(request,response);
         }
 
 
     }
 
     @Override
     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         this.doGet(request, response);
     }
 }

至此，用户的注册登录功能就已经完成了。

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。