Hướng dẫn how do you create a login system in python with a database? - làm thế nào để bạn tạo một hệ thống đăng nhập trong python với cơ sở dữ liệu?

Trong hướng dẫn này, chúng tôi sẽ tạo ra một hệ thống đăng nhập và đăng ký hoàn chỉnh với Python Bình và MySQL.

Python hiện đang tham gia vào cảnh phát triển web bằng bão, phát triển liên tục mỗi năm. Nó có một đường cong học tập thấp và do đó dễ dàng hơn nhiều để thích nghi với các ngôn ngữ đã biết khác (Node.js, PHP, v.v.). Ngoài ra, Python là tương đối mới, vì vậy sẽ thuận lợi khi bắt đầu học ngay lập tức.

Gói nâng cao bao gồm các tính năng bổ sung và liên kết tải xuống đến mã nguồn.

1. Bắt đầu

Có một vài bước chúng ta cần thực hiện trước khi tạo hệ thống đăng ký và đăng nhập Python. Chúng tôi cần tải xuống và thiết lập Python và cài đặt các gói mà ứng dụng của chúng tôi sẽ phụ thuộc vào.

1.1. Những gì bạn sẽ học trong hướng dẫn này

• Thiết kế biểu mẫu - Thiết kế một mẫu đăng nhập và đăng ký với HTML5 và CSS3. — Design a login and registration form with HTML5 and CSS3.
• Mẫu - Tạo các mẫu bình với HTML và Python. — Create Flask templates with HTML and Python.
• Xác thực cơ bản - Xác thực dữ liệu biểu mẫu được gửi đến máy chủ (tên người dùng, mật khẩu và email). — Validating form data that is sent to the server (username, password, and email).
• Quản lý phiên - Khởi tạo phiên và lưu trữ kết quả cơ sở dữ liệu. — Initialize sessions and store retrieved database results.
• Truy vấn MySQL - Chọn và chèn các bản ghi từ/trong bảng cơ sở dữ liệu của chúng tôi. — Select and insert records from/in our database table.
• Các tuyến đường - Định tuyến sẽ cho phép chúng tôi liên kết các URL với các chức năng mà chúng tôi sẽ tạo. — Routing will enable us to associate the URLs with the functions that we will create.

1.2. Yêu cầu

• Tải xuống và cài đặt Python, cho hướng dẫn này, tôi sẽ sử dụng Python 3.7.2. Đảm bảo kiểm tra tùy chọn Thêm Python vào đường dẫn trên màn hình Cài đặt cài đặt.
• Tải xuống và cài đặt MySQL Community Server và MySQL Workbench. Bạn có thể bỏ qua bước này nếu bạn đã cài đặt máy chủ MySQL.
• Mở dòng lệnh và cài đặt bình python với lệnh: bình cài đặt pip
• Cài đặt Flask-Mysqldb với lệnh: PIP Cài đặt Flask-Mysqldb

1.3. Cấu trúc và thiết lập tệp

Chúng tôi cần tạo thư mục dự án và tập tin của chúng tôi. Bạn có thể tạo thư mục ở bất cứ đâu trên máy tính của bạn, miễn là Python có thể truy cập nó. Tạo các thư mục và tập tin dưới đây.

Cấu trúc tập tin

\- pythonlogin & nbsp; & nbsp; & nbsp; & nbsp; |- main.py & nbsp; & nbsp; & nbsp; .css & nbsp; & nbsp; & nbsp; & nbsp; \- mẫu & nbsp; & nbsp; & nbsp; |- Đăng ký.html & nbsp; & nbsp; & nbsp; & nbsp; .html & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
    |-- main.py
    \-- static
        |-- style.css
    \-- templates
        |-- index.html
        |-- register.html
        |-- home.html
        |-- profile.html
        |-- layout.html

Mỗi tệp sẽ chứa những điều sau:

• Main.py - Đây sẽ là tệp dự án chính của chúng tôi, tất cả mã Python của chúng tôi sẽ có trong tệp này (các tuyến đường, kết nối MySQL, xác thực, v.v.).
• index.html - Mẫu mẫu đăng nhập được tạo bằng HTML5 và CSS3.
• Đăng ký.html - Mẫu mẫu đăng ký được tạo bằng HTML5 và CSS3.
• home.html-Mẫu nhà được giới hạn ở người dùng đăng nhập.
• Cấu hình.html-Mẫu hồ sơ được giới hạn ở người dùng đã đăng nhập. Các chi tiết của người dùng sẽ được điền trên trang này.
• Layout.html - Mẫu bố cục cho các mẫu nhà và hồ sơ.
• Style.css - Hiển thị kiểu CSS3 cho hệ thống đăng ký và đăng ký của chúng tôi.

