JavaWeb 登录实现图片验证码

缺乏、安全感 2022-04-10 03:25 562阅读 0赞

主要思路：

  1. 1） 打开页面生成随机验证码图片， 可更换图片，通过java后端实现。同时把生成的验证码保存在session作用域中。
  3. 2）用户输入验证码，提交
  5. 3）获取页面提交的验证码 和 保存在session作用域中的验证码，两者比较，相等后删除保存在session作用域中的验证码。

1、页面

  1. <body>
  2.     <h4>登录页面 </h4>
  3.     <form action="<%=request.getContextPath() %>/login" method="post" id="loginForm">
  4.         用户名： <input type="text" id="username" name="username" required="required"/><br/>
  5.         密    码： <input type="password" id="password" name="password"/><br/>
  6.         验证码:<input type="text" name="verificationCode"/>
  7.                 <!-- src 此时使用loginServlet的get提交方法， 使用框架时，对应验证方法名的路径 -->
  8.               <img id="imgObj" alt="验证码" src="<%=request.getContextPath() %>/login" onclick="changeImg()">
  9.               <a href="javascript: void(0)" onclick="changeImg()">换一张</a> <br/> 
  10.         <input type="submit" value="登录" id ="submitbtn"/>
  11.     </form>
  12.     <br/>
  13.     <span style="color:red;">${errorMsg }</span>
  14. </body>
  15. <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
  16. <script type="text/javascript">
  17.     function changeImg(){
  18.         // 刷新图片 
  19.         var imgObj = $("#imgObj");
  20.         var src = imgObj.attr("src");
  21.         imgObj.attr("src", changeUrl(src));
  22.     };
  23.     //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳  
  24.     function changeUrl(url){
  25.         var timestamp  = (new Date()).valueOf();
  26.         var index = url.indexOf("?",url);
  27.         if (index > 0) {  
  28.             url = url.substring(0, url.indexOf( "?"));   
  29.         }  
  30.         if ((url.indexOf("&") >= 0)) {  
  31.             url = url + "×tamp=" + timestamp ;  
  32.         } else {  
  33.             url = url + "?timestamp=" + timestamp ;  
  34.         }  
  35.         return url; 
  36.     }
  37. </script>

2、servlet

  1. public class LoginServlet extends HttpServlet{
  2.     private static final long serialVersionUID = 1L;
  3.     @Override
  4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  5.         //生成验证码
  6.         verificationCode(request, response);
  7.         doPost(request, response);
  8.     }
  10.     @Override
  11.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  12.         request.setCharacterEncoding("utf-8");
  13.         response.setCharacterEncoding("utf-8");
  14.         response.setContentType("text/html;charset=UTF-8");
  16.         //获得登录的账号和密码
  17.         String username = request.getParameter("username");
  18.         String password = request.getParameter("password");
  19.         String requestVerificationCode = request.getParameter("verificationCode");
  20.         System.out.println(requestVerificationCode);
  21.         HttpSession session = request.getSession();
  22.         String sessionVerificationCode = (String) session.getAttribute("verificationCode");
  23.         //验证验证码（忽略验证码大小写）
  24.         if(sessionVerificationCode.equalsIgnoreCase(requestVerificationCode)) {
  25.             session.removeAttribute("verificationCode"); 
  26.                         if(username.equals("admin") && password.equals("admin123")){//登录成功
  27.                 //重定向到index.jsp
  28.                 response.sendRedirect(request.getContextPath() +"/index.jsp"); 
  29.             }else{//登录失败
  30.                 request.setAttribute("errorMsg", "用户名或密码不正确");
  31.                 request.getRequestDispatcher("/login.jsp").forward(request, response);
  32.             }
  33.         }else {
  34.             request.setAttribute("errorMsg", "验证码不正确！");
  35.             request.getRequestDispatcher("/login.jsp").forward(request, response);
  36.         }
  38.     }
  40.     public void verificationCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
  41.         //设置响应的类型格式为图片格式， 并禁止缓存
  42.         response.setContentType("image/jpg");
  43.         response.setHeader("Pragma", "no-cache");
  44.         response.setHeader("Cache-Control", "no-cache");
  45.         response.setDateHeader("Expires", 0);
  47.         VerificationCodeImgUtil vCode = new VerificationCodeImgUtil(120,25,5,50);
  48.         //把随机产生的验证码保存在session作用域中
  49.         request.getSession().setAttribute("verificationCode", vCode.getValidateCode());
  50.         vCode.write(response.getOutputStream(), "jpg");
  51.     }
  53. }

3、VerificationCodeImgUtil 类

  1.  [Java图片验证码生成工具类][Java]

4、测试

2018122415434259.png 20181224154242696.png

发表评论

表情：
评论列表 （有 0 条评论，562人围观）

还没有评论，来说两句吧...

相关阅读

    相关 登录图片验证码

    页面刷新时，自动发送获取验证码到服务端 输入验证码登录，登录成功返回token 通过token获取用户详情，跳转主页 //获取验证码图片 @GetMappi

    小咪咪小咪咪/ 0 赞/ 21 阅读