java驗證碼的製作和驗證

来源:https://www.cnblogs.com/hhmm99/archive/2018/09/11/9624072.html
-Advertisement-
Play Games

驗證碼作用： 沒有驗證碼登陸，黑客會更加容易破解你的賬號，通過組合碼刷機等黑客技術來破取你的密碼，有了驗證碼相當於加了一層很厚的屏障，安全繫數很高。 驗證碼是一種區分用戶是電腦和人的公共全自動程式。 驗證碼作用：可以防止惡意破解密碼、刷票、論壇灌水，有效防止某個黑客對某一個特定註冊用戶用特定程式暴 ...


驗證碼作用：

沒有驗證碼登陸，黑客會更加容易破解你的賬號，通過組合碼刷機等黑客技術來破取你的密碼，有了驗證碼相當於加了一層很厚的屏障，安全繫數很高。
　　驗證碼是一種區分用戶是電腦和人的公共全自動程式。
　　驗證碼作用：可以防止惡意破解密碼、刷票、論壇灌水，有效防止某個黑客對某一個特定註冊用戶用特定程式暴力破解方式進行不斷的登陸嘗試，實際上是用驗證碼是現在很多網站通行的方式（比如招商銀行的網上個人銀行，百度社區），利用比較簡易的方式實現了這個功能。

（因為老師佈置的作業，做了兩種做法，一種自己先做的，借鑒過網路，還有一種是老師教的，第二種用到了工具類kaptcha）

第一種：

生成驗證碼的代碼：

/**
 * @author hh
 */
public class CodeUtil {
    private static int width = 90;// 定義圖片的width
    private static int height = 20;// 定義圖片的height
    private static int codeCount = 4;// 定義圖片上顯示驗證碼的個數
    private static int xx = 15;
    private static int fontHeight = 18;
    private static  int codeY = 16;
    private static char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

    /**
     * 生成一個map集合
     * code為生成的驗證碼
     * codePic為生成的驗證碼BufferedImage對象
     * @return
     */
    public static Map<String,Object> generateCodeAndPic() {
        // 定義圖像buffer
        BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        //Graphics2D gd = buffImg.createGraphics();
        //Graphics2D gd = (Graphics2D) buffImg.getGraphics();
        Graphics gd = buffImg.getGraphics();
        // 創建一個隨機數生成器類
        Random random = new Random();
        // 將圖像填充為白色
        gd.setColor(Color.WHITE);
        gd.fillRect(0, 0, width, height);

        // 創建字體，字體的大小應該根據圖片的高度來定。
        Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
        // 設置字體。
        gd.setFont(font);

        // 畫邊框。
        gd.setColor(Color.BLACK);
        gd.drawRect(0, 0, width - 1, height - 1);

        // 隨機產生40條幹擾線，使圖象中的認證碼不易被其它程式探測到。
        gd.setColor(Color.BLACK);
        for (int i = 0; i < 30; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            gd.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 code = String.valueOf(codeSequence[random.nextInt(36)]);
            // 產生隨機的顏色分量來構造顏色值，這樣輸出的每位數字的顏色值都將不同。
            red = random.nextInt(255);
            green = random.nextInt(255);
            blue = random.nextInt(255);

            // 用隨機產生的顏色將驗證碼繪製到圖像中。
            gd.setColor(new Color(red, green, blue));
            gd.drawString(code, (i + 1) * xx, codeY);

            // 將產生的四個隨機數組合在一起。
            randomCode.append(code);
        }
        Map<String,Object> map  =new HashMap<String,Object>();
        //存放驗證碼
        map.put("code", randomCode);
        //存放生成的驗證碼BufferedImage對象
        map.put("codePic", buffImg);
        return map;
    }
}
View Code

 

前端網頁代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>驗證登錄</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <form id="form">
        Name:<input type="text" name="name"><br/>
        Pwd:<input type="password" name="pwd"><br/>
        <input name="imgCode" type="text">
        <!-- 直接在img的src中填寫servlet請求 -->
        <img src="/getCodeImg" onclick="codeImg()" id="imgObj">
        <a href="#" onclick="codeImg()" >換一張</a>
        <br/>
        <p style="color: red" id="msg"></p>
        <input type="button" id="btn" value="登錄">
    </form>

