前些天,把我的手机升级到了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
分享到:
相关推荐
**JavaScript手势解锁插件的特性:** 1. **兼容性**:这个插件强调了良好的兼容性,意味着无论是在桌面端还是移动端,无论是哪个浏览器,用户都能享受到一致的手势解锁体验。 2. **九宫格设计**:手势解锁通常采用...
Vue2手势解锁密码,也称为支付宝手势解锁,是一种常见的安全验证机制,用于增强用户在移动应用或网页中的安全性。在 Vue.js 框架中实现这样的功能,可以帮助开发者创建一个类似支付宝的手势密码组件,提高用户体验。...
HTML5手势解锁插件H5lock.js是一种基于JavaScript和HTML5技术实现的用户验证方法,它为用户提供了一种直观、个性化的解锁体验。不同于传统的密码输入,手势解锁允许用户通过在屏幕上绘制特定的图案来解锁功能或保护...
在这个场景下,我们主要关注JavaScript部分,因为手势解锁的核心逻辑将在这里实现。 手势解锁的关键组件是Canvas,它是HTML5的一个重要元素,允许我们在网页上进行图形绘制。在小程序中,我们同样可以使用Canvas ...
在移动设备应用中,为了保护用户隐私和提供安全的登录方式,手势密码图案解锁已经成为一种常见的安全措施。本文将深入探讨一个基于jQuery实现的手势密码解锁代码,该代码利用了`jquery-2.1.4.min.js`和`jquery....
基于开源代码优化完善而成, ...可自定义最大尝试次数、尝试次数过多后等待时间、解锁完成后回调; 密码、尝试次数、剩余时间等保存在localstorage,即使刷新页面也不会清空密码和已尝试次数以及锁定剩余时间。
手势解锁,也被称为图案解锁,让用户通过在预设的九宫格或更多宫格上绘制特定的连续线条来解锁设备。这种方式既直观又快速,用户可以根据自己的喜好创建独一无二的解锁图案,同时具有一定的安全性。 二、小程序开发...
在这个项目中,我们将探讨如何创建一个类似支付宝的手势解锁密码功能,主要聚焦在JavaScript库jQuery的应用上,特别适用于移动网页。 一、手势解锁界面设计 支付宝手势解锁的核心是九宫格布局,用户通过连接特定的...
**基于SVG的jQuery手势密码解锁插件** ...总的来说,这款基于SVG的jQuery手势密码解锁插件为开发者提供了一个便捷的工具,用于在网页中实现类似移动设备的手势解锁功能,增强了用户界面的互动性和安全性。
实现手势解锁的关键在于识别用户绘制的图案是否匹配预设的解锁序列。这需要一种算法来比较两个手势路径的相似度。常见的方法有: - **动态时间规整(Dynamic Time Warping, DTW)**:通过调整两个序列的时间轴,...
手势解锁是一种基于用户自定义的手势来解锁应用或设备的安全机制。在移动开发领域,手势解锁因其便捷性和个性化特点而受到广泛应用,特别是在微信小程序中,它可以为用户提供独特的交互体验。以下将详细介绍手势解锁...
【标题】"仿手机手势解锁"的实现是基于JavaScript编程技术,主要应用于Web前端开发,是一种模拟移动设备中常见手势解锁功能的解决方案。这个项目不依赖任何第三方库,完全依靠原生JavaScript代码来构建,因此对...
手势密码解锁是通过在预设的九宫格或自定义图形上绘制连续的点连接路径来形成特定的图案,以此作为身份验证的凭证。它的优点包括: 1. 用户友好:手势密码易于记忆,操作简便。 2. 隐私保护:相比于数字密码,观看...
手势解锁通过识别用户在预设图形上的滑动手势来验证身份。开发者需要了解触控事件的处理,包括开始、移动、结束等,以及如何记录和比较用户的绘制路径。 3. 用户界面设计:良好的手势解锁界面设计能提高用户体验。...
最后,`touchend`事件标志着用户手势结束,这时可以判断绘制的路径是否与预设的解锁图案匹配。 为了优化用户体验,通常还需要实现手势的平滑效果。这可以通过在`touchmove`事件中使用贝塞尔曲线(Bezier Curve)或...
在移动设备上,手势解锁已经成为了一种常见的安全验证方式,它通过用户自定义的图案路径来解锁应用或设备,既直观又方便。在这个项目中,我们将深入探讨微信小程序如何实现这样的功能。 首先,我们需要了解微信小...
- 图形匹配:将用户输入的手势与预设的解锁图案进行比对,判断是否匹配成功。 - 错误提示和重试机制:当解锁失败时,显示错误信息,并允许用户重新尝试。 - 设置和存储:允许用户自定义或修改解锁图案,并将其...
- **手势解锁**:用户通过在预设的图形网格上绘制特定的路径来解锁设备或应用,路径的起点和终点通常相同,形成的形状可以是数字、字母、自定义图案等。 - **HTML5 canvas**:手势解锁的核心技术之一,它提供了在...
在微信小程序中实现手势解锁,开发者通常会结合JavaScript、微信小程序API以及一些图形处理技术。以下是关于这个主题的详细知识点: 1. **微信小程序基础**:微信小程序是腾讯公司推出的一种轻量级的应用开发框架,...