Jsp制作验证码

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

验证码

验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上用验证码是现在很多网站通行的方式，我们利用比较简易的方式实现了这个功能。这个问题可以由计算机生成并评判，但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题，所以回答出问题的用户就可以被认为是人类。

运行环境：tomcat+eclipse+jdk

基本思想：现在Servlet上画出验证码的图片，让其显示到页面上，再用js方法能刷新验证码，可以用ajax得到用户输入的值经过servlet跟验证码比对判断是否，并符合提示用户

基本方法：

BufferedImage：

Image是一个抽象列，BufferedImage是Image的实现。
Image和BufferedImage的主要作用就是将一副图片加载到内存中。
Java将一副图片加载到内存中的方法是：
Java代码  
String imgPath = "d:/demo.jpg";  
BufferedImage image = ImageIO.read(new FileInputStream(imgPath));  
该方法可以获得图片的详细信息，例如：获得图片的宽度：image.getWidth(null);图片只有加载内存中才能对图片进行进一步的处理。

- - Graphics：

- - - Graphics类提供基本的几何图形绘制方法，主要有：画线段、画矩形、画圆、画带颜色的图形、画椭圆、画圆弧、画多边形等，具体操作其内容我推荐可以看看使用Java的Graphics类进行绘图的方法详解

验证码的代码实现

我这里做的验证码是显示中文的，可以在servlet中修改想要显示的是数字还是字母还是结合的，可以用数组存放这些，也可以转换ASCII码经行随机数字，看个人喜好

先是做一个jsp中的验证码的地方

<div class="row cl">

        <div>

          <input  type="text" placeholder="验证码"  value="验证码:"  onblur="testCheck(this.value);">

          <img id="pic" src="CheckTestServlet"> <a id="kanbuq"  onClick="Checktest();">看不清，换一张</a> </div>

 </div>

在做一个Servlet叫做CheckTestServlet.java

@WebServlet("/CheckTestServlet")

public class CheckTestServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

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

                    //这个方法实现验证码的生成

                    response.setCharacterEncoding("utf-8");

                    //创建图片缓冲区设置其大小    BufferedImage(int width,  int height, int imageType)

                  BufferedImage bImage=new BufferedImage(100, 30, BufferedImage.TYPE_3BYTE_BGR);

                  //在缓冲区上创建画布

                  Graphics g=bImage.getGraphics();

                  //设置背景颜色

                  g.setColor(Color.orange);

                  //创建画布矩形，位置（0，0）点，大小100，30

                  g.fillRect(0, 0, 100, 30);

                  //创建随机对象

                  Random r=new Random();

                  int index;//存放随机数

                  //得到的文字东西存放处

                  StringBuffer sBuffer=new StringBuffer();

                  //循环产生四个字

                  for (int i = 0; i < 4; i++) {

                      //中文字的第一个十六进制码为4e00转十进制是19968，最后一个是9fa0十进制为40869，所以可以产生在此之间的随机数

                      index=r.nextInt(40869-19968+1)+19968;//产生随机数字

                      //设置随机颜色，

                      g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));

                      //设置文字的类型，大小

                      g.setFont(new Font("", Font.BOLD, 20));

                      /*画字，将随机数字转换成十六进制Integer.toHexString(index),16)再转换字符(char)(Integer.parseInt，

                      在设置每个文字的位置

                      */

                      g.drawString((char)(Integer.parseInt(Integer.toHexString(index),16))+"", i*22+4, 18);

                     //将其存放在StringBuffer中，以便后面读取作比较

                      sBuffer.append((char)(Integer.parseInt(Integer.toHexString(index),16)));

                }

                  //将得到的文字设置到session中

                  request.getSession().setAttribute("piccode", sBuffer.toString());

                  /*将这个验证码图片读写到页面中

                   * write(RenderedImage im, String formatName, OutputStream output)

                */

                  ImageIO.write(bImage, "jpg", response.getOutputStream());

    }

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

        // TODO Auto-generated method stub

        doGet(request, response);

    }

在做一个js刷新验证码的，用于看不清，或者别的刷新用处

    function Checktest(){

         var time=new Date().getTime();

        $("#pic").attr('src',"CheckTestServlet?d="+time)

    }

再写一个Ajax去验证用户输入的是否正确返回提示，这是用jQuery做的，需要引js

function testCheck(num){

        $.ajax({

            type:"post",//提交方式

            url:"TestCheckServlet",//提交地址

            async:true,//是否异步请求

            dataType:"html",//返回类型

            data:{"num":num},//传过去的值

            success:function(data,textStatus){//成功执行的方法

                $("#checks").html(data)

            },

            error:function(){//失败执行的方法

                alert("error");

            }

        })

    }

有点麻烦的再去做一个Servlet去验证Ajax传过来的值是否匹配验证码

@WebServlet("/TestCheckServlet")

public class TestCheckServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

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

        response.setCharacterEncoding("utf-8");

        PrintWriter out=response.getWriter();

        //得到输入的验证码与随机的图片验证码作比较，判断是否相等，返回提示用户，

        if (request.getSession().getAttribute("piccode").toString().equals(request.getParameter("num"))) {

            out.println("验证码正确");

        }else {

            out.println("验证码错误");

        }

    }

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

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}

就这样验证码已经基本搞定，其中还有许多需要修改的内容，花样，根据需求而来

【版本声明】转载请注释出处