添加验证码图片

时间 2021-04-14

标签 javascript css java 缓存 session app dom jsp ide 函数栏目 JavaScript 繁體版

原文原文链接

验证码图片是防止恶性注册和登陆的有效手段，今天对系统加了个验证码图片验证，感受效果很好，如今把代码和流程写下：

1.保存验证码图片生成源代码为p_w_picpath.jsp，以下：

<%@ page language="java" import="java.awt.*,java.awt.p_w_picpath.*,java.util.*,javax.p_w_picpathio.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>

    <title>My JSP 'p_w_picpath.jsp' starting page </title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>

    <%!
    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);
            }
    %>
    <%
    //设置页面不缓存
    response.setHeader("Pragma","No-cache");
    response.setHeader("Cache-Control","no-cache");
    response.setDateHeader("Expires", 0);

    // 在内存中建立图象
    int width=60, height=20;
    BufferedImage p_w_picpath = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

// 获取图形上下文
Graphics g = p_w_picpath.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(new Color());
    //g.drawRect(0,0,width-1,height-1);

    // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
    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);
    }

    // 取随机产生的认证码(4位数字)
    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);
    }

// 将认证码存入SESSION
session.setAttribute("checkcode",sRand);

// 图象生效
g.dispose();

// 输出图象到页面
ImageIO.write(p_w_picpath, "JPEG", response.getOutputStream());

out.clear();
out = pageContext.pushBody();
%>

2.在须要验证码的页面中增长以下内容：

//验证码javascript代码
<script type="text/javascript">
function chk_p_w_picpath(){
    var img = document.getElementById("pic");
    img.src = "p_w_picpath.jsp?" + Math.random();
}
</script>

//增长验证码地方的代码

3.Action中验证码验证源代码以下：

  // 先判断验证码是否正确
  String ccode = (String) request.getSession().getAttribute("checkcode");
  String checkcode = logonForm.getCheckcode();
  if (!(checkcode.equals(ccode))) {
   request.setAttribute("checkerror", "验证码输入有误！");
   return mapping.findForward("logonfailure");
  }

到此，验证码图片验证工做已经OK了，点击验证码图片还能够刷新，怎么样，还不错吧！不过这验证码图片比较清晰了，通常是不须要刷新的。

1. 图片验证码
2. python-webdriver中添加cookie，解决添加了图片验证码的问题
3. cas添加验证码
4. asp.net添加验证码
5. 【reCAPTCHA 】添加Google验证码
6. spring security添加验证码
7. Typecho添加验证码
8. spring security4 添加验证码
9. 验证码图片生成和验证
10. 生成图片验证码
更多相关文章...
• XML 验证 - XML 教程
• DTD 验证 - DTD 教程
• Scala 中文乱码解决
• 使用阿里云OSS+CDN部署前端页面与加速静态资源