java - 圖片驗(yàn)證碼實(shí)現(xiàn)原理
問題描述
**測試網(wǎng)站:http://con.monyun.cn:9960/acc...
在這個(gè)頁面中有一個(gè)驗(yàn)證碼。這個(gè)驗(yàn)證碼的url是
<img src='http://www.leifengta.com.cn/aut_checkCode.hts?=0.8963835985936632' class='icd'>
如何實(shí)現(xiàn)點(diǎn)擊驗(yàn)證碼的時(shí)候更改顯示圖片??
說明:(1) 當(dāng)你點(diǎn)擊驗(yàn)證碼圖片的時(shí)候 ,img標(biāo)簽的src屬性的 后面部分的數(shù)字會(huì)更改,一旦數(shù)字更改會(huì)就會(huì)引起瀏覽器訪問新的url獲取數(shù)據(jù)
(2)新的url中查詢字符串只有value沒有name,那么是不是說就服務(wù)器端就無法獲取到這個(gè)數(shù)字值?0.8963835985936632
服務(wù)器端有辦法獲取這個(gè)數(shù)字值嗎??
(3)假若 沒有辦法獲取到數(shù)字值。 服務(wù)器端處理請(qǐng)求,返回二進(jìn)制圖像數(shù)據(jù)。這個(gè)時(shí)候會(huì)為圖片生成一個(gè)token嗎? 如果有生成那么如何傳遞給客戶端?
(4)用戶提交驗(yàn)證碼。服務(wù)器端處理,那么如何驗(yàn)證用戶提交的驗(yàn)證碼是否正確?服務(wù)器端根據(jù)什么能夠從redis中獲取到正確的驗(yàn)證碼?
各位說說給回復(fù)就頂!**
問題解答
回答1:謝邀, 一般來說, 驗(yàn)證碼的工作步驟是這樣的:
實(shí)際上是服務(wù)器生成了一個(gè)4位字符串, 用這4位字符串生成圖片寫到response中, 返回給瀏覽器, 并把這個(gè)4位字符串存在了當(dāng)前session中.
瀏覽器提交后, 用提交的字符串和session中的字符串進(jìn)行對(duì)比, 完成驗(yàn)證碼的校驗(yàn).
如果不用session比如可以設(shè)置到cookie中如下(key=test, value=test):
1.后面數(shù)字更改是避免瀏覽器緩存問題、2.不用使用任何參數(shù),服務(wù)端會(huì)自動(dòng)去按照時(shí)間銼什么的生成一個(gè)驗(yàn)證碼(想看服務(wù)端是否能獲取)

3.驗(yàn)證碼原理就是生成一串隨機(jī)數(shù)先存入session,最后生成images傳給客戶端給你識(shí)別,用戶提交驗(yàn)證碼答案,服務(wù)端對(duì)你得答案和session當(dāng)中的隨機(jī)數(shù)進(jìn)行對(duì)比,一樣就說明驗(yàn)證成功
4.如3
5.redis配合使用一般都會(huì)用到token或者session之內(nèi)的,這樣可以標(biāo)識(shí)這個(gè)驗(yàn)證碼到底是哪一個(gè)用戶的,比如如下key
>keys *>uid_100_login_verify偽代碼
獲取驗(yàn)證碼
User u=User();u.tmp_id=100;//唯一標(biāo)識(shí),傳給客戶端表單Random rand=new Random(種子);int v=rand.rand();//一般會(huì)生成其他得英文字母配合生成復(fù)雜的redisCli.add('uid_100_login_verify',random)//key,valueres.return(new Verify());
驗(yàn)證
User u=User();u.tmp_id=$POST[’tmp_id’];//獲取客戶端string value=redisCli.get('uid_100_login_verify');//key return valueif($POST[’verify_code’]===value){ return '驗(yàn)證成功';}回答3:
第一個(gè):驗(yàn)證碼的大致流程就是和你描述的一樣的。
第二個(gè):生成驗(yàn)證碼是不用往后臺(tái)傳值的,你給的例子,后面的那串?dāng)?shù)字的改變其實(shí)是為了實(shí)現(xiàn)重新請(qǐng)求 URL 而已,一般是圖片鏈接指向生成驗(yàn)證碼的鏈接,點(diǎn)擊后使用 js 來給連接進(jìn)行改變,就是后面加一串隨機(jī)數(shù),這樣瀏覽器檢測到 src 后面的連接改變了(那串隨機(jī)字符串就是這個(gè)作用),然后就會(huì)重新請(qǐng)求后臺(tái),獲取重新生成的驗(yàn)證碼圖片。
第三個(gè):后臺(tái)返回二進(jìn)制圖片后,不需要生成 token ,但是需要把生成驗(yàn)證碼的那串?dāng)?shù)字存到 session 里。要保存在服務(wù)器端,才安全,不需要返回到客戶端。
第四個(gè):用戶輸入提交的驗(yàn)證碼后,就把用戶提交的驗(yàn)證碼數(shù)字,和服務(wù)端 session 里的數(shù)字進(jìn)行對(duì)比。 如果一樣的話,就驗(yàn)證通過。
至于最后把驗(yàn)證碼放到redis里,你可以去搜索一下,如何把 session 存到 redis 里,相關(guān)的資料。
回答4:后臺(tái)代碼大體上是
public void genAuthImage(){
//生成token uuid //寫入cookieresponse.addCookie();--->實(shí)際上是設(shè)置set-cookie頭信息
//生成圖片使用response寫出end}前端:
前端:
chrome 檢查

控制臺(tái)

不確定的結(jié)論: response返回響應(yīng)類型為image/jpg的時(shí)候 無法設(shè)置cookie。原因各位有看到的朋友可以解釋下嗎
相關(guān)文章:
1. docker-compose中volumes的問題2. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””3. boot2docker無法啟動(dòng)4. nignx - docker內(nèi)nginx 80端口被占用5. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.6. java - SSH框架中寫分頁時(shí)service層中不能注入分頁類7. dockerfile - 為什么docker容器啟動(dòng)不了?8. node.js - antdesign怎么集合react-redux對(duì)input控件進(jìn)行初始化賦值9. docker容器呢SSH為什么連不通呢?10. 關(guān)于docker下的nginx壓力測試

網(wǎng)公網(wǎng)安備