原理:

????????驗證碼在前端顯示,但是是在后端生成, 將生成的驗證碼存入redis,待登錄時,前端提交驗證碼,與后端生成的驗證碼比較. ??

詳細解釋:

?????????圖形驗證碼的原理(如下圖代碼).前端發(fā)起獲取驗證碼的請求后,

????????1 后端接收請求,生成一個鍵key(隨機的鍵)?? 然后生成一個驗證碼作為map的value.將key value set到HashMap(鍵不能重復(fù))中,

? ? ? ? 2然后將此key,value存儲到redis中,設(shè)置過期時間為5分鐘.隨后將map中的鍵值對返回到前端,注意此map有效時間是根據(jù)redis的有效時間而定.

-------html

--------js? ??3 前端獲取到該map如下圖

將后端獲取到的value顯示到前端,然后將key保存到form中,當點擊登陸時,此時將form中的用戶自己輸入的驗證碼的值,和后端傳遞回來的key還有賬戶,密碼傳遞到后端,后端拿到這個自己曾經(jīng)傳遞回來的key和redis中的key進行尋找,然后將用戶輸入的value與redis對應(yīng)的key相比較,如若成功,則成功進行下一步,進行數(shù)據(jù)庫交互,比較賬戶密碼.

寫一個5分鐘自動換驗證碼的方法

鉤子函數(shù)調(diào)用即可

相關(guān)依賴

?效果圖

如圖所示,圖形驗證碼,將圖形驗證碼的函數(shù)寫在鉤子函數(shù)中,加載頁面即顯示,

?