程式設計

Angular 要做 Captcha 要怎麼做

這邊分享一個最簡單的Angular實作Captcha的方法,相信這個簡單的解決方法已經足夠解決Angular不好製作驗證碼的問題了。

如果要使用其他的驗證碼組件,會增加整個程式的大小,有些甚至要收費。

難題

為什麼Angular不好製作驗證碼,因爲它是前端框架,前端框架沒有辦法用Session(這邊指的不是SessionStorage)在後端做驗證,前端框架繪製的驗證碼又在前端驗證的話只要有心一下就破解了。

那這樣就有一個想法是,圖片從後端來,然後加上一個只有後端才知道的加密字串,驗證的時候傳回加密字串解密後的值是否與輸入的驗證碼相符合就好了。

簡單的解法

也就是顯示驗證碼流程為:

Angular -> 取得驗證碼請求 -> API -> 傳回圖片與加密的字串 -> Angular

然後驗證是否正確的時候就是:

Angular -> 傳送加密字串與使用者輸入的值 -> API -> 解密比對是否一致 -> Angular (決定是否要做下一個步驟)

結論

這樣就相當難破解了,至於安全性要強一點的話可以加上一些IP驗證機制在驗證碼的API驗證部分,比如幾分鐘內錯幾次就封鎖IP幾分鐘。

這個因為每個人使用的後台框架不同我就不寫範例,這個部落格基本上只會講解思考的流程,不太會做任何程式碼的分享。

What's your reaction?

Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0

Leave a reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *