首页 > 代码库 > 简易的网页验证码

简易的网页验证码

2024-09-14 23:48:13   213人阅读

通过使用Java图形界面设计（AWT）来绘制一个简易的验证码，效果如下：

技术分享

 

整体的效果很low，较为现代的网页界面估计不会使用，但作为后台管理界面所需还可以的，在这里还是进行个记录，以备不时之需

第一步：构建验证码

<%@ page language="java" import="java.util.*,java.awt.*" pageEncoding="UTF-8"%><%@ page import="javax.imageio.*"%><%@ page import="java.awt.image.*" %><!-- 验证码 --><html>  <head>    <title>网上书店</title>  </head>    <body>    <%    response.setHeader("Cache-Control","no-cache");    //内存中创建图像    int width=60,height=20;    BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);    //获取画笔    Graphics g=image.getGraphics();    //设定背景色    g.setColor(new Color(200,200,200));    g.fillRect(0,0,width,height);    //随机数    Random rnd=new Random();    int randNum=rnd.nextInt(8999)+1000;    String randStr=String.valueOf(randNum);    //将验证码存入session    session.setAttribute("randStr",randStr);    //将验证码显示在图像    g.setColor(Color.black);    g.setFont(new Font("",Font.PLAIN,20));    g.drawString(randStr,10,17);    //生成100个干扰点（就是图片上的噪点）    for(int i=0;i<100;i++){      int x=rnd.nextInt(width);      int y=rnd.nextInt(height);      g.drawOval(x,y,1,1);    }    //输出图像    ImageIO.write(image,"JPEG",response.getOutputStream());    out.clear();    out=pageContext.pushBody();     %>  </body></html>

这个JSP页面，名叫code.jsp,其中嵌入的Java代码就是验证码的实现方法。值得注意的有：

int width=60,height=20;BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

其中width，height分别设置外部范围的宽和高，也就是灰色区域的宽和高，BufferedImage.TYPE_INT_RGB设置这个区域是由RGB三色构成，值为int型

   //设定背景色    g.setColor(new Color(200,200,200));

在这里我指定了RGB的颜色，所以呈现一个灰色区域

int randNum=rnd.nextInt(8999)+1000;

使用随机数，这里随机数的范围是1000~9999来输出一个4位的随机数

String randStr=String.valueOf(randNum);//将验证码存入sessionsession.setAttribute("randStr",randStr);

这里将具体数值存入session，名字叫randStr，之后会使用

第二步：在需要的页面引入这个JSP

 

<td>
    <input type="text" name="code" size="10">    <img id="imgValidate" src="code.jsp" onclick="refresh()" title="看不清可单击图片刷新">
</td>

 

增加一个输入项，name="code"，Action中要使用，code.jsp就是我们在上面写的验证码页面，为这个img标签来个id="imgValidate"，JavaScript中要使用，同时增加一个JavaScript方法用于点击验证码进行刷新

JavaScript代码：

  <script type="text/javascript">    function refresh(){     document.getElementById("imgValidate").src="http://www.mamicode.com/code.jsp?"+new Date();    } </script>

根据当前时间进行刷新，保证两次验证码不一样

第三步：在Action中获得用户输入的验证码与实际显示的验证码进行比较

在Action中增加一个名为code的String变量，并生成其set/get方法

private String code;public String getCode() {    return code;}public void setCode(String code) {    this.code = code;}

在需要验证的方法里进行比较：

String randStr=(String) session.getAttribute("randStr");    if(code!=null){     if(code.equals(randStr)){         System.out.println("验证码正确");      }else{         System.out.println("验证码错误");      }}

这里使用到了之前传入session中的名为randStr的值，使其与用户输入的code变量进行比较

 

简易的网页验证码


联系
我们