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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MD5盐值加密demo</title>
<style>
#conta {
display: flex;
justify-content: space-between;
}
#conta > * {
width: calc(50% - 4px);
}
</style>
</head>
<body>
<h3 style="text-align: center;">MD5盐值加密&解密过程模拟</h3>
<hr />
<div id="conta">
<div id="left">
<h4>模拟注册</h4>
<div>
<label for="username"></label>
<input
type="text"
id="username"
placeholder="请输入用户名"
/>
</div>
<div>
<label for="password"></label>
<input type="text" id="password" placeholder="请输入密码" />
</div>
<div>
<button id="register">注册</button>
</div>
<hr />
<h5>注册结果</h5>
<p>用户名：<span id="usernameRes"></span></p>
<p>盐值：<span id="salt"></span></p>
<p>密码最终加密结果：<span id="passwordRes"></span></p>
</div>
<div id="right">
<h4>模拟登录</h4>
<div>
<label for="username2"></label>
<input
type="text"
id="username2"
placeholder="请输入用户名"
/>
</div>
<div>
<label for="password"></label>
<input
type="password2"
id="password2"
placeholder="请输入密码"
/>
</div>
<div>
<button id="login">登录</button>
</div>
<hr />
<h5>登录结果</h5>
<p>用户名：<span id="username2Res"></span></p>
<p>MD5加密的密码：<span id="password2Res"></span></p>
<p>登录结果：<span id="loginRes"></span></p>
</div>
</div>
<script src="./node_modules/md5/dist/md5.min.js"></script>
<script>
const $ = (id) => document.getElementById(id);
const $usernameInput = $('username'),
$passwordInput = $('password'),
$registerBtn = $('register'),
$usernameRes = $('usernameRes'),
$passwordRes = $('passwordRes'),
$saltRes = $('salt'),
$username2Input = $('username2'),
$password2Input = $('password2'),
$loginBtn = $('login'),
$username2Res = $('username2Res'),
$password2Res = $('password2Res'),
$loginRes = $('loginRes');
const db = [];
const random = (min = 1, max = 10, decimal = 0) => {
return Math.round(Math.random() * (max - min) + min);
};
const getSalt = (saltLength = 20) => {
const saltSourceStr =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let salt = '';
for (let i = 0; i < saltLength; i++) {
salt +=
saltSourceStr[(0, random(saltSourceStr.length - 1))];
}
return salt;
};
const MD5SaltCrypto = (inputPwd) => {
const salt = getSalt();
let pwdMd5 = MD5(inputPwd);
let pwdSaltMd5 = MD5(salt + pwdMd5);
return {
pwdSaltMd5,
salt
};
};
$registerBtn.onclick = () => {
let username = $usernameInput.value;
let { pwdSaltMd5, salt } = MD5SaltCrypto($passwordInput.value);
$usernameRes.innerText = username;
$passwordRes.innerText = pwdSaltMd5;
$saltRes.innerText = salt;
db.push({
username,
password: pwdSaltMd5,
salt
});
};
$loginBtn.onclick = () => {
let username = $username2Input.value;
let password = MD5($password2Input.value);
let find = db.find((user) => {
if (
user.username === username &&
user.password === MD5(user.salt + password)
)
return true;
return false;
});
if (find) $loginRes.innerText = '登录成功！';
else $loginRes.innerText = '登录失败！';
};
</script>
</body>
</html>
|
