블로그 만들기(7) - 회원 기능 예외 사항 서버에서 검증하기

 
오늘 해볼것은
1. 회원가입이랑 로그인 할때 사용자가 허튼짓 못하게 사전에 server.js에서 예방해 두고
2. 게시판 기능을 회원만 이용 가능하도록 해보고
 
먼저 기존 코드중 회원가입 기능을 보면

 
각 input의 아이디, 비밀번호에 자체적으로 type속성으로 input을 받고는 있는데요
이렇게 예외가 없어버리면
아무거나 id가 되버리고, 글자수도 제한이 없겠는데요?
그러면  누가 document 보다 큰 용량의 id와 ps를 이용해서 회원가입을 하려고 하면 오류가 발생하겠는데요?
그렇기 때문에 글자수를 제한해 주는게 좋아보입니다.
 
기존 코드인데요

 
이건 폼 데이터 처리 미들웨어를 기존에 등록했기 때문에
input에 입력된 내용은 req.body.name, req.body.password 이렇게 값을 다뤄줄수 있을것 같네요

app.use(express.urlencoded({ extended: true })); // 폼 데이터 처리

app.use(express.json()); // JSON 데이터 처리

 
그러면 if문 하나 써주면 예방 가능할것 같은데요?

 
아이디 비밀번호의 길이의 최소최대 설정해주고, || 연산자를 통해서 NG인 상황을 if 문을 통해서 필터링 했습니다.
만약에 NG인 상황이면 if문이 동작하겠죠?

그럴경우 signup에서 error-message를 다음 div를 활성화 시켜줍니다.
그러면 경고 메시지가 뜨겠군요 한번 해보면

 
길이 조건을 만족하지 않은 id나 ps를 넣으면 회원가입을 거부하겠군요
그런데 아이디 비밀번호도 뭔가 조건이 더 필요할것 같은데요..
이거 정규식을 사용해서 조금더 제한을 두겠습니다.
 
많은 경우의 수가 있겠지만 예를들어서
id는 문자와 숫자를 조합해야 하고
ps는 특수문자를 반드시 포함하도록 해보는게 좋겠군요
 
 
조건식을 찾아보니

 
이렇게 구성하면 될것 같은데, 이거 정규식 사용 방법이 따로 있는걸까요? 외워야 하는건지 아니면 그때그때 검색해야 하는지 모르겠네요 아마 후자일듯 하지만
 
이렇게 아까 코드를 조금 수정해서 이 조건도 넣어주면

아이디의 길이 조건, 정규식 조건을 만족하지 못하면 error div 보여주고
비밀번호의 길이조건, 정규식 조건을 만족하지 못하면 error div 보여주고
두 조건을 만족할 경우 정상적으로 회원가입 시켜주면 되겠네요.
 
잘 동작하는지 테스트 해보면

 
잘 동작하네요. 이런식으로 만약에 필터링 해야할 부분이 있으면
if문을 이용해서 필터링하면 될듯요.
 
그럼 두번째로 글쓰기, 수정, 삭제를 회원 전용 기능으로 만들고 싶은데
글쓰기 페이지로 이동할떄, req.session.userId가 true일 경우에만 /write 요청을 주도록 해주면 될것 같은데
이것도 if문 쓰면 쉽게 해결될것 같은데요
 

 
현재 session에 req.session.userId 가 존재하면 글쓰기 페이지로 이동시켜주고
없을경우 로그인 페이지로 이동시켜 주면 될듯요.
 
그런데 여기서 끝내면 안되는게
html js 고수면 개발자 도구에서 html 위변조하고 /add 요청이 글발행 기능하는 post 요청인거 알면
로그인 안해도 글발행 가능할것 같은데요?
 
그러면 안되므로 서버단에서 /add 요청 받았을때, 검증하는 절차가 있어야 할듯 합니다.
근데 검증할 정보가 글쓰기 안에는 없는데요?
그래서 글쓰기 페이지에 정보를 보내주고
input 태그의 values 값에 req.session.userId 정보를 저장하고
hidden 속성을 이용해서 필드를 숨겨주면 될것 같은데요?
이거 개발자 도구로 볼수 있어도 글 발행 기능은 서버단에서 검증하기 때문에 괜찮을듯 합니다.
 

 
이렇게 글쓰는 페이지로 로그인 정보를 보내주고

 
이렇게 필드에 userId를 저장해둡니다.
 
이제 /add 기능 실행해주기 전에 검증해주면 되겠죠?

 
이러면 /add 기능을 로그인 된 사용자만 이용 가능할것 같네요.
 
그럼 이제 수정하기, 삭제하기를 글쓴 본인만 삭제하게 해주려면 어떻게 해야할까요?
이것도 삭제하기전에 조건문 써주면 될것 같은데, 애초에 조건문써서 본인 게시물일 경우만
수정하기, 삭제하기 버튼이 보이도록 하는것도 좋을것 같네요.
 
그런데 그럴려면 작성된 게시글에 작성자의 _id를 저장해두면
현재 로그인된 사용자가 작성한 게시물인지
비교가 쉬워보입니다.

게시글 작성할때 post 컬렉션에 userId도 저장해주고

userId에 현재 로그인 되어있는 _Id 를 저장해서 보내주고
detail.ejs 페이지에서 if문을 이용해서 result.userId === sessionUserId 인 경우에만 수정, 삭제 버튼을 생성해주면 되겠군요

 
이런식으로 하면 되겠죠?
그럼 잘 동작하나 볼까요

이렇게 회원정보를 게시글 document 에 저장하면, 현재 로그인 되어 있는 req.session.userId 와 비교해서 
특정 유저에게만 버튼을 활성화 시켜줄수 있겠군요
 
근데 여기서 멈춰버리면 또 문제가 생기는게
악성 사용자가 
 
그냥 /edit/submit/:id 로 직접 요청해버리면?
 
이런식으로 직접적으로 수정페이지에 요청을 보내버리면 문제가 생길것 같은데요.
전부 서버단에서 막아둬야 할것 같군요.
if문 쓰면 될듯합니다.
 
findOne()으로 해당하는 게시물 찾아오고
equals() 이용해서 userId를 비교해주면 되겠죠
왜 굳이 이런식으로 비교하냐면 자료형식을 보니깐
post 컬렉션에 저장되어있는 userId는 string 형식이고 req.session.userId는 new ObjectId() 형식이여서
이런식으로 비교했습니다.

이제 서버단에서 검증이 가능하겠군요.
 
삭제기능도 동일합니다.

 
1. 회원가입시 아이디 비번 규칙 만들어주기
2. 글 발행하는 기능은 로그인 했을 경우만 가능하게 해주기
3. 글 수정, 삭제 기능은 해당 게시물을 작성한 사람만 가능하게 해주기
 
세 기능은 잘 만든것 같네요
 
원래 오늘 프로필 UI도 좀 꾸미려고 했는데, 생각보다 시간을 많이 써서 여기서 포스팅 마무리 하고 내일은
프로필 페이지 전반적으로 꾸며보고, 전반적으로 UI 수정할 부분 있으면 GPT 이용해서 고쳐보도록 하겠습니다.