Flask를 사용하여 사용자 인증 Webapp 구축

본고에서 flask를 사용하여 사용자 인증이나 로그인을 갖춘 간단한 웹 응용 프로그램을 구축하는 방법을 보여 드리겠습니다.

이 응용 프로그램에는 다음과 같은 기능이 있습니다.

사용자는 전자 우편 주소로 등록할 수 있고 비밀번호도 만들 수 있다.

사용자는 일단 로그인하면 데이터베이스에 등록한다.

데이터베이스에 이미 있는 자격 증명을 사용하여 로그인하려는 사용자는 오류 메시지를 반환하여 알립니다.

이 프로그램은 사용자를 기억하기 위해 항상 비밀번호를 입력해야만 이 프로그램에 로그인할 수 있다.

로그인하면 사용자는 개인 정보나 로그아웃 등 응용 프로그램의 다른 경로를 볼 수 있다.

로그아웃 시 사용자는 홈 페이지, 로그인 및 등록 경로만 볼 수 있습니다.

자, 우리 인코딩을 시작합시다.

첫 번째 단계는 IDE를 시작하는 것입니다.
프로젝트 폴더를 만들고 가상 환경을 설정하면 프로그램에 다른 의존항을 추가할 것입니다.
flask,flask login(사용자 로그인 및 인증에 사용),flask sqlalchemy(데이터를 저장하는 데이터베이스를 만드는 데 사용) 등 필요한 소프트웨어 패키지를 설치합니다.
설정한 후 새python 파일을 만들고 호출합니다 init.py.이것은 응용 프로그램을 초기화할 것이다.init.py 파일을 열고 다음 패키지를 가져옵니다.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager

Flask는 웹 응용 프로그램을 구축하기 위해 경량급 프레임워크를 제공합니다.
SQLAlchemy는 이메일과 비밀번호 등 사용자 데이터를 저장할 데이터베이스를 만드는 데 사용됩니다.
공식 문서here를 살펴보고 연금술을 알아보자.
flask 로그인은 flask 에 대한 사용자 세션 관리를 제공합니다.그것은 로그인, 로그아웃, 사용자 세션 기억 등 흔히 볼 수 있는 작업을 처리한다.자세한 내용은 공식 flask 로그인 문서here를 참조하십시오.
다음 코드 세션과 같이 SQLAlchmemy를 사용하여 데이터베이스를 초기화하는 함수를 만듭니다.
나중에 사용할 수 있도록 SQLAlchemy를 초기화합니다.db = SQLAlchemy() create_app라는 함수를 만들고flask 실례를 만들며 데이터베이스에 다른 설정을 추가합니다.

def create_app():
    app = Flask(__name__)
    app.secret_key = b'_5#y2L"F4Qz\k\xec]/'
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
    db.init_app(app)

login_manager 라는 변수를 만들어서 로그인 관리자를 만들어서 사용자의 로그인을 관리합니다.

login_manager = LoginManager()
login_manager.login_view = 'auth.login'
login_manager.init_app(app) 

그리고 사용자에 대한 정보를 저장하기 위해 models.py 라는python 파일을 만듭니다.
생성된 모델은 클래스로 구성되어 있으며, 이 클래스는 데이터베이스에 있는 표로 변환됩니다.각 속성은 테이블의 열로 변환됩니다.

