前些天,把我的手机升级到了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
宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