[Flask] 3-6 회원가입

이번에는 회원가입 기능을 구현해 보자

 회원가입 기능은 웹 사이트에서 핵심이다

 

회원 모델

지금까지는 질문, 답변 모델만 사용했다면 이제 회원 정보를 위한 모델이 필요하다

회원 정보 모델에는 최소한 아래와 같은 속성이 필요하다

속성	설명
username	사용자 이름(ID)
password	비밀번호
email	이메일

pybo/models.py 파일을 열어 앞에서 정의한 속성을 바탕으로 User 모델을 작성하자

[파일명: projects/myproject/pybo/models.py]

id는 자동으로 증가하는 User 모델의 기본 키이다

username, password, email에는 null값을 허용하지 않도록 nullable=False로 설정했다

username, email에는 unique=True를 지정했다

unique=True는 "같은 값을 저장할 수 없다"를 뜻한다

이렇게 해야 username과 email이 중복되어 저장되지 않는다

 

User 모델을 새로 작성했으니 flask db migrate 명령으로 리비전 파일을 생성하자

이어서 flask db upgrade 명령으로 생성된 리비전 파일(439f23669059_.py)로 데이터베이스를 변경하자

 

회원가입 폼

회원가입을 위한 폼을 작성하자

아래처럼 FlaskForm을 상속하는 UserCreateForm을 만들자

[파일명: projects/myproject/pybo/forms.py]

계정생성을 위한 폼의 클래스명은 UserCreateForm이다

username은 필수항목이고 길이가 3-25 사이여야 한다는 검증조건을 설정했다

Length는 폼 유효성 검증시 문자열의 길이가 최소길이(min)와 최대길이(max) 사이에 해당하는지를 검증한다

 

password1과 password2는 "비밀번호"와 "비밀번호확인"에 대한 필드이다

로그인 할때는 비밀번호가 한번만 필요하지만 계정생성시에는

입력한 비밀번호가 정확한지 확인하기 위해 2개의 필드가 필요하다

password1과 password2 속성은 PasswordField로 생성되었다

StringField와 비슷하지만 템플릿에서 자동변환으로 사용시

<input type="password"> 태그로 변환되는 차이점이 있다

 

password1 속성과 password2 속성은 모두 필수값이어야 하고

두개의 값이 일치해야 하는 EqualTo 검증이 추가되었다

password1 속성에 지정된 EqualTo('password2') 는

password1과 password2의 값이 일치해야 함을 의미한다

 

그리고 email 속성은 EmailField로 생성되었다

EmailField 역시 StringField와 동일하지만 템플릿 자동변환으로 사용시

<input type="email"> 태그로 변환된다

 email 속성에는 필수값 검증조건에 더하여 Email() 검증조건이 추가되었다

Email() 검증조건은 해당 속성의 값이 이메일형식과 일치하는지를 검증한다

 

Email() 검증을 사용하기 위해서는 아래처럼 email-validator를 설치해야 한다

 

회원가입 구현하기

이제 계정모델과 계정폼이 준비되었으니 회원가입을 위한 블루프린트를 만들어보자

회원가입은 메인(main_views.py), 질문(question_views.py), 답변(answer_views.py) 어디에도 해당되지 않으므로

회원가입과 로그인/로그아웃을 담당할 auth_views.py 파일을 신규로 생성하자

 

블루프린트

views/auth_views.py 파일을 새로 만들어 다음처럼 코드를 작성하자

[파일명: projects/myproject/pybo/views/auth_views.py]

우선 /auth/로 시작하는 URL이 호출되면 auth_views.py 파일의

함수들이 호출될 수 있도록 블루프린트 객체 bp를 생성했다

그리고 회원가입을 위한 signup 함수를 생성했다

signup 함수는 POST 방식에는 계정을 저장하고 GET 방식에는 계정 등록 화면을 출력한다

 

코드를 자세히 보면 계정 등록을 할 때 username으로 데이터를 조회해서 "이미 등록된 사용자"인지를 확인한다

만약 이미 등록된 사용자라면 flash('이미 존재하는 사용자입니다.')로 오류를 발생시킨다

 

비밀번호는 폼으로 전달받은 값을 그대로 저장하지 않고 generate_password_hash 함수로 암호화하여 저장했다

 

블루프린트 등록

새로 만든 블루프린트를 사용하려면 pybo/__init__.py 파일에 등록해야 한다

[파일명: projects/myproject/pybo/__init__.py]

 

화원가입 템플릿

회원가입 템플릿을 작성하자

signup.html 파일은 templates 디렉터리 아래에 auth 디렉터리를 추가한 후 다음처럼 작성하자

[파일명: projects/myproject/pybo/templates/auth/signup.html]

회원가입을 위한 "사용자 이름", "비밀번호", "비밀번호 확인", "이메일"에 해당되는 input 엘리먼트를 추가했다

<생성하기> 버튼을 누르면 폼 데이터가 POST 방식으로 /auth/signup/ URL로 요청된다

 

회원가입을 할 때 발생할 수 있는 오류를 표시하도록 {% include "form_errors.html" %}를 사용했다

 

오류 표시하기

form_errors.html 템플릿 파일은 다음과 같이 "필드에서 발생한 오류를 표시하는 부분"과

"flash를 거치면서 발생한 오류를 표시하는 부분"으로 구성된다

필드 오류는 폼 validators 검증에 실패한 경우 표시되고, flash 오류는

flash('이미 존재하는 사용자입니다.')와 같은 로직에 의해 표시된다

[파일명: projects/myproject/pybo/templates/form_errors.html]

 

회원가입 링크

회원가입 화면으로 이동할 수 있는 링크를 내비게이션 바에 추가하자

[파일명: projects/myproject/pybo/templates/navbar.html]

이제 내비게이션 바의 ‘계정생성’ 링크를 누르면 다음과 같은 회원가입 화면이 나온다

입력값 중에서 "비밀번호"와 "비밀번호 확인"을 서로 다르게 입력하고

<생성하기>를 누르면 validator 오류가 발생하여

화면에 다음과 같은 오류 메시지가 나타날 거다

우리가 만든 회원가입 기능에는 필수값 검증, 이메일 규칙 검증 등이 적용되어 있다

올바른 입력값으로 회원가입을 완료하면 메인 페이지로 리다이렉트될 거다

 

회원 데이터 확인

셸에서 회원가입을 통해 생성된 계정 정보를 확인해 보자

 

회원가입 기능이 추가되었다!!