验证码原理及验证

验证码的原理 验证码的作用:

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

生成验证码

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

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

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("http://www.likecs.com/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="http://www.likecs.com/createRandomcode"> <a href="">换一张</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();

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsspxs.html