如何在自己登入註冊頁面新增驗證碼並且實時重新整理

2020-09-25 11:01:31

為什麼要新增驗證碼?
為了防止重複提交表單,給伺服器造成壓力

需要的工具 : kaptcha-2.3.2.jar idea2019.3
谷歌驗證碼 封裝好的servlet類

首先匯入jar包

匯入完成之後 可以直接在web.xml進行設定

設定程式碼如下:

	<servlet>
		<servlet-name>KaptchaServlet</servlet-name>
		<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>KaptchaServlet</servlet-name>
		<url-pattern>/kaptcha.jpg</url-pattern>
	</servlet-mapping>
	

如果新增完成之後 重新部署 直接存取之後 就會得到一個驗證碼圖片
效果如圖;

在這裡插入圖片描述

問題來了?

得到圖片之後 怎麼獲取 裡面的字元

該工具會在登入後臺 或者 註冊後臺 設定一個session 通過 id可以取出 value 值


        // 獲取Session中的驗證碼
        String token = (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
        // 刪除 Session中的驗證碼
        req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);

其中 KAPTCHA_SESSION_KEY是常數 固定ID

其中原理是 當我們請求伺服器之後 通過session 得到值 之後 立馬刪除session 為下一次請求做準備

這樣就防止多次請求

之後 獲取 傳送的 驗證碼 進行 比對
正確之後 進行下一步操作 不正確 返回頁面 回顯錯誤資訊

String code = req.getParameter("code");
        //檢查驗證碼有否有問題
        if (token != null && token.equalsIgnoreCase(code)) {
}else{

}

如何在jsp頁面中顯示驗證碼圖片呢

利用 img src 屬性

                   <img  id="img_check" src="kaptcha.jpg" width="80px" height="40px" >

其中 src中放的 正是請求servlet的地址 便可獲取到圖片