로그인 화면 만들기

12657 단어 로그인 양식Flask
로그인 화면은, bootstrap의 카드로 작성.
post를 사용하는 것으로, 로그인 화면에서 입력한 값을 flask로 받을 수 있도록 하고 있다.


디렉토리 구조
루트
┝ flask_python.py
┝ templates
  ┝ login.html

  



· label for의 필요성
지정한 label을 클릭하면 같은 id를 가지는 입력 폼에 커서가 맞게 되어 있다.
ex.< label for id='id'>id
< input type="text"class="form-control"id="id"name="id"value="{{id}}">
이들이 묶어서 텍스트에 커서를 맞지 않아도 id를 누르면 text를 입력할 수 있다.



·에 대해서
문자를 줄이면 "text-muted"로 문자를 회색으로 만들 수 있습니다.


login.html
{% extends "layout.html" %}

{% block title %}
Login
{% endblock %}

{% block headline %}
{{title}}
{% endblock %}

{% block content %}
{% if err %}
<p class="alert alert-warning">
{% else %}
<p class="alert">
{% endif %}
{{ message }}</p>

<div class="card">
    <div class="card-header">
        <h4 class="card-title">
            Login Form:
        </h4>
    </div>
    <div class="card-body">
        <form method="post" action="/login">
            <div class="form-group">
                <label for="id">id</label>
                <input type="text" class="form-control" id="id" name="id" value="{{id}}">
                <small class="form-text text-muted">
                    ※IDを入力してください
                </small>
            </div>
            <div class="form-group">
                <label for="pass">password</label>
                <input type="password" class="form-control" id="pass" name="pass">
                <small class="form-text text-muted">
                    ※Passwordを入力してください
                </small>
            </div>
            <div class="form-group">
                <input type="submit" value="Login">
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block footer %}
copyright 2019 Login.
{% endblock %}

다음은 flask측에서의 처리
이번 로그인 화면은 여기에서 설정한 id와 비밀번호를 알고 있는 유저만 넣도록 하고 있다.
또, 화상 인식을 행하고 있을 때 작성한 것으로, keras등을 import하고 있다

· session['id'] = id 정보
세션의 'id'키에 id 값을 저장합니다.
이제 클라이언트별로 ID를 저장할 수 있습니다.


flask_python.py
from flask import Flask, render_template, request, session, redirect,url_for
import os
from werkzeug.utils import secure_filename
from keras.preprocessing.image import load_img, img_to_array
from pic_reco import recognition


app = Flask(__name__)
app.secret_key = b'random string...'

# 画像のアップロード先のディレクトリ
UPLOAD_FOLDER = './static'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/login', methods=['GET'])
def login_get():
    return render_template('login.html',
                           title='Login',
                           err=False,
                           message='IDとPasswordを入力してください',
                           id='')

@app.route('/login', methods=['POST'])
def login_post():
    id = request.form.get('id')
    pswd = request.form.get('pass')
    if id == 'tsubomi':
        if pswd == '0426':
            session['login'] = True
        else:
            session['login'] = False
    else:
        session['login'] = False
    if session['login']:
        session['id'] = id
        return redirect('/')
    else:
        return render_template('login.html',
                               title='Login',
                               err=False,
                               message='IDかpasswordが違います',
                               id='')
#logout
@app.route('/logout', methods=['GET'])
def logout():
    session.pop('id', None)
    session.pop('login')
    return redirect('/login')

if __name__ =='__main__':
    app.debug = True
    app.run(host='localhost')

좋은 웹페이지 즐겨찾기