原创:让密码不再被遗忘 - 在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版的图形口令就算搞定了,至于如何嵌入到项目里使用,就很简单了,这里不再敖述。
附件下载地址:https://files.cnblogs.com/netWild/图形口令(DrawPass).zip
版权声明: 本文为博主 网无忌 原创文章,欢迎转载,但请务必标注原文链接。
本文链接: https://www.cnblogs.com/netWild/archive/2012/07/09/DrowPass.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