tft每日頭條

 > 科技

 > 驗證碼一般都是怎麼實現的

驗證碼一般都是怎麼實現的

科技 更新时间:2024-12-29 15:25:55

想必大家在注冊或者登錄某些網站時經常遇到輸入驗證碼這個問題,之前項目中也涉及到這塊的開發,今天總結下從驗證碼生成到輸入再到最後是否正确的一個過程。有些人覺得麻煩覺得設計驗證碼這個環節沒有什麼必要,其實驗證碼有效防止某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試,實際上是用驗證碼是現在很多網站通行的方式(比如網上個人銀行,微博登錄、今日頭條登錄等等),我們利用比較簡易的方式實現了這個功能。

1.首先用到谷歌的kaptcha-2.3.2.jar,可以去官網上下載這個jar包

2.修改web.xml中的配置,如下圖代碼

驗證碼一般都是怎麼實現的(超級簡單的實現網站輸入驗證碼校驗過程)1

web.xml

3.頁面設計如下圖和對應的頁面代碼(不是專業美工,頁面設計有點醜哈)

驗證碼一般都是怎麼實現的(超級簡單的實現網站輸入驗證碼校驗過程)2

頁面效果圖

驗證碼一般都是怎麼實現的(超級簡單的實現網站輸入驗證碼校驗過程)3

jsp代碼

這裡有兩種方式改變驗證碼的值:

  1. 通過點擊圖片本身改變驗證碼的值

  2. 通過點擊a标簽“看不清,換一張”來改變驗證碼的值

這種不同的方式都對應同一個js處理以改變驗證碼内容的值,點擊後觸發changeVerifyCode()方法,具體的js代碼如下圖所示:

驗證碼一般都是怎麼實現的(超級簡單的實現網站輸入驗證碼校驗過程)4

Js代碼

友情提示:為了保證提交到後台的驗證碼不是空,可以在輸入框失去焦點的onblur()事件裡面判斷文本框的值是否為空。(yzm:驗證碼簡稱,英語水平比較渣渣)

4.當輸入完驗證碼之後,點擊"登錄"按鈕,頁面請求到後台,KaptchaServlet會把驗證碼設置到session中,所以先去session裡面拿到值。後台處理代碼如下圖:

驗證碼一般都是怎麼實現的(超級簡單的實現網站輸入驗證碼校驗過程)5

後台代碼

後台代碼處理如果form表單提交的rand值如果跟session裡面的值一樣就跳轉到登錄頁面,否則就繼續停留在這個頁面。 當然去官網上可以看到web.xml中可以設置更多關于驗證碼圖片還有很多參數,根據項目需求去添加。

以上是我實現驗證碼的過程,原理和實現方式都非常簡單通俗易懂,如果你有更好的實現方式歡迎一起交流哈。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved