3주차 WIL + 1차 프로젝트

먼저 내가 담당한 파트는 로그인 담당이었다.

기본적으로 로그인, 회원가입 기능을 만들었다.

 

먼저 회원가입 기능은 아래와 같이 구현하였다.

아이디, 이름, 닉네임, 비밀번호, 비밀번호 확인으로 이루어져있다.

아이디 조건, 비밀번호 조건이 일치하지 않으면 js로 사전에 ajax를 막아버리는 기능을 만들었다. 이 때 조건을 설정할 때 정규식을 사용하였는데 정규식을 사용하는 것이 제일 깔끔하고 직관적이다.

 

중복확인 기능은 ajax로 서버에게 mongodb 안에 일치하는 정보가 있는지 물어보고 있으면 있다고, 없으면 없다고 다시 브라우저로 보낸다. 아무런 이상이 없다면 ajax로 POST요청을 보내 데이터를 mongoDB에 기록한다. 그리고 js가 success응답을 받으면 /login페이지로 돌려보내준다. 여기서 비밀번호를 그대로 입력하게 되면 노출이되어 문제가 되기때문에 해쉬화를 시켜주어 암호화 시켜주었다. 전에는 bycrypt를 사용한 적이 있는데 이번에는 sha256을 사용하려고 한다.

pw_hashed = hashlib.sha256(data['pass_give'].encode('utf-8')).hexdigest()

먼저 해쉬화를 해주려면 hashlib 모듈을 사용하여 해쉬 클래스객체로 반환해주고 그다음 haxdigest()로 해쉬화를 시켜주는 것이다. 하지만 해쉬객체를 만드려면 먼저 인코딩을 시켜주어야 하기때문에 받아온 문자열(str)을 인코딩 해주었다.

그 다음은 로그인화면이다. 여기에서도 마찬가지로 정보를 적어 로그인 버튼을 누르면 서버로 데이터가 POST요청으로 전송되어 mongodb에 일치하는 아이디가 없다면 일치하는 아이디가 없습니다. 라고 데이터를 보내고 아이디가 있다면 그 다음 비밀번호를 해쉬화 하여 db에 담긴 것과 일치하면 쿠키를 같이 보내준다. 그리고 웹에서 쿠키를 저장하고 그 쿠키를 바탕으로 로그인 유무를 확인할 수 있다. 쿠키의 payload에 로그인 유저를 식별할 수 있는 id라든지의 정보를 주어 db에서 찾아 올 수 있도록 해주었다.

 

그리고 oauth를 사용하여 깃허브와 카카오톡 로그인 기능역시 추가해주었다. 먼저 user가 소셜로그인 버튼을 누르면 소셜로그인 홈페이지로 이동하고 아이디와 비밀번호를 적는다. 정보가 일치하면 우리가 사전에 설정해둔 client id와 redirect url이 일치하면 유저에게 인가 code를 발급해주고 유저는 그 인가 code를 다시 서버에게 전송한다. 그리고 서버는 유저에게 받은 code와 client id client secret을 같이 보내어 access_token의 발급을 요청한다. 그럼 카카오,깃허브에서 확인하고 일치하면 access_token을 발급해준다. 우리는 이 토큰을 가지고 유저의 정보를 받아 올 수 있다.

 

그리고 글 쓰기, 글 수정, 글 삭제, 글 불러오기, 로그인 확인 middleware를 만들었다.

팀원들이 만든 html css에 기능을 추가하였다,

 

먼저 로그인 확인 middleware는 flask에서 데코레이터로 불리우는 것이 있지만 정보도 많이 없고 읽기 힘들어서 ... 내가 그냥 함수를 만들어서 사용하였다.

 

쿠키에서 토큰을 먼저 가져오고 그 토크를 디코드 한다. 디코드 하는 순간 오류가 난다면 만기시간이 지났거나, 유효하지 않은 토큰이 있다는 뜻이라서 'bad'를 리턴해준다. 만약 제대로 디코드가 된다면 쿠키를 가지고 있다는 뜻이니까 'ok'사인을 보내주었다. 이로써 로그인의 유무를 확인하여 로그인이 되면 /login,(로그인 화면) /join (회원가입 화면) 등으로 이동을 못하게 막았고, 로그인이 되지않았다면 /home등으로 이동하는 것을 막았다. 

 

글 불러오기는 홈화면에서 db를 불러와 jinja2템플릿을 사용하여 for문으로 반복하여 표현하는 식으로 하였고, 

마이페이지에서는 자신의 글만 보이도록 쿠키에 있는 id정보와 일치하는 글 작성자 id의 글들만 불러와서 보여지도록 하였다. 그리고 수정과, 삭제 역시 쿠키의 정보를 가져와(현재 로그인 되어있는 유저의 정보) 글의 작성자 id와 일치한다면 삭제가 되도록, 수정이 되도록 ajax를 이용하여 api를 만들었다.

 

일단 img를 업로드하는 부분에 있어서는 아직 구현을 하지 못했다. 먼저 파일을 그대로 서버에 저장하고 그 이름을 db에 저장해서 db에서 이름을 불러오는 방식과  파일을 gridfs로 분할하여 저장하는 방식에 대해서 배웠다. 이를 통해 한번 이미지 업로드 까지 구현해보도록 해야겠다. 전에는 aws s3에 파일을 저장하고 그 파일의 이름을 db에 저장하는 방식을 사용하였는데 이 방법이 제일 효율적인 것 같다. 서버에 파일을 저장하면 효율적이지 못하기 때문이다.

 

이번 과제를 통해서 flask의 데코레이터, 블루프린트, img업로드 복습, s3 저장소 사용방법, 바이너리, base64등의 사용법을 공부해야겠다는 생각이 들었다. 

 

그리고 댓글기능에 있어서는 mongoose에서는 populate를 사용하여 간단히 해결하였지만 pymongo에서는 mongoose를 사용할 수 없는 것 같았다. 이 부분 또한 고민해야될 부분이다