验证码的原理

验证码的作用：

　验证码是是一种区分用户是计算机还是人的公共全自动程序，可以防止：恶意破解密码、刷票、论坛灌水、有效防止某个黑客对某一特定注册用户，用特定程序暴力破解方式进行不断的登录尝试。实际上验证码是现在很多网站通行的方式，我们利用比较简易的方式实现了这个功能。

生成验证码

生成验证码这个功能已经特别成熟了在网上可以找到很多资源

以下是生成验证码的相关代码：

package com._yhnit.randomcode;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 *  生成验证码的Servlet
 * @author yhn
 *
 */
@WebServlet("/createRandomcode")
public class RandomCodeServlet extends HttpServlet{

	private static final long serialVersionUID = 1L;
	 public RandomCodeServlet() {
	        super();

	    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doPost(request, response);
    }

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

        // 响应头信息
        response.setHeader("Pragma", "No-Cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expries", 0);

        // 随机数生成类
        Random random = new Random();

        // 定义验证码的位数
        int size = 5;

        // 定义变量保存生成的验证码
        String vCode = "";
        char c;
        // 产生验证码
        for (int i = 0; i < size; i++) {
            // 产生一个26以内的随机整数
            int number = random.nextInt(26);
            // 如果生成的是偶数，则随机生成一个数字
            if (number % 2 == 0) {
                c = (char) ('0' + (char) ((int) (Math.random() * 10)));
                // 如果生成的是奇数，则随机生成一个字母
            } else {
                c = (char) ((char) ((int) (Math.random() * 26)) + 'A');
            }
            vCode = vCode + c;
        }

        // 保存生成的5位验证码
        request.getSession().setAttribute("RANDOMCODE_IN_SESSION", vCode);

        // 验证码图片的生成
        // 定义图片的宽度和高度
        int width = (int) Math.ceil(size * 20);
        int height = 30;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // 获取图片的上下文
        Graphics gr = image.getGraphics();
        // 设定图片背景颜色
        gr.setColor(Color.WHITE);
        gr.fillRect(0, 0, width, height);
        // 设定图片边框
        gr.setColor(Color.GRAY);
        gr.drawRect(0, 0, width - 1, height - 1);
        // 画十条干扰线
        for (int i = 0; i < 5; i++) {
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int x2 = random.nextInt(width);
            int y2 = random.nextInt(height);
            gr.setColor(randomColor());
            gr.drawLine(x1, y1, x2, y2);
        }
        // 设置字体，画验证码
        gr.setColor(randomColor());
        gr.setFont(randomFont());
        gr.drawString(vCode, 10, 22);
        // 图像生效
        gr.dispose();
        // 输出到页面
        ImageIO.write(image, "JPEG", response.getOutputStream());

    }

    // 生成随机的颜色
    private Color randomColor() {
        int red = r.nextInt(150);
        int green = r.nextInt(150);
        int blue = r.nextInt(150);
        return new Color(red, green, blue);
    }

    private String[] fontNames = { "宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312" };
    private Random r = new Random();

    // 生成随机的字体
    private Font randomFont() {
        int index = r.nextInt(fontNames.length);
        String fontName = fontNames[index];// 生成随机的字体名称
        int style = r.nextInt(4);
        int size = r.nextInt(3) + 24; // 生成随机字号, 24 ~ 28
        return new Font(fontName, style, size);
    }
}

上述代码中定义了生成5位数字+字母的验证码

生成的验证码将存放到两个地方：

Session中
放到图片上去

最重要的是将验证码存入Session，因为后台校验验证码是否正确要依靠这一步

// 保存生成的5位验证码
 request.getSession().setAttribute("RANDOMCODE_IN_SESSION", vCode);

前端页面实现验证码的切换

在很多应用中，我们都会看见验证码的切换操作

比如：点击图片切换，或者点击后面文字（类如看不清，换一张）进行切换

其实切换很简单 只是将图片元素的src 属性变换一下就可以完成

这里给验证码图片和换一张文字添加点击事件

验证码：<input type="text" maxlength="5" required="required" name ="randomcode">
	   <img  src="/createRandomcode" style="cursor: pointer;" onclick="change();"  id="randomcodeImg">
		<a href="" onclick="change();">换一张</a><br>

点击事件是一个名字为change函数

function change(){
	// 因为有缓存  所以加一个随机数  表示不同的请求
	document.getElementById("randomcodeImg").src="/createRandomcode?"+new Date().getTime();	
	}

注意这里：src不能也写 /createRandomcode，因为浏览器有缓存因为之前的src就是它

所以点击时不会发生切换，所以我们可以加个随机数代表每一次都是一个新的请求。

这样就可以实现验证码的切换了。

验证码的后台验证

验证其实也很简单,只需要把输入的和图片中的验证码进行对比即可

获取输入的验证码：

String code = req.getParameter("randomcode");

获取图片中的验证码：

(生成的时候已经存在Session中这时只需要从Session中取出即可)

String Imgcode = req.getSession().getAttribute("RANDOMCODE_IN_SESSION").toString();

两者进行对比验证:

if (!code.equalsIgnoreCase(Imgcode)) {
    // 设置一些错误提示  提示用户输入错误 
	req.getSession().setAttribute("errorMes", "请输入正确的验证码或已经过期");
	req.getRequestDispatcher("randomcode/RandomCodeLogin.jsp").forward(req, resp);
	return;
}
		
// 此时验证码成功
System.out.println("验证码成功");
// 避免重复提交  去除Session中这一次验证码
req.getSession().removeAttribute("RANDOMCODE_IN_SESSION");

// 继续验证用户名和密码  ....

验证码验证成功之后要销毁Session中这次的验证码（验证码一次性使用）避免重复提交

// 避免重复提交  去除Session中这一次验证码
req.getSession().removeAttribute("RANDOMCODE_IN_SESSION");

验证码原理及验证

验证码的原理

验证码的作用：

生成验证码

前端页面实现验证码的切换

验证码的后台验证

猜你喜欢