</body>
<script>
    $(function () {
        //登錄驗證
        $("#btn").on("click",function () {
            $.ajax("login",{
                type:"post",
                data:$("#form").serialize(),
                success:function (data) {
                    //200 表示成功驗證
                    if(data==200){
                        location.href="success.html";
                    }else {
                        $("#msg").text(data);
                    }
                }
            });
        })
    })
    //改變圖片
    function codeImg() {
        var imgSrc = $("#imgObj");
        var src = imgSrc.attr("src");
        imgSrc.attr("src", chgUrl(src));
    }
    // 時間戳
    // 為了使每次生成圖片不一致，即不讓瀏覽器讀緩存，所以需要加上時間戳
    function chgUrl(url) {
        var timestamp = (new Date()).valueOf();
        //eg:  /getCodeImg?timestamp=1536379395200 截取成：/getCodeImg?timestamp
        url = url.substring(0, 21);
        if ((url.indexOf("?") >= 0)) {
            url = url + "=" + timestamp;
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url;
    }
</script>
</html>
View Code

 

請求獲取製作的驗證碼：

/**
 * @author hh
 */
@WebServlet("/getCodeImg")
public class GetCodeImgServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 調用工具類生成的驗證碼和驗證碼圖片
        Map<String, Object> codeMap = CodeUtil.generateCodeAndPic();
        //把驗證碼保存到session中
        HttpSession session=req.getSession();
        session.setAttribute("code",codeMap.get("code").toString());
        //禁止圖片緩存
        resp.setHeader("Pragma", "no-cache");
        resp.setHeader("Cache-Control", "no-cache");
        resp.setDateHeader("Expires", -1);
        //響應格式
        resp.setContentType("image/jpeg;charset=utf-8");
        // 將圖像輸出到Servlet輸出流中。
        try (ServletOutputStream sos = resp.getOutputStream()){
            ImageIO.write((RenderedImage) codeMap.get("codePic"), "jpeg", sos);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}
View Code

 

後臺校驗提交賬號密碼和驗證碼的值：

/**
 * @author hh
 */
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        //獲取表單中的登錄名、密碼和填寫的驗證碼
        String name = req.getParameter("name");
        String pwd = req.getParameter("pwd");
        String imgCode = req.getParameter("imgCode");
        //獲取Session回話作用域存放的驗證碼值
        String code = (String)req.getSession().getAttribute("code");
        //進行校驗
        if("hh".equals(name)&&"123".equals(pwd)&&code.equals(imgCode)){
            resp.getWriter().print(200);
        }else if(!code.equals(imgCode)){
            resp.getWriter().print("驗證碼錯誤！");
        }else {
            resp.getWriter().print("賬號或者密碼錯誤！");
        }
    }
}
View Code

 

 

 

第二種：

第二種依賴了jar包，直接導入包，配置web.xml的請求servlet然後工具類就會自動保存到回話作用域

1.添加jar包依賴

如果你使用maven來統一管理jar包，則在工程的pom.xml中添加dependency

Xml代碼

<!-- 驗證碼生成工具 -->
            <dependency>
                <groupId>com.github.penggle</groupId>
                <artifactId>kaptcha</artifactId>
                <version>2.3.2</version>
            </dependency>

如果是非maven管理的項目，則直接在官網下載kaptcha的jar包，然後添加到項目lib庫中，下載地址：http://code.google.com/p/kaptcha/downloads/list

配置web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <!-- 生成圖片的Servlet -->
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        
        
        <!-- 是否有邊框 -->
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>no</param-value>
        </init-param>
        <!--字體顏色-->
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <!-- 圖片寬度 -->
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>135</param-value>
        </init-param>
        <!-- 圖片高度 -->
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>50</param-value>
        </init-param>
        <!-- 使用哪些字元生成驗證碼 -->
        <!--<init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ACDEFHKPRSTWX345679</param-value>
        </init-param>-->
        <!-- 字體大小 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>43</param-value>
        </init-param>
        <!-- 干擾線的顏色 -->
        <init-param>
            <param-name>kaptcha.noise.color</param-name>
            <param-value>black</param-value>
        </init-param>
        <!-- 字元個數 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        <!-- 使用哪些字體 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.names</param-name>
            <param-value>Arial</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <!-- 請求地址 -->
        <url-pattern>/getCode</url-pattern>
    </servlet-mapping>
</web-app>
View Code

 

前端網頁代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學生信息註冊</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>學生信息註冊</h1>
<form id="form">
    Name:<input type="text" name="name" required="required"><br/>
    Age:<input type="text" name="age" required="required"><br/>
    Address:<input type="text" name="address" required="required"><br/>
    驗證碼：<input name="imgCode" type="text" required="required">
    <!-- 直接在img的src中填寫servlet請求 -->
    <img src="/getCode" onclick="codeImg()" id="imgObj">
    <br/>
    <p style="color: red" id="msg"></p>
    <input type="button" id="btn" value="註冊">
