驗證碼在登錄頁面的使用


效果:

 

1,打開登錄頁面時,4位驗證碼的圖片位置,去后台加載圖片回來,其中生成了4位驗證碼放到session中,登錄時在session中獲取。

2,點擊登錄,在session中獲取驗證碼,進行驗證。

二、demo:

jsp代碼:

<p class="login_field">
                                    <span>
                                        <input type="text" id="user_vcode" name="user_vcode" placeholder="驗證碼" maxlength="4" class="login_field_input login_input_code">
                                    </span>
                                    <span class="code_img">
                                        <img src="${ctx }/verify/verifyCode" width="110" height="40" id="verifyCodeImage">
                                        <input id="user_des_code" name="user_des_code" type="hidden">
                                    </span>
                                    <span>
                                        <a id="changeVerifImageRegister" onclick="javascript:changeImage();" class="code_change">換一張</a>
                                    </span>
                                </p>

換一張的js方法:

// 驗證碼刷新控制
        function changeImage() {
            $('#verifyCodeImage').attr('src',
                    '${ctx }/verify/verifyCode?timestamp=' + Math.floor(Math.random() * 100));
        }

 

后台java代碼:

@RequireNoLogin
    @RequestMapping(value = "/verifyCode")
    public void verifyCode(HttpServletRequest req, HttpServletResponse resp, String serialNo)
            throws ServletException, java.io.IOException {
        init();
        // 定義圖像buffer
        BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = buffImg.createGraphics();
        // 創建一個隨機數生成器類
        Random random = new Random();
        // 將圖像填充為白色
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, width, height);
        // 創建字體,字體的大小應該根據圖片的高度來定。
        Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);
        // 設置字體。
        g.setFont(font);
        // 畫邊框。
        // g.setColor(Color.BLACK);
        g.drawRect(0, 0, width - 1, height - 1);
        // 隨機產生160條干擾線,使圖象中的認證碼不易被其它程序探測到。
        g.setColor(Color.BLACK);
        for (int i = 0; i < 10; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            g.drawLine(x, y, x + xl, y + yl);
        }
        // randomCode用於保存隨機產生的驗證碼,以便用戶登錄后進行驗證。
        StringBuffer randomCode = new StringBuffer();
        int red = 0, green = 0, blue = 0;
        // 隨機產生codeCount數字的驗證碼。
        for (int i = 0; i < codeCount; i++) {
            // 得到隨機產生的驗證碼數字。
            String strRand = String.valueOf(codeSequence[random.nextInt(10)]);
            // 產生隨機的顏色分量來構造顏色值,這樣輸出的每位數字的顏色值都將不同。
            red = random.nextInt(198);
            green = random.nextInt(233);
            blue = random.nextInt(109);
            // 用隨機產生的顏色將驗證碼繪制到圖像中。
            g.setColor(new Color(red, green, blue));
            g.drawString(strRand, (i + 1) * x, codeY);
            // 將產生的四個隨機數組合在一起。
            randomCode.append(strRand);
        }
        // 將四位數字的驗證碼保存到Session中。
        HttpSession session = req.getSession();
        session.setAttribute(UPSConstant.VALIDATECODE, randomCode.toString());
        //indexRedisService.setMess2Reids(UPSConstant.VALIDATECODE + "-" + serialNo, randomCode.toString());
        // 禁止圖像緩存。
        resp.setHeader("Pragma", "no-cache");
        resp.setHeader("Cache-Control", "no-cache");
        resp.setDateHeader("Expires", 0);
        resp.setContentType("image/jpeg");
        // 將圖像輸出到Servlet輸出流中。
        ServletOutputStream sos = resp.getOutputStream();
        ImageIO.write(buffImg, "jpeg", sos);
        sos.close();
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM