带用验证码功能的用户登录 -学习笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带用验证码功能的用户登录 -学习笔记相关的知识,希望对你有一定的参考价值。

  1. )验证码使用一个CheckCodeSerlvet产生,通过<img src=""/>发送请求,将验证码绑定到HttpSession中
  2. )产生的验证码一定要在输出到浏览器之前绑定到HttpSession中
  3. )设置验证码禁止缓存要在输出到浏览器之前
  4. )所有响应头的设置放置在最先

java代码

LoginServlet


import java.io.IOException;
import java.io.PrintWriter;
import java.util.zip.Checksum;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        // 收集客户端填入的验证码
        String checkCodeClient = request.getParameter("checkCodeClient");

        // 取得服务端填入的验证码
        String checkCodeServer = (String) request.getSession().getAttribute(
                "checkCodeServer");
        // 设置字体
        response.setContentType("text/html;charset=UTF-8");
        //判断的。通过客户端与服务端
        if (checkCodeClient != null && checkCodeClient.trim().length() > 0
                && checkCodeServer != null
                && checkCodeServer.equals(checkCodeClient)) {
            response.getWriter().write("验证码正确");

        } else {
            response.getWriter().write("验证码出错");
        }

    }

}

CheckCodeServlet


import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class CheckCodeServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //缓存
        response.setHeader("expires","-1");
        response.setHeader("cache-control","no-cache");  //没有缓成
        response.setHeader("pragma","no-cache");
        String token = Token.getNum();
        //将验证码绑定到域对象
        HttpSession session = request.getSession();
        session.setAttribute("checkCodeServer",token);
        //在内存生存一个图片
        BufferedImage image = new BufferedImage(50,25,BufferedImage.TYPE_INT_RGB);

        //获取画笔
        Graphics g = image.getGraphics();
        //设置大小
        g.drawString(token,15,15);

        //增加干扰线
        for(int i=0;i<10;i++)
        {
            Random r = new Random();
            int x1 = r.nextInt(50);
            int y1 = r.nextInt(25);
            g.drawLine(x1, y1, x1+4,y1+4);
        }

        //写到浏览器
        ImageIO.write(image,"JPG",response.getOutputStream());

    }

}

//用于产生随机数
class Token{
    public static String getNum(){
        Random r = new Random();
        int num = r.nextInt(10000);
        return num + "";
    }
}

html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>login.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <form action="/day04/LoginServlet" method="post">
        <table border="1" align="center">
        <caption>用户登陆验证码</caption>
            <tr>
                <th>用户名</th>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <th>密码</th>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr>
                <th>验证码</th>
                <td>
                    <input type="text" name="checkCodeClient"/>
                </td>
                <td>
                    <img src="/day04/CheckCodeServlet"/>    
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="提交"/>
                </td>
            </tr>
        </table>
    </form>
  </body>
</html>

页面显示:
技术分享图片

以上是关于带用验证码功能的用户登录 -学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

登录框Tricks

登录框Tricks

PHP实现邮箱验证码验证功能

对着登录框一顿暴捶

antd-Vue实现Login登录页面布局-附带验证码验证功能-案例

antd-Vue实现Login登录页面布局-附带验证码验证功能-案例