Главная » Python

Форма входа/регистрации с использованием Python Flask и MySQL.

На чтение 14 мин. Просмотров 113 Опубликовано

Требования

  • Скачайте и установите Python, для этого руководства я буду использовать Python 3.9.

  • Скачайте и установите MySQL Community Server и MySQL Workbench. Вы можете пропустить этот шаг, если у вас уже установлен сервер MySQL.
    Или скачайте его здесь

  • Установите Python Flask с помощью команды:

pip install flask
Войдите в полноэкранный режим Выйти из полноэкранного режима
  • Установите Flask-MySQLdb командой:
pip install flask-mysqldb
Войти в полноэкранный режим Выйти из полноэкранного режима
Структура файлов и настройка
-- loginform
    |-- main.py
    -- static
        |-- style.css
    -- templates
        |-- index.html
        |-- register.html
        |-- home.html
        |-- layout.html
Войти в полноэкранный режим Выйти из полноэкранного режима
Создание базы данных и настройка таблиц

Выполните следующие операторы SQL:

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

CREATE TABLE IF NOT EXISTS `form` (
    `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 `form` (`id`, `username`, `password`, `email`) VALUES (1, 'test', '1234', 'test@test.com');
Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше оператор SQL создаст нашу базу данных LOGIN с таблицей формы, а также тестовую учетную запись, которую мы можем использовать для тестирования.

Создание формы входа в систему.

Импортируйте модули, которые вы собираетесь использовать, в файл main.py следующим образом;

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re
Вход в полноэкранный режим Выйти из полноэкранного режима

Затем создайте переменные, связанные с MySQL и приложением, и настройте детали соединения с MySQL.

app = Flask(__name__)

app.secret_key = ' 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'] = 'LOGIN'

# Intialize MySQL
mysql = MySQL(app)
Войти в полноэкранный режим Выйти из полноэкранного режима

Создайте страницу входа. Мы создадим новый маршрут.

@app.route('/login/', methods=['GET', 'POST'])
def login():
    # Output message if something goes wrong...
    msg = ''
    return render_template('index.html', msg='')
Войдите в полноэкранный режим Выход из полноэкранного режима
Создание шаблона входа в систему.

Добавьте следующий код в файл index.html

!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login Form</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
    </head>
    <body>
        <div class="login">
            <h1>LOGIN</h1>
            <div class="links">
                <a href="{{ url_for('login') }}" class="active">LOGIN</a>
                <a href="{{ url_for('register') }}">REGISTER</a>
            </div>
            <form action="" method="post">
                <label for="username">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" name="username" placeholder="Username" id="username" required>
                <label for="password">
                    <i class="fa fa-lock"></i>
                </label>
                <input type="password" name="password" placeholder="Password" id="password" required>
                <div class="msg">{{ msg }}</div>
                <input type="submit" value="Login">
            </form>
        </div>
    </body>
</html>
Вход в полноэкранный режим Выйти из полноэкранного режима
Создание таблицы стилей (CSS3).

Добавьте следующий код в файл style.css

* {
    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 h1, .register h1 {
    text-align: center;
    color: brown;
    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: brown;
}
.login .links a.active, .register .links a.active {
    border-bottom: 3px solid brown;
    color:brown;
}
.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:brown;
    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: brown;
    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:brown;
    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 h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    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;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Если мы перейдем на сайт http://localhost:5000/login/ в нашем веб-браузере, он будет выглядеть следующим образом:

Аутентификация пользователей с помощью Python.

Теперь мы можем добавить код аутентификации в созданный нами маршрут входа.

# 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']
Вход в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код использует оператор if для проверки, является ли запрашиваемый метод POST, и проверяет, существуют ли переменные имени пользователя и пароля в запросе формы.

Если они обе существуют, то переменные имени пользователя и пароля будут созданы и связаны с переменными формы.

Затем добавьте следующий код;

# Check if form exists using MySQL
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        cursor.execute('SELECT * FROM form WHERE username = %s AND password = %s', (username, password,))
        # Fetch one record and return result
        account = cursor.fetchone()
Вход в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код выполнит SQL-запрос, который извлечет учетную запись из таблицы формы в нашей базе данных MySQL. Переменные имени пользователя и пароля связаны с этим запросом, так как это то, что мы будем использовать для поиска учетной записи.

# If account exists in form table in our 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!'
Вход в полноэкранный режим Выход из полноэкранного режима

Из приведенного выше кода следует, что если учетная запись существует, то объявляются переменные сессии.

Эти переменные сессии будут запоминаться для пользователя, поскольку они будут использоваться для определения того, вошел ли пользователь в систему или нет.

Если учетная запись не существует, мы можем просто вывести ошибку на форму входа.

Чтобы убедиться, что все работает правильно, перейдите по адресу http://localhost:5000/login/.

Введите «test» в поле имени пользователя и «1234» в поле пароля, а затем нажмите кнопку Login. Вы должны получить сообщение «Logged in successfully!».

Создание сценария выхода из системы.

Чтобы пользователь вышел из системы, необходимо удалить переменные сессии, которые были созданы при входе пользователя в систему.

Добавьте следующий код в файл main.py:

@app.route('/login/logout')
def logout():
    # Remove session data, this will log the user out
    session.pop('loggedin', None)
    session.pop('id', None)
    session.pop('username', None)
    # Redirect to login page
    return redirect(url_for('login'))
Вход в полноэкранный режим Выйти из полноэкранного режима

Когда мы перейдем по следующему URL: http://localhost:5000/login/logout, пользователь выйдет из системы и будет перенаправлен на страницу входа.

Создание системы регистрации.

Нам нужна система регистрации, которую пользователи смогут использовать для регистрации на нашем сайте.
Мы создадим новый маршрут регистрации и создадим шаблон регистрации, а также форму регистрации, поля ввода.

Шаблон регистрации

Добавьте следующий код в файл register.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Register</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
    </head>
    <body>
        <div class="register">
            <h1>Register</h1>
            <div class="links">
                <a href="{{ url_for('login') }}">Login</a>
                <a href="{{ url_for('register') }}" class="active">Register</a>
            </div>
            <form action="{{ url_for('register') }}" method="post" autocomplete="off">
                <label for="username">
                    <i class="fa fa-user"></i>
                </label>
                <input type="text" name="username" placeholder="Username" id="username" required>
                <label for="password">
                    <i class="fa fa-lock"></i>
                </label>
                <input type="password" name="password" placeholder="Password" id="password" required>
                <label for="email">
                    <i class="fa fa-envelope-open"></i>
                </label>
                <input type="email" name="email" placeholder="Email" id="email" required>
                <div class="msg">{{ msg }}</div>
                <input type="submit" value="Register">
            </form>
        </div>
    </body>
</html>
Вход в полноэкранный режим Выйти из полноэкранного режима
#Регистрация пользователей с помощью Python

После того как мы создали шаблон регистрации, нам нужно зарегистрировать пользователей.

Для этого мы создадим маршрут «register», который будет обрабатывать POST-запрос и вставлять новую учетную запись в таблицу нашей формы, но только если введенные поля действительны.

Добавьте следующий код в файл main.py;

def register():
    # Output message if something goes wrong...
    msg = ''
    # Check if "username", "password" and "email" POST requests exist (user submitted form)
    if request.method == 'POST' and 'username' in request.form and 'password' in request.form and 'email' in request.form:
        # Create variables for easy access
        username = request.form['username']
        password = request.form['password']
        email = request.form['email']

        # Check if account exists using MySQL
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        cursor.execute('SELECT * FROM form WHERE username = %s', (username,))
        account = cursor.fetchone()
        # If account exists show error and validation checks
        if account:
            msg = 'Account already exists!'
        elif not re.match(r'[^@]+@[^@]+.[^@]+', email):
            msg = 'Invalid email address!'
        elif not re.match(r'[A-Za-z0-9]+', username):
            msg = 'Username must contain only characters and numbers!'
        elif not username or not password or not email:
            msg = 'Please fill out the form!'
        else:
            # Account doesnt exists and the form data is valid, now insert new account into accounts table
            cursor.execute('INSERT INTO accounts VALUES (NULL, %s, %s, %s)', (username, password, email,))
            mysql.connection.commit()
            msg = 'You have successfully registered!'
    elif request.method == 'POST':
        # Form is empty... (no POST data)
        msg = 'Please fill out the form!'
    # Show registration form with message (if any)
    return render_template('register.html', msg=msg)
Вход в полноэкранный режим Выйти из полноэкранного режима

Мы создадим маршрут «register» и добавим валидацию, которая будет проверять, все ли поля формы существуют. Если их нет, то выведем простую ошибку.

Приведенный выше код также выберет учетную запись с заданными полями имени пользователя и пароля.

Если учетная запись не существует, мы можем перейти к проверке введенных данных. Валидация проверит, действителен ли введенный email и содержит ли имя пользователя только буквы и цифры.

Код также вставит новую учетную запись в таблицы нашей формы.

Чтобы проверить правильность работы, перейдите на сайт http://localhost:5000/login/register, заполните форму и нажмите кнопку Register.
Если все в порядке, вы получите следующий ответ:

Создание домашней страницы.

Доступ к главной странице будет ограничен только для зарегистрированных пользователей. Незарегистрированные пользователи не смогут получить доступ к этой странице.

Добавьте следующий код в файл main.py

@app.route('/login/home')
def home():
    # Check if user is loggedin
    if 'loggedin' in session:
        # User is loggedin show them the home page
        return render_template('home.html', username=session['username'])
    # User is not loggedin redirect to login page
    return redirect(url_for('login'))
Вход в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код создаст функцию домашнего маршрута. Если пользователь зарегистрирован, он будет иметь доступ к домашней странице, если нет, он будет перенаправлен на страницу входа.

Создайте шаблон home.

Добавьте следующий код в файл home.html

{% extends 'layout.html' %}

{% block title %}Home{% endblock %}

{% block content %}
<h2>Welcome to my Blog</h2>
<p style="color: black;">Welcome back, {{ username }}!. Check out more exciting articles on Python Programming Language.</p>
<p style="background-color: aqua;text-align: center;font-weight: bolder;"><a href="https://dev.to/phylis/python-101-introduction-to-python-2eh4">Introduction to Python</a></p>
<p style="background-color: aqua; text-align: center;font-weight: bolder;"><a href="https://dev.to/phylis/introduction-to-control-flow-and-functions-in-python-41cc">Python Functions and Control Flow</a></p>
<p style="background-color: aqua; text-align: center; font-weight: bolder;"><a href="https://dev.to/phylis/python-classes-and-objects-51on">Python Classes and Objects</a></p>


{% endblock %}
Вход в полноэкранный режим Выйти из полноэкранного режима

Нам также нужно создать макет для страниц входа в систему, отредактируйте файл layout.html и добавьте:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
    </head>
    <body class="loggedin">
        <nav class="navtop">
            <div>
                <h1>@Phy Blog</h1>
                <a href="{{ url_for('home') }}"><i class="fa fa-home"></i>Home</a>

                <a href="{{ url_for('logout') }}"><i class="fa fa-sign-out"></i>Logout</a>
            </div>
        </nav>


   </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь при входе в систему пользователь будет перенаправлен на главную страницу.

Если мы введем правильные данные в форму входа и нажмем кнопку Войти, мы увидим следующее:

Теперь мы создали нашу систему входа и регистрации с использованием Python Flask и MySQL со следующими возможностями:

  • Пользователи могут войти в систему только в том случае, если их учетные данные присутствуют в базе данных.

  • Не войдя в систему, пользователь не может перейти на следующую страницу, даже используя маршрут этой конкретной страницы.

  • После входа пользователь может переходить на другие страницы, используя маршруты.

  • После нажатия на выход пользователь не может перейти на следующую страницу, вместо этого он перенаправляется на форму входа.

  • Если email или имя пользователя уже существуют в базе данных, пользователь не сможет создать учетную запись.

Оцените статью
devanswers.ru
Добавить комментарий