java - 圖片驗證碼實作原理
怪我咯
怪我咯 2017-05-27 17:41:18
0
4
1057

**測試網站:
http://con.monyun.cn:9960/acc...

在這個頁面中有一個驗證碼。這個驗證碼的url是

<img src="../aut_checkCode.hts?=0.8963835985936632" class="icd">

如何實現點擊驗證碼的時候更改顯示圖片? ?

說明:
(1) 當你點擊驗證碼圖片的時候,img標籤的src屬性的後面部分的數字會更改,一旦數字更改會就會引起瀏覽器訪問新的url獲取數據

(2)新的url中查詢字串只有value沒有name,那麼是不是說就伺服器端就無法取得這個數字值?
0.8963835985936632

伺服器端有辦法取得這個數字值嗎? ?

(3)假若 沒有辦法取得到數字值。伺服器端處理請求,傳回二進位影像資料。
這個時候會為圖片產生一個token嗎?如果有生成那麼如何傳遞給客戶端?

(4)使用者提交驗證碼。伺服器端處理,那麼如何驗證使用者提交的驗證碼是否正確?
伺服器端根據什麼能夠從redis中取得到正確的驗證碼?

各位說說
給回覆就頂! **

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回覆(4)
Ty80

謝邀, 一般來說, 驗證碼的工作步驟是這樣的:

  1. 其實是伺服器產生了一個4位元字串, 用這4位元字串產生圖片寫到response中, 返回给浏览器, 并把这个4位字符串存在了当前session中.

  2. 瀏覽器提交後, 用提交的字符串和session中的字符串進行對比, 完成驗證碼的校驗.

如果不用session比如可以设置到cookie中如下(key=test, value=test例如可以設定到cookie中如下(key=test, value=test):

淡淡烟草味

1.後面數字變更是避免瀏覽器快取問題、
2.不用使用任何參數,服務端會自動去依照時間銼什麼的產生一個驗證碼(想看服務端是否能取得)

3.驗證碼原理就是產生一串隨機數先存入session,最後產生images傳給客戶端給你識別,用戶提交驗證碼答案,服務端對你得答案和session當中的隨機數進行對比,一樣就說明驗證成功

4.如3

5.redis配合使用一般都會用到token或session之內的,這樣可以標識這個驗證碼到底是哪一個用戶的,比如如下key

>keys *
>uid_100_login_verify

偽代碼

取得驗證碼

User u=User();
u.tmp_id=100;//唯一标识,传给客户端表单
Random rand=new Random(种子);
int v=rand.rand();//一般会生成其他得英文字母配合生成复杂的
redisCli.add("uid_100_login_verify",random)//key,value
res.return(new Verify());

驗證

User u=User();
u.tmp_id=$POST['tmp_id'];//获取客户端
string value=redisCli.get("uid_100_login_verify");//key return value
if($POST['verify_code']===value){
  return "验证成功";
}
为情所困

第一個:驗證碼的大致流程就是跟你描述的一樣的。

第二個:
生成驗證碼是不用往後台傳值的,
你給的例子,後面的那串數字的改變其實是為了實現重新請求URL 而已,
一般是圖片鏈接指向生成驗證碼的鏈接,點擊後使用js 來給連接進行改變,就是後面加一串隨機數,這樣瀏覽器檢測到src 後面的連接改變了(那串隨機字符串就是這個作用),然後就會重新請求後台,獲取重新產生的驗證碼圖片。

第三個:
後台返回二進位圖片後,不需要產生 token ,但是需要把產生驗證碼的那串數字存到 session 裡。要保存在伺服器端,才安全,不需要返回客戶端。

第四個:
用戶輸入提交的驗證碼後,就把用戶提交的驗證碼數字,和服務端 session 裡的數字進行比較。 如果一樣的話,就驗證通過。

至於最後把驗證碼放到redis裡,你可以去搜尋一下,如何把 session 存到 redis 裡,相關的資料。

Ty80

後台程式碼大體上是

public void genAuthImage(){

//產生token uuid
//寫入cookie
response.addCookie();--->實際上是設定set-cookie頭資訊

//生成圖片使用response寫出
end
}
前端:

前端:

chrome 檢查

控制台

不確定的結論: response回傳回應類型為image/jpg的時候 無法設定cookie。
原因各位有看到的朋友可以解釋下嗎

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板