📝 오늘 한 것

1. user authentication - login

2. stateless / session / cookie

📚 배운 것

user authentication

1. 로그인

어제 공부에서 이어서

지금까지 완성된 postLogin 컨트롤러

import bcrypt from "bcrypt";

export const postLogin = async (req, res) => {
  cont { username, password } = req.body;
  const pageTitle = "Login";
  const user = await User.findOne({ username });
  if (!user) {
    return res.render("login", { pageTitle, errorMessage: "아이디를 찾을 수 없습니다".});
  }
  const ok = await bcrypt.compare(password, user.password);
  if (!ok) {
    return res.render("login", { pageTitle, errorMessage: "비밀번호가 틀립니다."});
  }
  
  // 실제로 로그인 되도록 해야 함
  // (작성 중)
  
  return res.redirect("/");
};

로그인을 시도한 user가 누구인지는 알고 있다.
user가 실제로 로그인 되도록 하려면 세션과 쿠키에 대해 알아야 한다.

1) 세션(session)

(1) 무상태(session)

서버가 브라우저의 요청을 받고 처리를 해 응답을 마치면 서버와 브라우저는 이에 대한 정보를 완전히 잊어버린다.
이처럼 한번 연결이 됐다가 끊어지는 것을 무상태(stateless)라고 한다.

(2) 세션(session)

따라서 서버가 누가 요청하는지를 알 수 있도록 하려면, user가 서버에 무언가를 요청할 때마다 user에게 정보를 남겨줘야 한다.
이처럼 브라우저와 백엔드 간에 어떤 활동을 했는지를 기억하는 것을 세션(session)이라고 한다.

이를 위해 user가 로그인 할 때마다 user에게 어떤 텍스트를 주고 그 다음부터는 user가 서버에 요청을 보낼 때마다 그 텍스트를 같이 보내도록 한다.

(3) express-session

express-session을 설치하면, 웹 사이트를 방문할 때마다 express가 알아서 그 텍스트(세션 id)를 만들어 브라우저에게 보내주고, 세션 DB에도 그 세션 id와 함께 세션 object를 저장해준다.

$ npm i express-session

먼저, express-session을 설치한다.

import session from "express-session";

app.use(session({
  secret: "Hello!",
  resave: true,
  saveUninitialized: true,
}));

server.js 폴더에서 express-session을 import 한 후 router 코드 앞에서 초기화해준다.
secret 값은 뒤에서 아무도 모르는 문자열로 바꿀 것이다.
resave와 saveUninitialized 옵션은 콘솔 창에 뜬 문구를 참고해 추가했다.

(4) 쿠키(cookie)

❗ 핵심 ❗

이제 브라우저가 서버에 요청을 보내면 서버는 브라우저에게 어떤 텍스트(세션 id)를 준다.
그 이후로 브라우저는 localhost:4000의 모든 url에 요청을 보낼 때마다 쿠키에서 세션 id를 가져와 함께 보내준다. (서로 다른 브라우저는 서로 다른 쿠키를 가진다.)
이를 통해 서버는 세션 DB에서 해당 세션 id를 가진 세션 object, 즉 user에 대한 정보를 찾을 수 있다.
즉, 쿠키에 있는 세션 id와 세션 DB에 있는 세션 id가 같은 세션을 찾는 것이다.
서버는 어떤 user가 어떤 브라우저에서 요청을 보냈는지 알 수 있고, user에 대한 정보를 기억하고 추가할 수 있다.

2) user 정보를 세션에 추가

import bcrypt from "bcrypt";

export const postLogin = async (req, res) => {
  cont { username, password } = req.body;
  const pageTitle = "Login";
  // user(username)가 존재하는지 확인
  const user = await User.findOne({ username });
  if (!user) {
    return res.render("login", { pageTitle, errorMessage: "아이디를 찾을 수 없습니다".});
  }
  // user가 입력한 password가 password의 해시 값과 일치하는지 확인
  const ok = await bcrypt.compare(password, user.password);
  if (!ok) {
    return res.render("login", { pageTitle, errorMessage: "비밀번호가 틀립니다."});
  }
  // user에 대한 정보를 세션에 추가한다
  req.session.loggedIn = true;
  req.session.user = user;
  
  // user에게 로그인에 성공했음을 알려야 한다
  // ...
  
  return res.redirect("/");
};

3) 템플릿 수정

user에게 로그인에 성공했음을 알리기 위해 세션에 기반해 프론트엔드에 내용이 표시되도록 템플릿을 수정해야 한다.
req.session.loggedIn이 false일 때 base.pug 파일에서 Join과 Login 링크를 보여주도록 하고, true일 때 Join과 Logout 링크를 보여주도록 한다.

그러나, 아래와 같이 수정해봤지만 에러가 발생했다.

if req.session.loggedIn
li
  a(href="/login") Login

이는 템플릿에서 세션에 접근할 수가 없기 때문에 생긴 에러이다.
이를 어떻게 수정해줘야 할까?

✨ 내일 할 것

1. 강의 계속 듣기