Express :: passport, 쿠키랑 세션 설정하기 (feat.로그인)

일단 쿠키와 세션이 왜 필요한지를 살펴보자.

 

쿠키

로그인을 하고난 후, 브라우저와 서버에서 같은 유저정보를 가지고 있어야한다.

로그인 후, 포스트를 작성하거나 덧글을 작성할 때,

유저정보와 함께 서버로 요청해야하기 때문이다.

그러므로 로그인을 할 때, 누가 로그인 했는지를 브라우저에 보내주어야 한다.

 

실제정보를 보내주면, 비밀번호가 그대로 노출되므로 보안에 취약하다.

그러므로 실제정보대신 암호화한 토큰을 브라우저로 보내준다.

이 토큰은 브라우저에 저장되는데, 이를 쿠키고 부른다.

브라우저에서는 이 후 요청을 보낼 때, 쿠키와 함께 요청한다.

(쿠키를 자동으로 요청헤더에 추가하여 요청)

 

하지만 보통 로그인을 할 때는 쿠키를 사용하지 않는다.

브라우저에서 접근이 가능하고 변조가 가능하기 때문.

로그인과 같이 보안이 중요한 작업의 경우 세션을 사용한다.

 

세션

세션은 쿠키를 기반으로 하는 서버쪽에서 가지고 있는 쿠키와 연결된 정보이다.

세션은 브라우저(세션쿠키)와 서버에 둘다 저장된다.

브라우저가 로그인 후, 요청할 때 쿠키 함께 보내주면,

백엔드 서버는 쿠키를 읽어서 유저를 알아 낼 수 있다.

 

---

express에서 passport를 사용하여 쿠키랑 세션을 편하게 설정하려면

express-session 이랑 cookie-parser 를 설치한다.

 

 

app.js

app.use를 사용해서 미들웨어 4개를 연결시켜주면된다.

session, cookieParser, passport.initialize(), passportsession()

 

secret은 쿠키로 변환될때 사용하는 암호이다.

이 암호는 개발자가 지정할 수 있다.

이 암호를 알면, 암호화된 쿠키의 실제 내용을 알 수 있으므로,

환경변수로 설정해 두는 것이 좋다.

 

cookieParser에서도 매개변수로 secret 값이 들어간다.

 

 

---

세션은 서버쪽에서 가지고 있는 쿠키와 연결된 정보라고 했었다.

서버에서 세션으로 실제 데이터를 전부 가지고 있기에는 정보가 너무 많다.

그래서 서버에서는 메모리를 아끼기 위해 세션에서 id만 가지고 있고,

정보가 필요할 때 id를 사용하여 DB에 정보를 가져와서 보내준다.

 

이렇게 작동하도록 패스포트 세션을 설정해보자.

passport의 serialize와 deserialize를 사용하여 설정한다.

 

serialize(직렬화)란 어떤 데이터를 다른 곳에서 사용 할 수 있게 다른 포맷의 데이터로 바꾸는 것이다.

패스포트에서 시퀄라이즈 객체(user)를 세션에서 저장할 수 있는 데이터(id)로 바꿔준다.

 

deserialize(역직렬화)는 다른포맷의 데이터로 바뀐 데이터를 원래의 포맷으로 복구하는 것이다.

세션에 저장된 데이터(id)를 다시 시퀄라이즈 객체(user)로 바꿔준다.

 

  passport.serializeUser((user, done) => { done(null, user.id) }; });  

이 부분은 라우터에서 req.login()을 하고나서 실행된다.

라우터와 실제 응답 사이에 있는 미들웨어라고 생각하면 쉽다.

user에서 쿠키와 연결된 세션에 저장할 저장할 정보(user.id)만 보내준다.

이 때 세션쿠키가 만들어지고 id 값이 저장된다.

 

  passport.deserializeUser(async(id, done) => { try { ... } catch (error) { done(error) } });  

이 부분은 로그인 성공 후, 그 다음 요청부터 매번 실행된다.

(findOne메서드는 비동기 함수이다.

비동기 작업에는 서버오류가 발생할 수 있으므로 try catch 를 잊어버리지 말자.)

 

세션쿠키에서 받은 id와 일치하는 id를 User에서 찾아 req.User 안에 넣어준다.

로그인 다음 요청부터는 req.User 에 로그인한 사용자의 정보가 들어 있으므로,

이를 이용해 작업을 수행할 수 있다.

 

 

---

여기까지 설정을 마친 후, 로그인을 해봤다.

로그인을 했을 때의 네트워크상태를 살펴보자.

 

Request Payload 

로그인 시 입력한 email과 password가 있다.

 

Request Headers

Set-Cookie : 여기서 쿠키로보낸 토큰값을 확인 할 수 있다.

connect.sid라는 쿠키를 통해 서버는 어떤 유저가 로그인 했는지를 판단한다.

 

 

 

 

 

쿠키랑 세션을 더 공부해봐야겠다.

 

 

참고
- 제로초 노드버드 강의
- https://chrisjune-13837.medium.com/web-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98%EC%9D%B4%EB%9E%80-aa6bcb327582
- https://interconnection.tistory.com/74