Creating an authentication function
-Creating a simple app with flask -Try to create a Home screen --Try to create an authentication function ← ★ Currently here -Try working with the database -Try to create CRUD function
Creating an authentication function
Creating a navigation bar
Add a navigation bar (login, logout) link to index.html. Add a navigation bar while changing to the jinja template.
<!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="/"> Title </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">
There are no posts.
</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>
Creating a login form
{% extends "./index.html" %}
{% block body %}
<div class="blog-body">
<form action="/login" method="POST">
<div class="form-group">
<label for = "InputTitle"> username </label>
<input type="text" class="form-control" id="InputTitle" name="username">
</div>
<div class="form-group">
<label for = "InputPassword"> Password </label>
<input type="password" class="form-control" id="InputPassword" name="password">
</div>
<button type = "submit" class = "btn btn-primary"> Login </button>
</form>
</div>
{% endblock %}
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')
I think I was able to create a screen like this.
Creating an authentication function
We will implement the process of creating user information appropriately on the code, transitioning the screen when logged in as that user, and returning to the signin screen as it is if it fails.
--Add session
In this session you will:
- When login is successful, session information is returned from the server side to the front end.
- The front end stores session information in the cookie area.
- After that, the front end makes a request with the session information, and the server side determines whether or not it is logged in by checking whether the information is correct.
- In Flask, session information can be handled with a variable called session.
By setting session ['logged_in'] = True after successful login, the value of logged_in in session is set to true. After that, by checking this value in the request trip, you can determine whether you are logged in.
After signing out, delete the session information.
--session key setting
Session information is encrypted using secretkey. (* This time, it is a simple one, but please set it randomly in the production environment etc.)
from flask import Flask
app = Flask(__name__)
app.config["SECRET_KEY"] = b'_5#y2L"F4Q8z\n\xec]dasfe/'
import src.views
--Adding flash on the API side
A feature called flash is used to display the action result as a message for each action such as sign-in success, failure, and sign-out.
--Using url_for
The url currently describes the link path directly, such as ['/ login']. This may change the path of the link as development progresses. At that time, the number of parts to be corrected will increase and it will be difficult. Therefore, use the [url_for] method. If you use this, it will automatically link just by specifying the method name instead of direct linking.
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'username is different')
elif request.form['password'] != User['password']:
flash (f'password is different')
else:
session['logged_in'] = True
flash ('logged in')
return redirect('/')
return render_template('login.html')
@app.route('/logout', methods=['GET'])
def logout():
session.pop('logged_in', None)
flash ('logged out')
return redirect('/')
<!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')}}"> Title </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>
{% extends "./index.html" %}
{% block body %}
<div class="blog-body">
<form action="{{ url_for('login') }}" method="POST">
<div class="form-group">
<label for = "InputTitle"> username </label>
<input type="text" class="form-control" id="InputTitle" name="username">
</div>
<div class="form-group">
<label for = "InputPassword"> Password </label>
<input type="password" class="form-control" id="InputPassword" name="password">
</div>
<button type = "submit" class = "btn btn-primary"> Login </button>
</form>
</div>
{% endblock %}
【Typing error】
[When sign-in is successful]
[When signing out]
Recommended Posts