前言
未来，可能会有这样一种密码系统：即使别人拿到你的密码，密码输入正确，但也无法通过验证，只有自己输入自己的密码，才是正确的。
功能效果
设计一种新的密码验证功能，不但验证密码的正确性，还会检测密码输入规律，判断密码输入速度、分析每个字符按下的时间间隔。
技术原理
每个人输入字符时，都有自己的特定的规律习惯，特别是密码：如果是一个高频使用的字符串，更是会有自己独特的输入节奏，比如整体输入耗时、每个字符间的停顿时间间隔。如果密验证系统在检测时同时对这行行为特征判断，那么即使密码泄露、即使他人获取了密码，也无法使用，因为他人不知道密码主人的输入习惯。
演示
下面，将演示如何实现这样的密码系统。
现在的密码校验，都是将密码由前端传给后端，由后端判断密码是否正确。而这种新的系统，在用户输入密码时，会同时记录每个字符输入时的时间，并和密码一同发往后端。两者的区别是：新增对密码输入时间的分析。
源码说明
说明：为演示方便，在网页中实现此演示，并在前端直接验证。实际应用时，密码、时间数据等都应该存储在后端，校验也应该在后端完成。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div class="container">
<div>
<span>请设置密码：</span>
<input onkeydown="speed_password_check(event)" type="text">
<button onclick="init()">确定</button>
</div>
<div>
<span>请输入密码：</span>
<input onkeydown="speed_password_init(event)" type="text" id="pass">
<button onclick="check()">确定</button>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
let password_check = [], speed_check = [], password = [], speed = []
function speed_password_check (event) {
password_check.push(String.fromCharCode(event.keyCode + 32));
speed_check.push(Date.now());
}
function init () {
if (password_check.length == 4) {
var msg = "密码：" + password_check.join("") + "，时间特征：" + speed_check;
console.log(msg)
alert("已初始化，" + msg);
} else {
alert("密码长度不正确，请重新设定");
password_check = [];
speed_check = [];
}
}
|
上图部分，是初始化，预存储一个密码和密码对应的按键时间（单位为毫秒）。然后的重点是校验，在用户输入密码后，先校验密码的正确性，再校验其输入规律
密码校验
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| function check () {
if (password_check.join("") == password.join("")) {
var time_range = 300;
var check_ok = true;
if (Math.abs((speed[1] - speed[0]) - (speed_check[1] - speed_check[0])) >= time_range) {
check_ok = false;
}
if (Math.abs((speed[2] - speed[1]) - (speed_check[2] - speed_check[1])) >= time_range) {
check_ok = false;
}
if (Math.abs((speed[3] - speed[2]) - (speed_check[3] - speed_check[2])) >= time_range) {
check_ok = false;
}
if (check_ok == false) {
alert("密码时间校验失败");
password = [];
speed = [];
} else {
alert("密码、时间全部校验成功")
}
} else {
console.log(password,speed);
alert("密码错误");
password = [];
speed = [];
}
}
|
有一个现实问题是：用户每次输入密码时，按键速度不可能每次都完全一样，肯定是有差别的，因此，设置了一个容错值，如上图中显示，在本例了这个值设为了 300 毫秒，即：允许每个按键的时间有一定差别，可以快一些，也可以慢一些。
写在最后
至此，文章就分享完毕了,本文只演示了一个功能简单的 DEMO，相信在未来，定会有这样的密码系统，我是程序员LinXiao，一位前端开发工程师。
文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注
如果你对我有兴趣，欢迎添加我的个人微信Lxlucky2022
Github：https://github.com/KevinLin8