java語言實現登錄驗證碼功能

先上效果。

 

生成驗證碼後端邏輯

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("/verificationCode")
public class VerifyCodeController {
	private static final long serialVersionUID = 1L;
	 /**
     * 這裏用作存入session的名稱
     */
    private static final String SESSION_KEY_OF_RAND_CODE = "randCode"; 

    /**
     * 
     */
    private static final int count = 200;

    /**
     * 定義圖形大小(寬)
     */
    private static final int width = 105;
    /**
     * 定義圖形大小(高)
     */
    private static final int height = 35;
    /**
     * 干擾線的長度=1.414*lineWidth
     */
    private static final int lineWidth = 1;

    @RequestMapping(value= "/generate", method={ RequestMethod.POST,RequestMethod.GET })
    public void VerificationCode( HttpServletRequest request,
            HttpServletResponse response) throws ServletException,
            IOException {
            // 設置頁面不緩存
                response.setHeader("Pragma", "No-cache");
                response.setHeader("Cache-Control", "no-cache");
                response.setDateHeader("Expires", 0);
                // response.setContentType("image/png");
                // 在內存中創建圖象
                final BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
                // 獲取圖形上下文
                final Graphics2D graphics = (Graphics2D) image.getGraphics();

                // 設定背景顏色
                graphics.setColor(Color.WHITE); // ---1.Color.WHITE爲白色
                graphics.fillRect(0, 0, width, height);//填充衍射
                // 設定邊框顏色
                //graphics.setColor(getRandColor(100, 200)); // ---2.這是以數字型來設置顏色，顏色模式是指使用三種基色：紅、綠、藍，通過三種顏色的調整得出其它各種顏色，這三種基色的值範圍爲0～255
                graphics.drawRect(0, 0, width - 1, height - 1);


                final Random random = new Random();
                // 隨機產生干擾線，使圖象中的認證碼不易被其它程序探測到
                for (int i = 0; i < count; i++) {
                    graphics.setColor(getRandColor(150, 200)); // ---3.

                    final int x = random.nextInt(width - lineWidth - 1) + 1; // 保證畫在邊框之內
                    final int y = random.nextInt(height - lineWidth - 1) + 1;
                    final int xl = random.nextInt(lineWidth);
                    final int yl = random.nextInt(lineWidth);
                    graphics.drawLine(x, y, x + xl, y + yl);
                }
                // 取隨機產生的認證碼(4位數字)
                final String resultCode = exctractRandCode();
                for (int i = 0; i < resultCode.length(); i++) {
                	int num=(int)(Math.random()*4+1);
                	switch (num) {
					case 1:
						graphics.setColor(Color.green);
						break;
					case 2:
						graphics.setColor(Color.black);
						break;
					case 3:
						graphics.setColor(Color.blue);
						break;
					case 4:
						graphics.setColor(Color.red);
						break;
					default:
						graphics.setColor(Color.green);
						break;
					}
                   
                   
                    graphics.setFont(new Font("Times New Roman", Font.BOLD, 24));
                    // 設置字符，字符間距，上邊距
                    //System.out.print(resultCode.charAt(i));
                    graphics.drawString(String.valueOf(resultCode.charAt(i)), (23 * i) + 8, 26);
                }
               // System.out.println("直接輸出："+resultCode);
                // 將認證碼存入SESSION
                request.getSession().setAttribute(SESSION_KEY_OF_RAND_CODE, resultCode);
                // 圖象生效
                graphics.dispose();

                // 輸出圖象到頁面
                ImageIO.write(image, "JPEG", response.getOutputStream());           
    }


    /**
     * @return 隨機碼
     */
    private String exctractRandCode() {
        
        int randCodeLength = 4;
        
        return RandCodeImageEnum.ALL_CHAR.generateStr(randCodeLength);

    }




