讓密碼再也不被遺忘 - 在web中嘗試圖形口令！

Technorati 標籤: 密碼, web

前些天，把個人手機升級到了Android 4.0版本，無心中發現多了一種屏幕解鎖方式：圖形口令

就是在屏幕上有9個圓點，按3*3的矩陣排列，以這9個圓點爲節點，能夠隨意劃出一個幾何形狀，記下這個幾何形狀的划動路徑，下次爲屏幕解鎖時按照記憶將這個形狀划動出來，就算是解鎖成功啦！

體驗以後，感受不錯，有必定的可玩性，呵呵

更重要的是，大腦對於記憶一張圖形，相比於一串枯燥的字符，仍是更有優點的，這對於避免將口令遺忘應該有些幫助

隨即就想在WEB上也實現這種圖形口令，讓WEB的密碼輸入多一種選擇也算是一件好事吧

真正作起來，還算是簡單的

首先用PS畫了一張底圖，上面有16個圓點，按4*4的矩陣排列，至於爲何要用4*4，主要是3*3的矩陣感受有點小，組合也比較簡單。4*4的話，安全性相對要更高些，另外，16個節點，正好可使用16進制的0~9和A~F來表示。再大的話，好比5*5，貌似有點過於複雜了，怕是本身劃出的圖形都會很難記住，那樣就得不償失啦。

底圖：

哈哈，還不錯吧，自我感受非常惟美   :)

底圖作好以後，開始寫腳本

在WEB上畫線，並不是頭一次，考慮到對IE、FF、Opera的兼容性，首先將VML、PNG等方式Pass掉，至於SVG，對於老版本的IE支持也不太友好，仍是放棄了，Flash卻是好選擇，不過嫌麻煩，最後仍是決定使用最原生態的辦法：JS+DIV

通過3個多小時的敲敲打打，非常新鮮的WEB版圖形口令就算大功告成啦！

效果預覽：

點擊肯定後，返回的口令原文：

在劃線時，又增長了預覽的效果，感受好多了。

WEB版的圖形口令就算搞定了，至於如何嵌入到項目裏使用，就很簡單了，這裏再也不敖述。

附件下載地址：http://files.cnblogs.com/netWild/圖形口令（DrawPass）.zip

---------------------------------------------------------------------------

一天一天過去了，第三天我想通了 ... ...