import bcrypt
def hash_password(password):
# 生成一个新的salt
salt = bcrypt.gensalt()
print(salt)
# 使用生成的salt哈希密码
hashed_password = bcrypt.hashpw(password.encode('utf-8'), salt)
print(hashed_password)
# 将salt和哈希密码合并以便存储
stored_password = f"{salt.decode('utf-8')}${hashed_password.decode('utf-8')}"
print(stored_password)
return stored_password
def verify_password(input_password, stored_password):
# 从合并的字符串中提取存储的salt
salt = stored_password.split('$$')[0].encode('utf-8')
# 使用存储的salt哈希输入密码
hashed_input_password = bcrypt.hashpw(input_password.encode('utf-8'), salt)
# 直接比较哈希后的密码，而不再次哈希输入密码
return f"{salt.decode('utf-8')}${hashed_input_password.decode('utf-8')}" == stored_password
x = hash_password("xyz")
if verify_password("xyz", x):
print("Pass")
else:
print("Fail")
为了做个登录界面，校验一下用户名密码，了解了一下这个库
，简单做客一个用户注册和登录的界面：
源代码：
from flask import request, Flask, render_template
import bcrypt
import os
savePath = os.path.join(os.getcwd(), "userInfo")
# 实例化
app = Flask(__name__)
# 这里是主页面，即第一步显示的网页，有一个对话框和搜索按钮
@app.route('/')
def mainweb():
return render_template("first.html", result="欢迎使用NAS页面")
# 设定第二步的跳转网页，methods 设定请求类型，这里可以指定一种类型，就不用判断了。主要是类型不同，获取结果的方式不同
@app.route('/login', methods=['POST'])
def login():
# post 类型抓取对话框内的内容
username = request.form.get("username", "")
passwd = request.form.get("password", "")
if username == passwd == "":
return render_template('login.html', result="欢迎")
if verifyLogin(username, passwd):
return render_template('main.html', result="......")
else:
return render_template('login.html', result="用户名或密码错误")
@app.route('/signIn', methods=['POST'])
def signIn():
# post 类型抓取对话框内的内容
username = request.form.get("username", "")
passwd = request.form.get("password", "")
if username == passwd == "":
return render_template('signIn.html', result="请输入正确的用户名和密码")
if saveLogin(username, passwd):
return render_template('login.html', result="注册成功，请登录")
else:
return render_template('signIn.html', result="用户名重复,请更换用户名重新注册")
def verifyLogin(user, passwd):
# 读取存储的用户信息
saveFile = os.path.join(savePath, user)
if os.path.isfile(saveFile):
with open(saveFile, 'r', encoding="UTF-8") as f:
savepasswd = f.read()
# 从合并的字符串中提取存储的salt
salt = savepasswd.split('||')[0].encode('utf-8')
# 使用存储的salt哈希输入密码
hash_passwd = bcrypt.hashpw(passwd.encode('utf-8'), salt)
password = f"{salt.decode('utf-8')}||{hash_passwd.decode('utf-8')}"
return password == savepasswd
else:
return False
def saveLogin(user, passwd):
# 生成一个新的salt
salt = bcrypt.gensalt()
# 使用生成的salt哈希密码
hashed_password = bcrypt.hashpw(passwd.encode('utf-8'), salt)
# 将salt和哈希密码合并以便存储
stored_password = f"{salt.decode('utf-8')}||{hashed_password.decode('utf-8')}"
# 保存用户信息
saveFile = os.path.join(savePath, user)
if os.path.isfile(saveFile):
return False
else:
if os.path.isdir(savePath):
pass
else:
os.makedirs(savePath)
with open(saveFile, 'w', encoding="UTF-8") as f:
f.write(stored_password)
return True
if __name__ == '__main__':
app.run(host="0.0.0.0", port=5000)
主要需要调用到三个HTML模板,三个模版的背景图片还没放，也就是没有优化界面，暂时先做功能，后续优化
first.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 设置动图的样式和位置 */
.animated-image {
/* 宽度和高度可以根据需要调整 */
width: 200px;
height: 200px;
/* 位置属性可以控制动图的位置 */
position: absolute; /* 或者使用其他位置属性，如 relative、fixed 等 */
top: 50px; /* 调整 top、right、bottom 和 left 属性来定位动图 */
left: 100px;
}
</style>
</head>
<body>
<!-- 使用 img 标签嵌入动图 -->
<img src="{{ url_for('static', filename='huaji.gif') }}" alt="欢迎" class="animated-image">
<div class="login-container">
<h1>{{ result }}<h1>
<form action="/login" method="post">
<div class="form-group">
<button type="submit">进入登录页面</button>
</div>
</form>
<form action="/signIn" method="post">
<div class="form-group">
<button type="submit">进入注册页面</button>
</div>
</form>
</div>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 设置动图的样式和位置 */
.animated-image {
/* 宽度和高度可以根据需要调整 */
width: 200px;
height: 200px;
/* 位置属性可以控制动图的位置 */
position: absolute; /* 或者使用其他位置属性，如 relative、fixed 等 */
top: 50px; /* 调整 top、right、bottom 和 left 属性来定位动图 */
left: 100px;
}
</style>
</head>
<body>
<!-- 使用 img 标签嵌入动图 -->
<img src="{{ url_for('static', filename='huaji.gif') }}" alt="欢迎" class="animated-image">
<div class="login-container">
<h1>{{ result }}<h1>
<h2>log in</h2>
<form action="/login" method="post">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="submit">log in</button>
</div>
<form>
</div>
</body>
</html>
signIn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.signin-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 设置动图的样式和位置 */
.animated-image {
/* 宽度和高度可以根据需要调整 */
width: 200px;
height: 200px;
/* 位置属性可以控制动图的位置 */
position: absolute; /* 或者使用其他位置属性，如 relative、fixed 等 */
top: 50px; /* 调整 top、right、bottom 和 left 属性来定位动图 */
left: 100px;
}
</style>
</head>
<body>
<!-- 使用 img 标签嵌入动图 -->
<img src="{{ url_for('static', filename='huaji.gif') }}" alt="欢迎" class="animated-image">
<div class="signin-container">
<h1>{{ result }}<h1>
<h2>sign in</h2>
<form action="/signIn" method="post">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="submit">sign in</button>
</div>
</form>
</div>
</body>
</html>
其实就是套用一个模板，稍微修改一些参数，变成不同的模版
此脚本运行后，会先调用first.html 生成一个选择页面, 登录|注册
选择后跳转到相应页面
登录页面，会验证用户名密码是否有在本地存储，且正确无误，如果错误会显示提示。
登录上去以后，应该跳转主页面…我现在主页面暂时没有放功能…待完善…
注册页面，会验证注册的用户名是否存在，存在则显示错误提示，不存在则创建文件存储密码到本地，随后跳转到登录界面
慢慢学，慢慢看…