인증 기능 생성 만들기

12404 단어 Python3 Flask 파이썬 sqlite3 sqlalchemy

소개

Flask를 사용하여 1에서 응용 프로그램을 만들고 필요한 기술을 배울 수 있도록 정리하고 있습니다.

인증 기능 만들기 ← ★ 현재 여기

인증 기능 만들기

네비게이션 바 만들기

index.html에 탐색 모음(로그인, 로그아웃) 링크를 추가합니다.
jinja 템플릿으로 변경하면서 네비게이션 바를 추가합니다.

src/templates/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">
    <title>Flask App</title>
</head>
<body>
    <div　class="container">
        <nav class='navbar navbar-expand-lg navbar-light bg-light'>
            <a class="navbar-brand" href="/">タイトル</a>
            <button 
                class="navbar-toggler" 
                type="button" 
                data-toggle="collapse" 
                data-target="#nabvarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="nav navbar-nav navbar-lighy">
                    <li class="nav-item">
                        <a class="nav-link" href="/login">LogIn</a>
                    </li>
                </ul>
            </div>
        </nav>
        {% block body %}{% endblock %}
        <div class="blog-body">
            投稿がありません。
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" 
            crossorigin="anonymous"></script>
</body>
</html>

로그인 양식 만들기

src/templates/login.html

{% extends "./index.html" %}

{% block body %}

<div class="blog-body">
    <form action="/login" method="POST">
        <div class="form-group">
            <label for="InputTitle">ユーザ名</label>
            <input type="text" class="form-control" id="InputTitle" name="username">
        </div>
        <div class="form-group">
            <label for="InputPassword">パスワード</label>
            <input type="password" class="form-control" id="InputPassword" name="password">
        </div>
        <button type="submit" class="btn btn-primary">ログイン</button>
    </form>
</div>
{% endblock %}

src/views.py

from src import app
from flask import render_template

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

@app.route('/login')
def login():
    return render_template('login.html')

이런 느낌의 화면을 만들 수 있었는지 생각합니다.

인증 기능 만들기

유저 정보는 일단 코드상에서 적당하게 작성해, 그 유저로 로그인되면 화면을 천이해, 실패하면 그대로 signin 화면에 돌아온다고 하는 처리를 구현해 갑니다.

session 추가

이 세션에서는 다음을 실현합니다.
1. 로그인이 성공하면 서버 측에서 세션 정보를 프런트 엔드로 반환합니다.
2. 프런트 엔드는 세션 정보를 쿠키 영역에 저장합니다.
3. 그런 다음 프런트 엔드는 해당 세션 정보로 요청하고 서버 측은 해당 정보가 올바른지 확인하여 로그인했는지 여부를 결정합니다.

※ Flask에서는 session이라는 변수로 세션 정보를 취급할 수 있다.

로그인 성공 후에 session['logged_in']=True로 하는 것으로 session중의 logged_in이라는 값이 true로 설정된다.
이후, 이 값을 요구의 여행에 체크하는 것으로, 로그인하고 있는지를 판별할 수 있다.

로그아웃하면 session 정보를 삭제합니다.

session key 설정

secretkey를 사용하여 세션 정보를 암호화합니다.
(※ 이번은 간이적인 것으로 하고 있습니다만, 프로덕션 환경 등에서는 랜덤으로 설정해 주세요.)

__init__.py

from flask import Flask

app = Flask(__name__)
app.config["SECRET_KEY"] = b'_5#y2L"F4Q8z\n\xec]dasfe/'

import src.views

API 측에서 플래시 추가

flash라는 기능을 사용하여 로그인 성공, 실패, 로그아웃과 같은 각 작업에 대한 작업 결과를 메시지로 표시합니다.

url_for 사용

url은 현재 ['/login']과 같은 링크 경로를 직접 설명합니다. 이는 개발이 진행됨에 따라 링크 경로가 변경될 수 있다.
그 때, 수정하는 부분이 늘어나 힘들어집니다.
그래서 [url_for] 메소드를 이용한다. 이것을 사용하면(자) 직접 링크는 아니고, 메소드명을 지정하는 것만으로 자동적으로 링크해 줍니다.

src/views.py

from src import app
from flask import flash
from flask import redirect
from flask import request
from flask import render_template
from flask import url_for
from flask import session


User = {
    'username': 'test',
    'password': 'testpass'
}

@app.route('/')
def index():
    if not session.get('logged_in'):
        return redirect('/login')
    return render_template('index.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        if request.form['username'] != User['username']:
            flash(f'ユーザ名が異なります')
        elif request.form['password'] != User['password']:
            flash(f'パスワードが異なります')
        else:
            session['logged_in'] = True
            flash('ログインしました')
            return redirect('/')
    return render_template('login.html')

@app.route('/logout', methods=['GET'])
def logout():
    session.pop('logged_in', None)
    flash('ログアウトしました')
    return redirect('/')

src/templates/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">
    <title>Flask App</title>
</head>
<body>
    <div　class="container">
        <nav class='navbar navbar-expand-lg navbar-light bg-light'>
            <a class="navbar-brand" href="{{ url_for('index') }}">タイトル</a>
            <button 
                class="navbar-toggler" 
                type="button" 
                data-toggle="collapse" 
                data-target="#nabvarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="nav navbar-nav navbar-lighy">
                    {% if not session.logged_in %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('login') }}">LogIn</a>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </nav>
        {% for message in get_flashed_messages() %}
        <div class="alert alert-info" role="alert">
            {{ message }}
        </div>
        {% endfor %}
        <div>
            {% block body %}{% endblock %}
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" 
            crossorigin="anonymous"></script>
</body>
</html>

src/templates/login.html

{% extends "./index.html" %}

{% block body %}

<div class="blog-body">
    <form action="{{ url_for('login') }}" method="POST">
        <div class="form-group">
            <label for="InputTitle">ユーザ名</label>
            <input type="text" class="form-control" id="InputTitle" name="username">
        </div>
        <div class="form-group">
            <label for="InputPassword">パスワード</label>
            <input type="password" class="form-control" id="InputPassword" name="password">
        </div>
        <button type="submit" class="btn btn-primary">ログイン</button>
    </form>
</div>
{% endblock %}

【입력 미스】

【로그인 성공시】

【사인아웃시】

Reference

이 문제에 관하여(인증 기능 생성 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/k_yokozuka/items/46c7afab4f5335112105

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Home 화면 만들기

flask와 sqlite3 연결

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다