class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(100), unique=True)
    password = db.Column(db.String(100))
    name = db.Column(db.String(1000)

init를 엽니다.py 파일을 다시 만들고 모델에서 클래스 사용자를 가져옵니다.py
auth라는 새python 파일을 엽니다.피야.이 파일에는 로그인 및 등록과 같은 인증 라우팅의 모든 논리가 포함됩니다.
필요한 패키지를 먼저 가져옵니다.

from flask import Blueprint, render_template, redirect, url_for, request, flash
from werkzeug.security import generate_password_hash, check_password_hash
from models import User
from flask_login import login_user, logout_user, login_required
from init import db

Flash는 오류 정보와 같은 정보를 사용자에게 표시하는 데 사용됩니다.
Blueprint는python 패키지로flask 프로그램의 기능을 다시 사용할 수 있는 구성 요소로 나누어 프로그램을 구축하는 데 도움을 줄 수 있습니다.Blueprint 패키지here에 대한 자세한 내용을 확인하십시오.
이 파일에서 우리는 논리적인 신분 검증 루트를 데이터베이스에 추가하여 사용자를 기억하고 로그아웃할 것입니다.
다음은 완전한 파일입니다auth.py

from flask import Blueprint, render_template, redirect, url_for, request, flash
from werkzeug.security import generate_password_hash, check_password_hash
from models import User
from flask_login import login_user, logout_user, login_required
from init import db

auth = Blueprint('auth', __name__)


@auth.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    else:
        email = request.form.get('email')
        password = request.form.get('password')
        remember = True if request.form.get('remember') else False
        user = User.query.filter_by(email=email).first()

        if not user:
            flash('Please sign up first!')
            return redirect(url_for('auth.signup'))
        elif not check_password_hash(user.password, password):
            flash('Please check your login details and try again.')
            return redirect(url_for('auth.login'))
        login_user(user, remember=remember)
        return redirect(url_for('main.profile'))


@auth.route('/signup', methods=['GET', 'POST'])
def signup():
    if request.method == 'GET':
        return render_template('signup.html')
    else:
        email = request.form.get('email')
        name = request.form.get('name')
        password = request.form.get('password')
        user = User.query.filter_by(email=email).first()

        if user:
            flash('Email already exists')
            return redirect(url_for('auth.signup'))
        new_user = User(email=email, name=name, password=generate_password_hash(password, method='SHA256'))

        db.session.add(new_user)
        db.session.commit()
        return redirect(url_for('auth.login'))


@auth.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('main.index'))

이것은 완전한 초기화이다.py 파일.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager

db = SQLAlchemy()


def create_app():
    app = Flask(__name__)
    app.secret_key = b'_5#y2L"F4Qz\k\xec]/'
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
    db.init_app(app)
    login_manager = LoginManager()
    login_manager.login_view = 'auth.login'
    login_manager.init_app(app)

    from models import User

    @login_manager.user_loader
    def load_user(user_id):
        return User.query.get(int(user_id))

    # blueprint for auth routes in the app
    from auth import auth as auth_blueprint
    app.register_blueprint(auth_blueprint)

    # blueprint for non auth routes in the app
    from main import main as main_blueprint
    app.register_blueprint(main_blueprint)

    return app

main.py 파일

from flask import Blueprint, render_template
from flask_login import login_required, current_user
from init import create_app, db

main = Blueprint('main', __name__)


@main.route('/')
def index():
    return render_template('index.html')


@main.route('/profile')
@login_required
def profile():
    return render_template('profile.html', name=current_user.name)


app = create_app()

if __name__ == '__main__':
    db.create_all(app=create_app())
    app.run(debug=True)

이것은 이 응용 프로그램의 주요 입구점이다.models.py 파일

from flask_login import UserMixin
from init import db


class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(100), unique=True)
    password = db.Column(db.String(100))
    name = db.Column(db.String(1000))

    def __repr__(self):
        return'<User %r>' % self.id

    def __init__(self, email, password, name):
        db.create_all()
        self.email = email
        self.password = password
        self.name = name

응용 프로그램의 논리를 만든 후에, 우리는 현재 다른 페이지의 템플릿을 만듭니다.
주 프로젝트 폴더에templates 폴더를 만들고 base.html라는 새 html 파일을 만듭니다
이것은 모든 기타 html 파일이 그 중에서 계승될 메인 html 파일이다.우리는 진자 템플릿을 사용하여 기초를 확장합니다.html을 다른 템플릿에 추가합니다.
전체 base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask Login</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

