[Flask][Flask-WTF]간단한 사용 - 로그인 양식

Flask-WTF

flask의 확장모듈로 HTML입력양식(input, label, submit, etc) 보다 유효성검증이 쉽고 코드의 길이도 짧아지고 CSRF보호기능을 가지고 있다.

 

1. requirements.txt 을 만들기

터미널에서 

pip freeze > requirements.txt

으로 설치하고 나면 패캐지의 현재 환경과 버전에 대한 간단한 리스트가 담긴 requirements.txt파일이 생성 되는데 

pip install -r requirements.txt

으로 위 파일과 같은 패캐지들이 설치가 된다.

 

이때 가상환경virtualenv(venv)이 활성화 되어 있어야한다.

깃허브 같은 곳에서 복제한 마스터 혹은 메인 레포 안에 가상환경을 설정하고 활성화시킨 후 위와 같은 코드를 실행하여 필요한 패캐지를 한번에 설치한다. 

 

2. 설치하기

3가지의 방법이 있다. 

터미널에서 pip을 이용해서 설치하거나 github에서 복제해오거나 arhive을 이용하거나

pip install -U Flask-WTF

git clone https://github.com/wtforms/flask-wtf
pip install -e ./flask-wtf

pip install -U https://github.com/wtforms/flask-wtf/archive/main.tar.gz

 

3. 간단한 로그인 양식 만들기

3-1) 메인 서버에서 해야하는 것

우선 메인 서버에 호출해온다.

from flask_wtf import FlaskForm
from wtforms import StringField

클래스를 지정해서 사용한다.

class MyForm(FlaskForm):
    email = StringField('Email')
    password=StringField('Password')

 

crsf_token 사용하기 위해서  secret_key가 있어야한다.

app = Flask(__name__)
app.secret_key="아무문자열"

그리고 양식을 사용할 페이지 주소 만들기

@app.route("/login")
def login():
    login_form=MyForm()
    return render_template('login.html',form=login_form)

3-2)사용할 페이지의 html에서 해야하는 것

<form action="{{url_for('login')}}" method="POST">
			{{form.csrf_token}}
			{{form.email.label}} {{form.email(size=30)}}
			{{form.password.label}} {{form.password(size=30)}}
			<input type="submit" value="Log In">
		</form>

위의 라우트 함수에서 form이라는 변수를 MyForm()객체로 설정했으니 {{form.필요한것.형식혹은사이즈}}로 가져올 수 있다.

csrf_token hidden field 자동으로 생성되는데 아까 지정한 secret_key을 사용한다.

flask-wtf을 이용한 간단한 로그인

3-4) 비밀번호 가리기 , submit 만들기

wtforms에서 필드에서 PasswordField을 호출해온다.

https://wtforms.readthedocs.io/en/3.0.x/fields/?highlight=password#wtforms.fields.PasswordField 참조

Fields — WTForms Documentation (3.0.x)

from flask_wtf import FlaskForm
from wtforms import StringField,PasswordField

class MyForm(FlaskForm):
    email = StringField('Email')
    password=PasswordField('Password')

변수=어쩌구Field(label='프로퍼티/값')

Email이라해서 페이지에서는 Email값의 라벨이 생겼다.

 

SubmitField을 호출해온다.

from wtforms import StringField,PasswordField,SubmitField

class MyForm(FlaskForm):
    email = StringField('Email')
    password=PasswordField('Password')
    submit=SubmitField("Login")

<form action="{{url_for('login')}}" method="POST">
			{{form.csrf_token}}
			{{form.email.label}} {{form.email(size=30)}}
			{{form.password.label}} {{form.password(size=30)}}
			{{form.submit}}
		</form>

3-4) 레이아웃 지정하기

html요소로 레이아웃을 변경할 수 있다.

		<h1>Login</h1>
		<form action="/login" method="POST">
			{{form.csrf_token}}
			<p>{{form.email.label}} 🍏<br> {{form.email(size=30)}}</p>

			<p>{{form.password.label}} 🍎<br> {{form.password(size=30)}}</p>
			{{form.submit}}
		</form>