为了账号安全,请及时绑定邮箱和手机立即绑定

带用验证码功能的用户登录

标签:
JQuery

  1. )验证码使用一个CheckCodeSerlvet产生,通过<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""/>发送请求,将验证码绑定到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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/day04/CheckCodeServlet"/>                    </td>            </tr>            <tr>                <td colspan="2" align="center">                    <input type="submit" value="提交"/>                </td>            </tr>        </table>    </form>  </body></html>


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消