hash 密码校验

2023-12-22 07:23:13

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>

<!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 生成一个选择页面, 登录|注册
选择后跳转到相应页面
登录页面，会验证用户名密码是否有在本地存储，且正确无误，如果错误会显示提示。
登录上去以后，应该跳转主页面…我现在主页面暂时没有放功能…待完善…
注册页面，会验证注册的用户名是否存在，存在则显示错误提示，不存在则创建文件存储密码到本地，随后跳转到登录界面

慢慢学，慢慢看…

文章来源:https://blog.csdn.net/weixin_44517278/article/details/135136573
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！