1. 程式人生 > >Jsp制作驗證碼

Jsp制作驗證碼

post aws 是否 過去的 jsp exception src and attr

  驗證碼

  驗證碼(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and Humans Apart”(全自動區分計算機和人類的圖靈測試)的縮寫,是一種區分用戶是計算機還是人的公共全自動程序。可以防止:惡意破解密碼、刷票、論壇灌水,有效防止某個黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試,實際上用驗證碼是現在很多網站通行的方式,我們利用比較簡易的方式實現了這個功能。這個問題可以由計算機生成並評判,但是必須只有人類才能解答。由於計算機無法解答CAPTCHA的問題,所以回答出問題的用戶就可以被認為是人類。

   Jsp制作驗證碼

  運行環境: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);
    }

}

就這樣驗證碼已經基本搞定,其中還有許多需要修改的內容,花樣,根據需求而來

   【版本聲明】 轉載請註釋出處   

Jsp制作驗證碼