Lệnh dưới đây sẽ khởi động máy chủ web của bạn (Windows):

• Đảm bảo rằng máy chủ MySQL của bạn đang hoạt động. Nó nên tự động bắt đầu nếu bạn cài đặt nó thông qua trình cài đặt. Ngoài ra, đảm bảo MySQL đang chạy trên cổng 3306 nếu không bạn sẽ gặp các lỗi kết nối.
• Mở dấu nhắc lệnh và điều hướng đến thư mục dự án của bạn. Bạn có thể làm điều này với lệnh CD C: \ Your_Project_Folder_Destination trên Windows.
• Lệnh chạy: Đặt flask_app = main.py
• Lệnh chạy: Đặt flask_debug = 1
• Lệnh chạy: Run Run

Chế độ gỡ lỗi sẽ cho phép chúng tôi chỉnh sửa các tệp của mình mà không liên tục khởi động lại máy chủ web.

2. Tạo cơ sở dữ liệu và bảng thiết lập

MySQL Workbench là GUI để quản lý cơ sở dữ liệu của chúng tôi. Thực hiện theo các hướng dẫn dưới đây về cách bắt đầu.

• Mở bàn làm việc MySQL
• Nhập chi tiết MySQL của bạn
• Nhấp vào kết nối kiểm tra. Nếu thành công, bạn có thể nhấp vào OK
• Mở kết nối của bạn
• Thực hiện câu lệnh SQL sau:

CREATE DATABASE IF NOT EXISTS `pythonlogin` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `pythonlogin`;

CREATE TABLE IF NOT EXISTS `accounts` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
  	`username` varchar(50) NOT NULL,
  	`password` varchar(255) NOT NULL,
  	`email` varchar(100) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

INSERT INTO `accounts` (`id`, `username`, `password`, `email`) VALUES (1, 'test', 'test', '');

Câu lệnh SQL ở trên sẽ tạo cơ sở dữ liệu pythonlogin của chúng tôi với các tài khoản bảng, cùng với một tài khoản thử nghiệm mà chúng tôi có thể sử dụng cho mục đích thử nghiệm.

3. Tạo biểu định kiểu (CSS3)

Chỉnh sửa tệp style.css và thêm thông tin sau:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

Các kiểu dáng trên sẽ cấu trúc các trang của chúng tôi và cung cấp trải nghiệm sáng tạo cho người dùng của chúng tôi. Vui lòng tùy chỉnh bảng kiểu (thay đổi màu văn bản, kích thước phông chữ, chiều rộng nội dung, v.v.).

4. Tạo hệ thống đăng nhập

Cuối cùng chúng ta có thể bắt đầu mã hóa với Python! Những gì chúng tôi sẽ làm trong phần này là tạo mẫu đăng nhập, kết nối với cơ sở dữ liệu MySQL của chúng tôi, thực hiện xác thực đăng nhập và xác định các biến phiên.

Điều đầu tiên chúng tôi cần làm là nhập các gói chúng tôi sẽ sử dụng, chỉnh sửa tệp Main.py và thêm những thứ sau:

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re

Bây giờ chúng tôi đã nhập tất cả các gói chúng tôi sẽ sử dụng, chúng tôi cần tạo các biến liên quan đến MYSQL và ứng dụng và định cấu hình chi tiết kết nối MySQL.

Thêm vào sau:

app = Flask(__name__)

# Change this to your secret key (can be anything, it's for extra protection)
app.secret_key = 'your secret key'

# Enter your database connection details below
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'pythonlogin'

# Intialize MySQL
mysql = MySQL(app)

Đảm bảo cấu hình các biến MySQL để phản ánh chi tiết MySQL của bạn.

Bây giờ chúng ta có thể tiến hành tạo trang đăng nhập. Để làm điều đó, chúng ta cần tạo ra một tuyến đường mới. Các tuyến đường sẽ cho phép chúng tôi liên kết các chức năng của chúng tôi với một URL cụ thể.

