js 关于验证码cookie

最新推荐文章于 2022-03-24 12:01:42 发布

Monday_B

最新推荐文章于 2022-03-24 12:01:42 发布

阅读量541

点赞数

分类专栏：前端文章标签： cookie 验证码

本文链接：https://blog.csdn.net/Monday_B/article/details/52840111

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网页请求验证码 & 验证码审核 & 看不清换一张

代码：

前台js写点击事件/逻辑判断
jsp生成验证码img

产生问题：

1.某些浏览器能够读取，某些浏览器不能读取验证码
2.某些浏览器支持cookie，某些不支持
3.localhost可以读取，服务器不能读取

解决思路：

1.jsp中设置cookie的路径

 cookie.setPath("/");//表示本project下文件都能访问到该cookie

2.浏览器设置隐私，允许读取cookie
3.查看服务器的系统时间，如果服务器时间与标准时间有差异，调整cookie的存活时间

  cookie.setMaxAge(600);//表示本cookie600秒之后失效

分享部分代码

jsp：

<%@ page contentType="image/jpeg"
         import="java.awt.*,
java.awt.image.*,java.util.*,javax.imageio.*"
         pageEncoding="utf-8"%>
<%!Color getRandColor(int fc, int bc) {
  Random random = new Random();
  if (fc > 255)
    fc = 255;
  if (bc > 255)
    bc = 255;
  int r = fc + random.nextInt(bc - fc);
  int g = fc + random.nextInt(bc - fc);
  int b = fc + random.nextInt(bc - fc);
  return new Color(r, g, b);
}%>
<%
  out.clear();//这句针对resin服务器，如果是tomacat可以不要这句
  response.setHeader("Pragma", "No-cache");
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expires", 0);
  int width = 60, height = 20;
  BufferedImage image = new BufferedImage(width, height,
          BufferedImage.TYPE_INT_RGB);
  Graphics g = image.getGraphics();
  Random random = new Random();
  g.setColor(getRandColor(200, 250));
  g.fillRect(0, 0, width, height);
  g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
  g.setColor(getRandColor(160, 200));
  for (int i = 0; i < 155; i++) {
    int x = random.nextInt(width);
    int y = random.nextInt(height);
    int xl = random.nextInt(12);
    int yl = random.nextInt(12);
    g.drawLine(x, y, x + xl, y + yl);
  }
  String sRand = "";
  for (int i = 0; i < 4; i++) {
    String rand = String.valueOf(random.nextInt(10));
    sRand += rand;
    g.setColor(new Color(20 + random.nextInt(110), 20 + random
            .nextInt(110), 20 + random.nextInt(110)));
    //g.drawString(rand, 13 * i + 6, 16);
    g.drawString(rand, 13 * i + 6, 16);
  }
  // 将认证码存入SESSION
  //session.setAttribute("sRand", sRand);
  g.dispose();
//  out.println("localStorage.setItem('sRand',"+ sRand +");");
  Cookie cookie=new Cookie("sRand", sRand);
  cookie.setMaxAge(600);
  cookie.setPath("/");
  response.addCookie(cookie);
  ImageIO.write(image, "JPEG", response.getOutputStream());
%>

html：

   <img src="image.jsp" id="imgDiv" style="...">

js 验证验证码是否输入正确：

   if(code != $.cookie('sRand')){
            $('input[name="code"]').val("");
            alertError("请填写正确的验证码");
            return;
        }

js 更换验证码：

    function changeImg() {
        console.log("changeImg");
        $('input[name="code"]').val("");//清空输入框
        $("#imgDiv").attr('src','image.jsp?'+Math.random());
    }