</form>
</body>
<script>
    $(function () {
        //登錄驗證
        $("#btn").on("click",function () {
            $.ajax("regist",{
                type:"post",
                data:$("#form").serialize(),
                success:function (data) {
                    if(data.code==200){
                        alert(data.value);
                    }else {
                        $("#msg").text(data.value);
                    }
                }
            });
        })
    })
    //改變圖片
    function codeImg() {
        var imgSrc = $("#imgObj");
        var src = imgSrc.attr("src");
        imgSrc.attr("src", chgUrl(src));
    }
    // 時間戳
    // 為了使每次生成圖片不一致，即不讓瀏覽器讀緩存，所以需要加上時間戳
    function chgUrl(url) {
        var timestamp = (new Date()).valueOf();
        //eg:  /getCodeImg?timestamp=1536379395200 截取成：/getCodeImg?timestamp
        url = url.substring(0, 21);
        if ((url.indexOf("?") >= 0)) {
            url = url + "=" + timestamp;
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url;
    }
</script>
</html>
View Code

 

後臺校驗的代碼：

package edu.nf.demo.servlet;

import com.google.code.kaptcha.Constants;
import com.google.gson.Gson;
import edu.nf.demo.service.StudentService;
import edu.nf.demo.vo.ResponseView;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author hh
 */
@WebServlet("/regist")
public class StudentRegistServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        //取出頁面的值
        String name=req.getParameter("name");
        String age=req.getParameter("age");
        String address=req.getParameter("address");
        String code=req.getParameter("imgCode");
        //響應視圖
        ResponseView vo=new ResponseView();
        //從Session中獲取工具類自動保存的驗證碼的值
        String sessionCode=(String)req.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
        //判斷驗證碼
        if (!code.equalsIgnoreCase(sessionCode)){
            vo.setCode(403);
            vo.setValue("驗證碼錯誤");
        }else {
            int respCode = new StudentService().inserStudent(name,age,address);
            if (respCode==200){
                vo.setValue("註冊成功！");
            }else {
                vo.setCode(403);
                vo.setValue("註冊失敗！");
            }
        }
        //響應數據
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().print(new Gson().toJson(vo));
    }
}
View Code

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [PHP] 演算法-請找出帶環鏈表的環的入口結點的PHP實現
    給一個鏈表，若其中包含環，請找出該鏈表的環的入口結點，否則，輸出null 1.找鏈表倒數第k個結點,輸入一個鏈表，輸出該鏈表中倒數第k個結點。第一個指針走(k-1)步，到達第k個節點,兩個指針同時往後移動，當第一個結點到達末尾的時候，第二個結點所在位置就是倒數第k個節點了 2.原理有點像上面的，定義... ...
  • Java進階篇設計模式之六 ----- 組合模式和過濾器模式
    前言 在 "上一篇" 中我們學習了結構型模式的外觀模式和裝飾器模式。本篇則來學習下組合模式和過濾器模式。 組合模式 簡介 組合模式是用於把一組相似的對象當作一個單一的對象。組合模式依據樹形結構來組合對象，用來表示部分以及整體層次。這種類型的設計模式屬於結構型模式，它創建了對象組的樹形結構。 簡單來說 ...
  • locust使用經驗---每個任務使用新的鏈接以及處理大量TIME_WAIT連接
    最近由於項目需要，在研究打壓測試工具，以及當測試連接過多後端伺服器配置問題 測試工具選用locust，locust中文意思為蝗蟲，可以想象，locust就像成片的蝗蟲，撲向我們的服務。 它支持分散式的打壓測試，每個實例可自定義執行任務，執行任務可用python腳本實現，具體如何寫python腳本這裡 ...
  • Servlet八大監聽器
    監聽器的分類 監聽域對象自身創建和銷毀的監聽器： ①ServletContextListener介面 監聽 SercvletContext對象 ②HttpSessionListener介面 監聽 HttpSession對象 ③ServletRequestListener介面 監聽 ServletRe ...
  • UOJ#386. 【UNR #3】鴿子固定器(鏈表)
    題意 題目鏈接 為了固定S**p*鴿鴿，whx和zzt來到鴿具商店選購鴿子固定器。 鴿具商店有 nn 個不同大小的固定器，現在可以選擇至多 mm 個來固定S**p*鴿鴿。每個固定器有大小 sisi 和牢固程度 vivi。 如果他們選購的固定器大小不一或是不牢固，固定S**p*鴿鴿的時候肯定會很頭疼， ...
  • Java中數組、List、Set互相轉換
    數組轉List 需要註意的是， Arrays.asList() 返回一個受指定數組決定的固定大小的列表。所以不能做 add 、 remove 等操作，否則會報錯。 List staffsList = Arrays.asList(staffs); staffsList.add("Mary"); // ...
  • Python爬蟲項目--貓眼電影Top100榜
    本次抓取貓眼電影Top100榜所用到的知識點: 1. python requests庫 2. 正則表達式 3. csv模塊 4. 多進程 正文 目標站點分析 通過對目標站點的分析, 來確定網頁結構, 進一步確定具體的抓取方式. 1. 瀏覽器打開貓眼電影首頁, 點擊"榜單", 點擊"Top100榜", ...
  • 轉載：tomcat實現熱部署的配置
    tomcat實現熱部署的配置 我們實現熱部署後,自然就可以通過maven操作tomcat了,所以就需要maven取得操作tomcat的許可權,現在這一步就是配置tomcat的可操作許可權. 進入tomcat安裝目錄 #進入tomcat安裝目錄 cd /usr/local/devlop/tomcat #進 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類