    /**
     * 描述：根據給定的數字生成不同的顏色
     * @param 這是以數字型來設置顏色，顏色模式是指使用三種基色：紅、綠、藍，通過三種顏色的調整得出其它各種顏色，這三種基色的值範圍爲0～255
     * @param 這是以數字型來設置顏色，顏色模式是指使用三種基色：紅、綠、藍，通過三種顏色的調整得出其它各種顏色，這三種基色的值範圍爲0～255
     * @return 描述：返回顏色
     */
    private Color getRandColor(int fc, int bc) { // 取得給定範圍隨機顏色
        final Random random = new Random();
        if (fc > 255) {
            fc = 255;
        }
        if (bc > 255) {
            bc = 255;
        }

        final int r = fc + random.nextInt(bc - fc);
        final int g = fc + random.nextInt(bc - fc);
        final int b = fc + random.nextInt(bc - fc);

        return new Color(r, g, b);
    }



    /**
     * 驗證碼輔助類
     */
    enum RandCodeImageEnum {
        /**
         * 混合字符串
         */
        ALL_CHAR("0123456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), // 去除小寫的l和o這個兩個不容易區分的字符；
        /**
         * 字符
         */
        LETTER_CHAR("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"),
        /**
         * 小寫字母
         */
        LOWER_CHAR("abcdefghijklmnopqrstuvwxyz"),
        /**
         * 數字
         */
        NUMBER_CHAR("0123456789"),
        /**
         * 大寫字符
         */
        UPPER_CHAR("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        /**
         * 待生成的字符串
         */
        private String charStr;

        /**
         * @param charStr
         */
        private RandCodeImageEnum(final String charStr) {
            this.charStr = charStr;
        }

        /**
         * 生產隨機驗證碼
         * 
         * @param codeLength
         *            驗證碼的長度
         * @return 驗證碼
         */
        public String generateStr(final int codeLength) {
            final StringBuffer sb = new StringBuffer();
            final Random random = new Random();
            final String sourseStr = getCharStr();

            for (int i = 0; i < codeLength; i++) {
                sb.append(sourseStr.charAt(random.nextInt(sourseStr.length())));
            }

            return sb.toString();
        }

        /**
         * @return the {@link #charStr}
         */
        public String getCharStr() {
            return charStr;
        }

    }
}

前端代碼：

function login(){
			//window.location.href = "index.jsp";
			var code= $("#verifyCode").val();
			var name = $("#username").val();
			var pas = $("#pas").val();
			if(name==""||pas==""){
				alert("用戶名或密碼不能爲空!");
				return ;
			}
		    if(code==""){
				alert("驗證碼不能爲空!");
				return ;
			} 
			$.ajax({
				type:'post',
				url:'../rest/auth/login',
				data:{"name":name,"pas":pas,"code":code},
				success:function(data){//返回json結果
					if(data==1){//登錄成功
						window.location.href = "index2.jsp";
					}
					var rad = Math.floor(Math.random() * Math.pow(10, 8));
					var path="<%=basePath%>";
					if(data==0){
						alert("驗證碼錯誤!");
						$("#randCodeImage").attr("src", path+"xtts/bpm/rest/verificationCode/generate?uuuy="+rad);
		                $("#VerificationCode").val("").focus(); // 清空並獲得焦點
					}
					
					if(data==-1){
						alert("賬號或密碼錯誤!");
						$("#randCodeImage").attr("src", path+"xtts/bpm/rest/verificationCode/generate?uuuy="+rad);
		                $("#username").focus(); // 清空並獲得焦點
					}
				}
				
			});
			
		}
		
		/*更換驗證碼*/
		function changeCode(){
            var rad = Math.floor(Math.random() * Math.pow(10, 8));
            var path="<%=basePath%>";
            //uuuy是隨便寫的一個參數名稱，後端不會做處理，作用是避免瀏覽器讀取緩存的鏈接
            $("#randCodeImage").attr("src", path+"xtts/bpm/rest/verificationCode/generate?uuuy="+rad);
	        }

登錄操作controller層代碼。登錄前先判斷驗證碼是否輸入錯誤。

HttpSession session = request.getSession();
		String sessionCode=session.getAttribute("randCode")==null?"":session.getAttribute("randCode").toString();
		
	    if(!sessionCode.equalsIgnoreCase(code)){//驗證碼錯誤
			return 0;
		}

end~