Thêm vào sau:

4.1 Creating the Login Template

Bây giờ chúng ta có thể tiến hành tạo trang đăng nhập. Để làm điều đó, chúng ta cần tạo ra một tuyến đường mới. Các tuyến đường sẽ cho phép chúng tôi liên kết các chức năng của chúng tôi với một URL cụ thể.

	
		
		
		
		
	
	
		

			
Login
			

				Login
				Register
			
			

				
					
				
				
				
					
				
				
				
{{ msg }}
				
			
		
	

# http://localhost:5000/pythonlogin/ - the following will be our login page, which will use both GET and POST requests
@app.route('/pythonlogin/', methods=['GET', 'POST'])
def login():
    # Output message if something goes wrong...
    msg = ''
    return render_template('index.html', msg='')

Chỉnh sửa tệp index.html và thêm:

http://localhost:5000/pythonlogin/

Như bạn có thể thấy với mẫu đăng nhập, chúng tôi tạo biểu mẫu cùng với các trường đầu vào: tên người dùng và mật khẩu. Phương thức của biểu mẫu được đặt để đăng quyết định loại yêu cầu chúng tôi muốn gửi đến máy chủ của chúng tôi. Chúng tôi sẽ sử dụng một yêu cầu POST để gửi dữ liệu biểu mẫu.

Nếu chúng tôi điều hướng đến http: // localhost: 5000/pythonlogin/trong trình duyệt web của chúng tôi, nó sẽ trông giống như sau:

Nếu bạn nhấp vào nút Đăng nhập, sẽ không có gì xảy ra hoặc sẽ trả lại lỗi, đó là vì chúng tôi chưa thực hiện mã xử lý yêu cầu POST.

After:

def login():
    # Output message if something goes wrong...
    msg = ''

Add:

    # Check if "username" and "password" POST requests exist (user submitted form)
    if request.method == 'POST' and 'username' in request.form and 'password' in request.form:
        # Create variables for easy access
        username = request.form['username']
        password = request.form['password']

4.2 Người dùng xác thực với Python

Thêm vào sau:

        # Check if account exists using MySQL
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        cursor.execute('SELECT * FROM accounts WHERE username = %s AND password = %s', (username, password,))
        # Fetch one record and return result
        account = cursor.fetchone()

Đảm bảo cấu hình các biến MySQL để phản ánh chi tiết MySQL của bạn.

Thêm vào sau:

        # If account exists in accounts table in out database
        if account:
            # Create session data, we can access this data in other routes
            session['loggedin'] = True
            session['id'] = account['id']
            session['username'] = account['username']
            # Redirect to home page
            return 'Logged in successfully!'
        else:
            # Account doesnt exist or username/password incorrect
            msg = 'Incorrect username/password!'

Đảm bảo cấu hình các biến MySQL để phản ánh chi tiết MySQL của bạn.

Bây giờ chúng ta có thể tiến hành tạo trang đăng nhập. Để làm điều đó, chúng ta cần tạo ra một tuyến đường mới. Các tuyến đường sẽ cho phép chúng tôi liên kết các chức năng của chúng tôi với một URL cụ thể.

# http://localhost:5000/pythonlogin/ - the following will be our login page, which will use both GET and POST requests
@app.route('/pythonlogin/', methods=['GET', 'POST'])
def login():
    # Output message if something goes wrong...
    msg = ''
    return render_template('index.html', msg='')

Chỉnh sửa tệp index.html và thêm:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

Như bạn có thể thấy với mẫu đăng nhập, chúng tôi tạo biểu mẫu cùng với các trường đầu vào: tên người dùng và mật khẩu. Phương thức của biểu mẫu được đặt để đăng quyết định loại yêu cầu chúng tôi muốn gửi đến máy chủ của chúng tôi. Chúng tôi sẽ sử dụng một yêu cầu POST để gửi dữ liệu biểu mẫu.

Nếu chúng tôi điều hướng đến http: // localhost: 5000/pythonlogin/trong trình duyệt web của chúng tôi, nó sẽ trông giống như sau:

Nếu bạn nhấp vào nút Đăng nhập, sẽ không có gì xảy ra hoặc sẽ trả lại lỗi, đó là vì chúng tôi chưa thực hiện mã xử lý yêu cầu POST.

4.2 Người dùng xác thực với Python

