Jsp製做驗證碼

時間 2019-12-01

標籤 jsp 製做驗證碼欄目 JSP 简体版

原文原文鏈接

　　驗證碼

　　驗證碼（CAPTCHA）是「Completely Automated Public Turing test to tell Computers and Humans Apart」（全自動區分計算機和人類的圖靈測試）的縮寫，是一種區分用戶是計算機仍是人的公共全自動程序。能夠防止：惡意破解密碼、刷票、論壇灌水，有效防止某個黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試，實際上用驗證碼是如今不少網站通行的方式，咱們利用比較簡易的方式實現了這個功能。這個問題能夠由計算機生成並評判，可是必須只有人類才能解答。因爲計算機沒法解答CAPTCHA的問題，因此回答出問題的用戶就能夠被認爲是人類。html

　　　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碼經行隨機數字，看我的喜愛java

　　先是作一個jsp中的驗證碼的地方ajax

<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刷新驗證碼的，用於看不清，或者別的刷新用處tomcat

    function Checktest(){
         var time=new Date().getTime();
        $("#pic").attr('src',"CheckTestServlet?d="+time)
    }

　　再寫一個Ajax去驗證用戶輸入的是否正確返回提示，這是用jQuery作的，須要引jssession

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傳過來的值是否匹配驗證碼app

@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);
    }

}