웹 미니 프로젝트 | 플라스크 | 회원가입, 로그인 구현 JWT 1편

신김리 책방의 랜딩페이지

이번에 웹 프로그래밍을 공부하며 처음으로 프로젝트를 진행했다. 청창사 중간평가 발표 일정이 겹쳐 바빴지만, 빠르게 집중해 회원가입, 로그인, 로그아웃 기능을 만들어 볼 수 있었다. 그러면 어떻게 진행했나 정리를 해보자.

 

1. 기획 과정 - 책 리뷰 사이트

항상 기획자의 역할을 해왔기 때문에, 이번에는 다른 관점을 배워보기 위해 아이디어가 있는 팀원을 적극 서포트 하려 노력했다. 와중에 책 리뷰 페이지를 만들고 싶다는 팀원분의 의견으로 책 리뷰 사이트를 만들기로 하였다.

 

추가적으로 크롤링 혹은 API로 외부 데이터를 조회하여 써보고 싶으시다는 팀원 분이 있으셔서 네이버 도서 API를 활용해 책 정보를 쉽게 작성할 수 있다는 사실을 알려드렸다. 

 

 

1.1 와이어 프레임 설계

피그마 링크를 공유해드려 다 같이 와이어프레임을 만들기 시작했는데, 다들 금방 능숙하게 사용하실 수 있게 되어 놀라웠다.

 

시작한지 10분만에 완성된 와이어프레임 학습 능력들이 대단하셨다.

1.2. DB 설계

신김리 책방의 DB 설계 - review

신김리 책방 -User Table

서로 리뷰 리스트 출력, 작성, API 호출 후 우리 서비스에 맞춰 데이터를 가공하는 과정을 각각 개발하기 위해 각 Data의 이름과 타입을 통일했다. 돌이켜 보면 정말 단순했다.

 

 

 

 

1.3. API 명세서 작성

다음으로는 API 명세서를 작성했다. 꼼꼼하신 팀원이 있어 많이 배울 수 있었다.

신김리 책방 API 명세서

 

 

2. 플라스크로 회원가입, 로그인, 로그아웃 기능 구현 (JWT 방식 사용)

2.1 JWT(JSON Web Token) 방식을 위한 사전 지식

2.1.1 쿠키 

페이지와 관계없이, 구글크롬 혹은 사파리와 같은 브라우저에 임시로 저장되는 정보. Key 와 Value로 이루어진 딕셔너리 형태로 제공된다. 구글크롬에서 inspect 기능을 통해 쉽게 쿠키가 어디에 어떤 모양으로 저장되는지 볼 수 있다.(아래 사진 참고) 이러한 쿠키를 통해 특정 페이지에 대한 정보를 저장하기 때문에 매번 사이트에 들어갈 때마다 로그인할 필요가 없는 거다.

구글 크롬 쿠키 확인하기

2.1.2 서버가 사용자를 식별하는 법

웹서비스에서 특정 사용자를 식별하기 위해서는 가장 기본적으로 사용자가 서버에 보내는 요청인 HTTP 메시지를 읽어야 합니다. 해당 HTTP 메시지는 헤더와 바디로 이루어져 있습니다. 그리고 헤더에는 HTML처럼 해당 요청에 대한 기본적인 정보가 들어갑니다. 그리고 바디 부분에는 서버로 보내야 할 데이터가 들어갑니다. 그렇다면 사용자를 식별하기 위해 요청의 바디 부분에 이 요청은 '누가 보내는 거야'라고 기본 적인 정보를 넣어서 보낼 수 있겠죠. 하지만 여기서 문제가 발생합니다. 바로 헤더에 우리가 사용하는 ID와 Password를 그대로 보내면 보안상에 문제가 있다는 것입니다. 그리고 이러한 문제를 해결하기 위한 방법 중 하나가 JWT 방식입니다.

 

2.1.3 토큰 기반의 인증방식 JWT

Json Web Token은 말 그대로 Json으로 이루어진 토큰입니다. 토큰은 아래 사진과 같이 보안 장치를 뜻하는데요. JWT는 그대로 이해하자면 제이슨으로 이루어진 '웹에서 사용하는 보안장치'가 되는 것이죠. 

토큰 사진 구글 검색 결과

그렇다면, 실제로 어떻게 이루어지나 대표 예시 사이트에 들어가 확인을 해봅시다.

JWT 대표 사이트 캡쳐

각 위쪽 영어에서 왼쪽은 '암호화된' 오른쪽은 '암호 해석된'을 의미합니다. 쉽게 말해, 오른쪽의 정보를 'Algorithm' HS256 방식을 사용해서 암호화하면 왼쪽의 값이 뜬다는 뜻입니다. 그럼 오른쪽 세 개의 박스가 각각 무엇을 의미하는지 봅시다.

 

Header : 암호화할 방식(알고리즘) 그리고 타입이 들어갑니다. 

Paylad : 서버에서 보낼 데이터를 나열해 줍니다. 대게 유저의 ID, 유효기간이 들어갑니다.

Veryfy Signature : Base64 방식으로 인코딩한 헤더와 페이로드 그리고 '시크릿 키(your -256 - bit - secret'를 더해 서명됩니다.

 

그래서 왼쪽 encoded 박스를 보면 각각 온점으로 구분되어 오른쪽의 각 박스의 값이 들어가게 되는 것입니다.

여기서 헤더와 페이로드는 16진수로 변경되어 누구나 시크릿 키가 없이 디코딩할 수 있습니다. 하지만 가장 아래쪽에 verify signature 부분은 관리자가 설정한 시크릿 키 없이는 복호화할 수 없습니다. 

 

그래서 JWT 로그인의 순서를 정리하자면, 아래와 같습니다.

 

1. 사용자가 로그인 요청을 보낸다. 

2. 서버에서 사용자의 요청(ID, PASSWORD)을 DB와 비교하여 확인한 후, 고유한 ID 값을 부여하여 헤더와 페이로드에 넣습니다.

3. Secret Key를 활용해 접근 토큰을 발행합니다.

4. 사용자는 접근 토큰을 받아 저장한 후에 자신을 인증할 때마다 HTTP에 접근 토큰을 실어서 페이로드(기타 정보)와 함께 서버에 요청합니다.

5. 서버는 해당 접근토큰의 Veryfy signature을 Secret Key를 통해 해석한 후 사용자를 검증합니다.

6. 검증이 완료되면 사용자가 요청한 기타 정보 Payload를 해석하여 요청한 사용자의 ID의 맞는 데이터를 응답합니다.

 

 

그러면 다음 편에 이어서 어떻게 회원가입과 로그인을 구현했는지 설명하도록 하겠습니다.