"忘记密码"功能过程及其实现细节

对于忘记密码功能，一般都是通过2种方式找回：一种是通过预留电话号码发送验证码找回，另一个是通过设定邮箱找回。对于具体的找回流程，参见：http://www.yixieshi.com/ucd/9207.html。

这里结合目前做的项目，详细的说明一下密码找回的过程。这里用的是邮箱找回。根据一般的忘记密码的流程来说明。我采用的流程是：

• 流程

【登录】 --> 【点击忘记密码】 --> 【输入个人邮箱和验证码】 --> 【系统发送邮箱验证】 --> 【用户在限定时间内登录邮箱，点击链接，进入重置密码页面】 --> 【重置密码完毕，点击进入登录界面】。

• 登录页面

先给出我做的登录界面，其中包含"忘记密码"功能

一般登录界面都有“忘记密码”选项，这里不多说。

• "忘记密码"页面

点击"忘记密码"选项后，这时，页面会跳向一个新页面，即“忘记密码”页面。首先给出"忘记密码"按钮对应的跳转代码片段：

<a href = "" style = "padding:0px 0px 0px 18px" onclick = "window.open('forgetPassword.jsp')">忘记密码？</a>  <!-- 打开新窗口 -->

在点击后，跳到新页面：

这里的界面设计是模仿的网页163邮箱的忘记密码，给出链接：http://reg.163.com/getpasswd/RetakePassword.jsp?from=mail163。

该界面中，有几个关键点：一个是验证码的生成，一个是邮箱发送的功能，还一个就是点击确定后的反馈界面。主要包含这3个方面的内容，这3点以下将会详细介绍。

1、验证码生成功能

参考文章：http://bbs.csdn.net/topics/350211255。

关键是jsp和servlet的交互。上面的链接中，主要使用了作者贴出的serlvet代码片段，即随机生成四位0~9的数字，然后生成一些干扰线，最后将生成的图片发送到jsp页面。

下面给出部分后台servlet代码片段：

 public void doGet(HttpServletRequest request, HttpServletResponse response)
                      throws ServletException, IOException
    {
        System.out.println("生成验证码");
        // 清空缓冲区
        response.reset();
 
        // 注意这里的MIME类型
        response.setContentType("image/png");
 
        // 设置页面不缓存
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
 
        // 创建一个图像,验证码显示的图片大小
        BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
 
        // 获取图形上下文
        Graphics g = image.getGraphics();
         
        // 设置背景
        g.setColor(getRandColor(200,250));
        g.fillRect(0, 0, width, height);
 
        for (int i = 0; i < 4; i++)
        {
            drawCode(g, i);
        }
        //添加干扰线
        drawNoise(g, 12);
 
        // 绘制边框
        //g.setColor(Color.gray);
        //g.drawRect(0, 0, width - 1, height - 1);
 
        // 将验证码内容保存进session中，用于验证用户输入是否正确时使用
        HttpSession session = request.getSession(true);
        session.removeAttribute("rand");
        session.setAttribute("rand", codeNumbers);
        // 重设字符串
        codeNumbers = "";
        // 利用ImageIO类的write方法对图像进行编码
        ServletOutputStream sos = response.getOutputStream();
        ImageIO.write(image, "PNG", sos);
        sos.close();
    }

从上面的代码可以看出，基本步骤是：生成4位0~9的随机数，然后设置数字的大小，颜色等；接着设置干扰线，根数，颜色等，然后创建出一个BufferedImage对象，就是验证码的背景图片大小、颜色等；最后将生成好的验证码传送到前台。

注意：这里要将验证码(即图片)传送到前台的jsp界面，需要三个方面的设置：

①设置传送到前台的内容类型，可以是text/html，也可以是image/png。由于这里传送的是验证码，所以设置为后一种。

 // 注意这里的MIME类型
        response.setContentType("image/png");

②在servlet中，还要考虑用什么方法对图像进行编码。

 // 利用ImageIO类的write方法对图像进行编码
        ServletOutputStream sos = response.getOutputStream();
        ImageIO.write(image, "PNG", sos);
        sos.close();

③在jsp页面部分：

<img id="code" src="codeMakerServlet" title="看不清点击刷新验证码" style="cursor : pointer;"  οnclick="return refreshcode()"/>

对应的js函数：

function refreshcode(){
	        document.getElementById("code").src="codeMakerServlet?a="+Math.random()+100;
	        return true;
	    }

其实就是每次点击，都运行一次对应的servlet，servlet在运行后，都会发送一个验证码图片到前台，也就是所谓的"刷新"。

2、填写内容检查

这里用到了一个js库：jquery.validate.min.js。这个只能判断输入的内容是否符合