Với mã ở trên, chúng tôi sử dụng câu lệnh IF để kiểm tra xem phương thức được yêu cầu có đăng và kiểm tra xem tên người dùng và biến mật khẩu có tồn tại trong yêu cầu biểu mẫu không. Nếu cả hai đều tồn tại, các biến người dùng và mật khẩu sẽ được tạo, sẽ được liên kết với các biến biểu mẫu.

Mã trên sẽ thực thi truy vấn SQL sẽ truy xuất chi tiết tài khoản từ bảng tài khoản của chúng tôi trong cơ sở dữ liệu MySQL của chúng tôi. Các biến tên người dùng và mật khẩu được liên kết với truy vấn này vì đó là những gì chúng tôi sẽ sử dụng để tìm tài khoản.

Mã trên sẽ xác định xem tài khoản có tồn tại không. Nếu có, các biến phiên được khai báo. Các biến phiên này sẽ được ghi nhớ cho người dùng vì chúng sẽ được sử dụng để xác định xem người dùng có được đăng nhập hay không.

Các biến phiên về cơ bản hoạt động như cookie trình duyệt. Chúng được lưu trữ trên máy chủ trái ngược với trình duyệt của người dùng.

Nếu tài khoản không tồn tại, chúng ta chỉ có thể xuất lỗi trên biểu mẫu đăng nhập.

Tuyến đường đăng nhập của bạn sẽ trông giống như sau:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

Để đảm bảo mọi thứ đang hoạt động chính xác, điều hướng đến http: // localhost: 5000/pythonlogin/và nhập "kiểm tra" trong cả hai trường người dùng và mật khẩu, sau đó nhấp vào nút đăng nhập. Bạn sẽ nhận được một thông báo xuất bản "đã đăng nhập thành công!".

4.3 Tạo tập lệnh đăng xuất

Đối với người dùng để đăng xuất, tất cả những gì chúng tôi phải làm là xóa các biến phiên được tạo khi người dùng đăng nhập.

Thêm mã sau vào tệp chính.py:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

Mã trên sẽ xóa từng biến phiên được liên kết với người dùng. Nếu không có các biến phiên này, người dùng không thể đăng nhập vào. Sau đó, người dùng được chuyển hướng đến trang đăng nhập.

After:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

Add:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

Chúng ta có thể đăng xuất bằng cách điều hướng đến URL sau: http: // localhost: 5000/pythonlogin/đăng xuất

Sau đó, mã sẽ chèn một tài khoản mới vào bảng tài khoản của chúng tôi.

Để kiểm tra rằng nó đang hoạt động chính xác, điều hướng đến http: // localhost: 5000/pythonlogin/đăng ký và điền vào biểu mẫu và nhấp vào nút Đăng ký. Bạn sẽ nhận được phản hồi sau:

http://localhost:5000/pythonlogin/register

Bây giờ chúng tôi có thể quay lại tệp index.html của mình và thay đổi dòng này:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

To:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

Bây giờ người dùng có thể đăng ký và đăng nhập vào ứng dụng của chúng tôi. Tiếp theo, chúng tôi sẽ tạo một trang chủ cơ bản cho người dùng đăng nhập.

6. Tạo trang chủ

Trang chủ sẽ chỉ giới hạn ở người dùng đăng nhập. Người dùng không đăng ký không thể truy cập trang này. Bạn có thể điều chỉnh trang này và tạo thêm các trang.

Chỉnh sửa tệp Main.py và thêm thông tin sau:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

Mã trên sẽ tạo chức năng tuyến đường gia đình. Nếu người dùng được đăng nhập, họ sẽ có quyền truy cập vào trang chủ. Nếu không, chúng sẽ được chuyển hướng đến trang đăng nhập.

Chỉnh sửa tệp home.html và thêm thông tin sau:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h2, .register h2 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h2, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h2 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

Chúng tôi cũng cần tạo bố cục cho các trang đăng nhập của chúng tôi. Chỉnh sửa tệp Layout.html và thêm:

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re

Bây giờ chúng ta có thể dễ dàng mở rộng bố cục tương tự cho cả trang nhà và hồ sơ.

Hiện tại, khi người dùng đăng nhập, sẽ có một thông báo đầu ra cơ bản, giờ đây chúng tôi có thể thay đổi điều đó để chuyển hướng người dùng đến trang chủ mới của chúng tôi. Tìm mã sau trong chức năng tuyến đăng nhập:

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re