</head>
<body>
<section class="hero is-fullheight" style="background-image:#C4FCEF;">

    <div class="hero-head">
        <nav class="navbar">
            <div class="container">
                <div class="navbar-brand">
                    <a href="{{ url_for('main.index') }}" class="navbar-item" style="color:white">
                        CampNight
                    </a>
                </div>

                <div id="navbarMenuHeroA" class="navbar-menu">
                    <div class="navbar-end">
                        <a href="{{ url_for('main.index') }}" class="navbar-item">
                            Home
                        </a>
                        {% if current_user.is_authenticated %}
                        <a href="{{ url_for('main.profile') }}" class="navbar-item">
                            Profile
                        </a>
                        {% endif %}

                        {% if not current_user.is_authenticated %}
                        <a href="{{ url_for('auth.login') }}" class="navbar-item">
                            Login
                        </a>
                        <a href="{{ url_for('auth.signup') }}" class="navbar-item">
                            Sign Up
                        </a>
                        {% endif %}

                        {% if current_user.is_authenticated %}
                        <a href="{{ url_for('auth.logout') }}" class="navbar-item">
                            Logout
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div class="hero-body">
        <div class="container has-text-centered">
            {% block content %}{% endblock %}
        </div>
    </div>
</section>
</body>
</html>

스타일에 대해 Bulma css를 사용했습니다. 이것은 좋은 프레임워크입니다.자세한 내용here.
그리고 우리는 index.html 홈페이지를 만들었다.index.html

{% extends "base.html" %}

{%block content%}
<h1 class ="title">Welcome to CampNight </h1>
<h2 class="subtitle">Are you ready for an adventure?</h2>
{%endblock%}

괄호에 사용되는 진자 템플릿을 보십시오.진자 템플릿에 대한 더 많은 정보here를 읽을 수 있습니다.
그리고 우리는 login.html 템플릿을 만들었다login.html

{% extends "base.html" %}

{%block content%}
<div class="column is-4 is-offset-4">
    <h3 class="title">Login</h3>
    <div class="box">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="notification is-danger">
                     {{ messages[0] }}
                 </div>
            {% endif %}
        {% endwith %}
        <form method="POST" action="/login">
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="email" name="email" placeholder="Your Email" autofocus="">
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="password" name="password" placeholder="Your Password">
                </div>
            </div>
            <div class="field">
                <label class="checkbox">
                    <input type="checkbox">
                    Remember me
                </label>
            </div>
            <button class="button is-block is-info is-large is-fullwidth">Login</button>
        </form>
    </div>
</div>
{%endblock%}

그런 다음 profile.html 명령은 특정 사용자가 로그인한 후에 해당 이름을 표시합니다.

{% extends 'base.html' %}

{% block content %}
<h1 class="title">
    Welcome, {{ name }}!
</h1>
{% endblock %}

그리고 우리는 사용자가 등록할 수 있도록 signup.html를 추가했다.

{% extends "base.html" %}

{% block content %}
<div class="column is-4 is-offset-4">
    <h3 class="title">Sign Up</h3>
    <div class="box">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="notification is-danger">
                    {{ messages[0] }}<br> Go to <a href="{{ url_for('auth.login') }}">login page</a>
                </div>
            {% endif %}
        {% endwith %}
        <form method="POST" action="/signup">
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="text" name="name" placeholder="Name" autofocus="">
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="password" name="password" placeholder="Password">
                </div>
            </div>
            <button class="button is-block is-info is-large is-fullwidth">Sign Up</button>
        </form>
    </div>
</div>
{% endblock %}

프로젝트 폴더에 다른 폴더를 추가하고 static로 이름을 붙입니다.
이 폴더는 프로그램에 추가된 사용자 정의 css표와 그림 같은 프로그램의 자원을 포함합니다.
응용 프로그램이 마침내 준비되었으니 터미널에서 실행할 수 있습니다 python main.py.
응용 프로그램을 로컬 호스트 5000에서 실행하면 브라우저에 표시됩니다.

here의 애플리케이션을 원하는 대로 실행하십시오.

리소스

flask를 사용하여 웹 응용 프로그램에서 사용자 인증을 실현하는 방법에 대한 더 많은 정보를 보려면 this라는 멋진 미디어 기사를 꼭 보십시오.