세션 방식 로그인 기능을 구현해보자
일단 라이브러리 3개를 설치한다.
npm install passport passport-local express-session
위 코드까지 server.js 에 작성해주면 시작전 세팅은 끝이다.
app.use(미들웨어)
웹서버는 요청-응답해주는 머신
미들웨어 : 요청-응답 중간에 뭔가 실행되는 코드
1. 로그인 페이지 제작 & 라우팅
일단 로그인 페이지인 login.ejs 를 만든다
이 폼을 전송하면 /login 경로로 POST 요청을 한다.
몽고디비에 login 이라는 collection 을 만들어서 document 를 하나 생성해보자
임시 계정이 하나 만들어졌다.
2. 아이디와 패스워드 검사하기
누군가 /login 으로 GET 요청을 하면 일단 보여줄 화면이 있어야 한다(로그인 폼 있는 페이지)
그리고 /login 으로 POST 요청을 하면 특정 코드를 실행시켜주도록 한다.
이 부분에서 아이디와 패스워드를 검사하는 부분이 들어가야겠다.
post() 라는 함수 두번째 파라미터로 저런식으로 코드를 추가해주면 요청과 응답 사이에 특정 기능을 실행할 수 있다.
passport 라이브러리가 제공하는 아이디/패스워드 인증을 도와주는 코드이다.
응답하기전에 local 방식으로 아이디/패스워드를 인증해라 - 라는 의미이다.
failureRedirect 부분은 로그인 인증이 실패했을 시에 /fail 경로로 이동한다는 의미이다.
만약 인증을 성공하면 / (홈 화면) 으로 redirect 해서 이동한다.
3. 어떻게 인증할지 세부코드
아이디/패스워드를 검사해주는 코드를 작성한다.(passport 라이브러리 예제코드)
여기에 LocalStrategy() 라는 코드가 있는데
local 방식으로 아이디/패스워드 검사를 어떻게 할지 도와주는 부분이다.
LocalStrategy( { 설정 }, function(){ 아이디비번 검사하는 코드 } )
필수로 해야하는 설정을 살펴보면
usernameField = 사용자가 제출한 아이디가 어디 적혔는지
passwordField = 사용자가 제출한 패스워드가 어디 적혔는지
session = 세션을 만들건지
passReqToCallback = 아이디/패스워드 말고 다른 정보 검사가 필요한지
이다
(라이브러리를 가져다 사용하는 것이므로 너무 겁먹지 말자)
done(서버에러, 성공시 사용자 DB 데이터, 에러메세지)
하지만 지금 이 상황은 pw 가 암호화되지 않았다. 나중에 암호화하는 방법을 추가해서 보안성을 높일 필요가 있겠다.
4. 세션 만들고 세션 아이디 발급해서 쿠키로 보내기
아이디와 패스워드가 맞으면(로그인을 성공하면) 세션데이터를 하나 만들어줘야 한다.
세션데이터에 포함된 세션 아이디를 발급해서 보내주는 것이다.
이 부분도 라이브러리의 도움을 받으면 된다. serializeUser 라는 함수를 사용하면 된다.
이 함수는 user.id 데이터를 바탕으로 세션 데이터를 만들고
그 세션 데이터의 아이디를 쿠키로 만들어서 사용자의 브라우저로 보내준다.
이제 쿠키가 정말로 서버에서 들어오는지 확인해보자
몽고디비에 만들어놨던 계정 정보로 로그인을 해본다.
검사 > 애플리케이션 > 쿠키 에 들어가면
세션이라고 적힌 쿠키가 새로 하나 생성이 된다.
아이디/패스워드를 잘못 입력하면
위와 같이 뜬다.