Thay thế bằng:

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re

Bây giờ người dùng sẽ được chuyển hướng đến trang chủ khi họ đăng nhập. Nếu chúng tôi nhập chi tiết kiểm tra vào biểu mẫu đăng nhập và nhấp vào nút Đăng nhập, chúng tôi sẽ thấy như sau:

http://localhost:5000/pythonlogin/home

Nó chỉ là một trang chủ đơn giản sẽ xuất tên người dùng. Bạn có thể thực hiện mã của riêng bạn sau.

Tiếp theo, chúng tôi sẽ tạo trang hồ sơ và điền thông tin chi tiết của người dùng.

7. Tạo trang hồ sơ

Trang hồ sơ sẽ điền tất cả các chi tiết liên quan đến tài khoản (tên người dùng, mật khẩu và email).

Thêm tuyến sau vào tệp chính.py:

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re

Mã trên sẽ tạo lộ trình hồ sơ và truy xuất tất cả các chi tiết tài khoản từ cơ sở dữ liệu, nhưng chỉ khi người dùng được đăng nhập.

Chỉnh sửa tệp hồ sơ.html và thêm:

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re

Mã trên sẽ mở rộng tệp bố cục (bố cục.html) mà chúng tôi đã tạo trước đó. Nếu bạn điều hướng đến trang hồ sơ, nó sẽ trông giống như sau:

http://localhost:5000/pythonlogin/profile

Về cơ bản, nó cho các trang nhà và hồ sơ. Gói nâng cao bao gồm tính năng Chỉnh sửa hồ sơ sẽ cho phép người dùng thay đổi tên người dùng, mật khẩu và email của họ.

Sự kết luận

Xin chúc mừng! Bạn đã tạo thành công hệ thống đăng ký và đăng ký của riêng mình với Python Bình và MySQL. Bạn tự do sử dụng mã nguồn từ hướng dẫn này trong (các) ứng dụng của bạn.

Nếu bạn thích hướng dẫn này, đừng quên nhấn nút chia sẻ và bỏ bình luận vì nó sẽ giúp chúng tôi tạo ra nhiều nội dung trong tương lai.

Nếu bạn muốn hỗ trợ chúng tôi, hãy xem xét việc mua một gói bên dưới vì nó sẽ giúp chúng tôi tạo ra các hướng dẫn chất lượng hơn và giữ cho máy chủ của chúng tôi hoạt động.

Nền tảng

Nâng cao

Mã nguồn

Cơ sở dữ liệu Tệp SQL

Hệ thống đăng nhập & đăng ký

Trang chủ

Trang hồ sơ

Kích hoạt tính năng tài khoản

Chỉnh sửa trang hồ sơ

Nhớ tôi tính năng

Tích hợp Ajax

Mã hóa mật khẩu

Quên và đặt lại mật khẩu

Bảo vệ CSRF

Bảo vệ vũ phu

Bảo vệ Recaptcha

Xác thực hai yếu tố

Kích hoạt mẫu email

Bảng quản trị - Xem bảng điều khiển - Tạo, chỉnh sửa và xóa tài khoản - Tài khoản tìm kiếm, sắp xếp và lọc - Quản lý mẫu email - Cài đặt chỉnh sửa
— View Dashboard
— Create, edit, and delete accounts
— Search, sort, and filter accounts
— Manage Email Templates
— Edit Settings

Thiết kế đáp ứng (thân thiện với thiết bị di động)

Tệp SCSS

Mã nhận xét

Cập nhật và hỗ trợ miễn phí (lỗi và các vấn đề nhỏ)

Hướng dẫn sử dụng

* Thanh toán được xử lý với PayPal/Stripe. * Gói nâng cao cũng bao gồm nguồn hướng dẫn và gói cơ bản.
* Advanced package also includes the tutorial source and basic package.

Để biết thêm thông tin chi tiết về gói nâng cao, bấm vào đây.

Hãy thử kết nối với cơ sở dữ liệu "MyDatabase": Nhập MySQL.Connector. ....

Làm thế nào để bạn tạo một hệ thống đăng nhập bằng SQL trong Python?

Làm thế nào để bạn tạo cơ sở dữ liệu người dùng trong Python?

Tạo cơ sở dữ liệu có tên "MyDatabase": Nhập MySQL.kết nối.....