3세대 웹의 세상이 열리면서 프론트와 백엔드가 분리되었습니다. 그래서 백엔드 개발자는 본인 및 팀의 작품을 프론트엔드 개발자의 작품에 연결을 해 하나의 결과를 내게 되는데요! 오늘은 그 중에서도 로그인 및 회원가입을 구현해보겠습니다.
로그인 회원가입 구현
이번 블로깅을 통해 어떻게 브라우저에서 로그인 관리를 할 수 있는지, 어떻게 프론트와 벡엔드가 통신을 하는지, 그리고 access_token JWT를 왜 사용하는지 알고, 프론트엔드에서 어떻게 관리하는지 알아보겠습니다.
구현하기 위해서는 회원가입과 로그인 flow를 이해하고, 어떻게 서버 외부 접속을 허용하는지, 예외처리는 왜 그리고, 어떻게 해야하는지를 알아야 합니다.
회원가입 & 로그인 Flow
회원가입을 하기 위해선 클라이언트(사용자가 보는 화면)와 서버에게 유저 정보들을 POST 바디에 담아 전달합니다. 그리고 서버는 바디에 담긴 정보를 가공(유효성 검사 등)을 한 후에 DB에 담습니다.
그리고 분기점이 되는 uri 엔드포인트(signup)에 바디에 해당하는 내용을 담아 Request를 날립니다. 그리고 서버와 데이터베이스에 접근합니다.
Request 안에 있는 객체(바디)에 변수명을 넣고 변수명 안에서 키맵핑(user_email = data[‘email’])이 일어납니다.
성공 또는 실패를 한 경우 Response를 보내줍니다.
로그인을 할 때 get을 하지 않고 post를 하는 이유는 바디 안에 회원정보(이메일, 번호, 나이, 비밀번호 등)가 보내지게 되는데, header에 담아지는 것보다는 body에 담아 보내는 것이 보안적으로 뛰어납니다. 그리고 정보를 서버에 보내고 인증인가를 한 후 다시 token을 쏴주는 과정이 있어야 하기에 post로 정보를 보냅니다.
서버 외부 접속 허용
서버의 외부접속을 허용하기 위해 동일한 네트워크를 사용합니다. 즉 상대방 클라이언트와 호스트가 동일해야 한다는 말인데 이유는 private ip를 사용하기 위함입니다.
settings.py에 host를 모두 ['*']로 지정하고(ALLOWED_HOSTS = ['*']) django-cors-header를 설치한 후 옵션을 settings.py에 입력합니다. MIDDLEWARE 추가하는거 잊지않기!! 메모메모)
그리고 서버를 실행할 때 Python manage.py runserver 0:8000을 하면 해당 ip가 어떤 것이 오든 상관없어져 의도대로 외부 접속을 허용할 수 있습니다.
Ip를 확인하는 방법은 ipconfig getifaddr en0을 터미널에 입력하면 확인할 수 있습니다.
예외처리
서버를 어떠한 오류가 생기더라도 무리없이 돌리기 위해서 예외처리를 합니다. 여담으로 Duplicated라는 단어를 많이 사용합니다.
로그인 회원가입 구현
우선 프론트엔드에서 uri를 fetch합니다.
fail to fetch에러는 서버가 열리지 않았거나 uri가 일치하지 않아서 생긴 오류입니다. 404 not found에러가 뜬다면 서버와 통신은 되지만 uri엔드포인트가 확실하지 않은 경우가 많습니다, 405 method not allowed 에러가 뜬다면 프론트엔드와 백엔드 간 method가 일치하지 않는 경우가 많습니다. 백엔드에서 method를 post를 사용하고 있다면 post로, get을 사용하고 있다면 get으로 method를 변경합니다.
각종 인증을 거쳐 로그인에 성공하면 토큰을 발행합니다.
그 후에 토큰을 localStoragedp setItem을 한 후 main으로 navigate하는 등의 방식을 거칩니다.
여기서 만난 에러...!
실습을 진행하다가 다음의 에러를 마주하였습니다. "http://localhost:8000" has been blocked by CORS policy....
남들은 다 잘 되는데 저만 이 에러가 뜨더군요..~ 
CORS 처리를 해주지 않았을 경우 CORS 에러를 내뱉는데, settings.py 초기 세팅 때 MIDDLEWARE에 coresheaders를 추가해주지 않아서 그랬답니다 ㅋㅋㅋㅋ
해당 블로그는 위코드의 강의를 듣고 정리하였습니다!
