Blog project - Login

Blaog project 

Login

 오늘은 로그인 페이지를 만들어 보겠습니다.  로그인 페이지를 만들기 위해서 일발적으로 HTML 만으로 구성할 수도 있겠지만 반복을 싫어하는 선배 개발자 님들은 반복을 피하기 위해 여러 가지 장치를 만들어 두었습니다. 그 기술들을 빌려서 만들어 보겠습니다. 우선 forntend의 코드는 다음과 같습니다. 

 

{% extends 'bootstrap/base.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% block content %}
{% include "header.html" %}

<!-- Page Header -->
<header class="masthead" style="background-image: url('https://images.unsplash.com/photo-1484100356142-db6ab6244067?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="page-heading">
<h1>Log In </h1> <span class="subheading">Welcome Back! </span> </div>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">

<div class="col-lg-8 col-md-10 mx-auto content">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<p>{{ message }}</p>
{% endfor %}
{% endif %}
{% endwith %}
{{ wtf.quick_form(form, novalidate=True, button_map={"submit": "primary"}) }}
</div>
</div>
</div>


{% include "footer.html" %}
{% endblock %}

login.html

 우선 앞에도 말했지만 저는 파이썬의 플라스크를 기반으로 블로그를 만들고 있습니다. 그래서 파이썬의 문법을 따르고 있습니다. 위의 첫 두 줄은 “jinja”라는 프런트엔드 파일과 백엔드 파일을 연결하는 라이브러리를 활용하여 서버사이드의 두 라이브러리 인  “bootstrap” 과 “wtf”를 각각 연결하는 코드입니다. 그리고 뒤에는 반복되는 html의 앞부분 코드를 “header.html”에 분리하여 다른 파일로 만들어 두고 이 곳에는 링크로 연결하듯이 연결만 해둔 파일입니다. 

 

이 파일은 개발을 완료한 로그인 페이지 이기 때문에  “flash”라는 라이브러리도 추가되어 있습니다. 이 라이브러리는 따로 설치할 필요 없이 “flask”에서 기본적으로 제공해 주는 녀석으로 특정 조건이 되었을 때 웹페이지에 메시지를 보여주는 역할을 합니다. 그리고 마지막에는 미리 설정해 둔 “wtf-form”을 불러오는 코드입니다.  공부하면서 알게 된 것인데 이 미리 정의된 “form”도 부트스트랩의 스타일을 적용할 수 있는 방법이 있었습니다.  바로 “button _map”을 활용하는 것인데요 사용법은 위의 코드와 같습니다. 

class LoginForm(FlaskForm):
email = StringField("Email", validators=[DataRequired()])
password = PasswordField("Password", validators=[DataRequired()])
submit = SubmitField("Let Me In!")

form.py

 Login form 은 위와 같이 정의되어 있습니다.  Email과 password는 각각 string과 password field 로정의 되어 있으며 submit 도 미리 구현되어 있는 submit field를 활용하여 만들어 두었습니다. 

 

@app. route('/login',=["GET", "POST"])
def login():
form = LoginForm()
if form.validate_on_submit():
email = form.email.data
password = form.password.data

user = User.query.filter_by(email=email). first()
# Email doesn't exist or password incorrect.
if not user:
flash("That email does not exist, please try again.")
return redirect(url_for('login'))
elif not check_password_hash(user.password, password):
flash('Password incorrect, please try again.')
return redirect(url_for('login'))
else:
login_user(user)
return redirect(url_for('get_all_posts'))
return render_template("login.html", form=form, current_user=current_user)

main.py

 코드가 그리 길지는 않습니다. 앞으로 더 많은 기능이 필요해지면 추가하겠지만 아직은 포트폴리오 단계이기 때문에 실제 product 라인에 필요한 기능들은 구현하지 않았습니다. 

 코드는 간단합니다.  valitat_on_submit() 은 “flask-wtf”에서 제공하는 함수로 POST request 가 있을 때 자동으로 form을 불러와주는 역할을 수행합니다. Email과 password는 각각 form에 정의된 형식으로 정의합니다. 

 user의 경우 이미 등록되어 있는 경우를 걸러내기 위해서 database에서 동일한 email이 등록되어 있는 것은 없는지 우선 검색해 줍니다. 그런 뒤에  if 문으로 각각의 상황에 맞는 조건을 만들어 실행합니다. 조건은 크게 세 가지입니다. 등록된 email이 없거나 password 가 다르거나 두 경우를 모두 만족하여 메인 페이지로 이동하는 것입니다. 


 막막하게만 느껴지던 블로그 만들기도 어느새 로그인 페이지까지 정리했습니다. 다음에는 register 페이지 구성에 대해 정리하겠습니다. 부족한 글 읽어 주셔서 감사합니다. 

 

2021.03.18 - [Toy Project/Python] - Blogproject - Flask-wtf

Blogproject - Flask-wtf

2021.02.04 - [Toy Project/Python] - Blog project - Bootstrap

Blog project - Bootstrap

2021.02.05 - [Toy Project/Python] - Blog project - GET/POST

Blog project - GET/POST