📝 오늘 한 것

1. res.locals / MongoStore / saveUninitialized / 도메인 / expires / .env

📚 배운 것

user authentication

1. 로그인

어제 공부에서 이어서

export const postLogin = (req, res) => {
  // 생략
  
  // user에 대한 정보를 세션에 추가한다
  req.session.loggedIn = true;
  req.session.user = user;
  return res.redirect("/");
};

이제 req.session에 추가한 loggedIn과 user 값은 모든 컨트롤러에서 사용 가능하다.

1) 프론트엔드에 표시 (템플릿 수정)

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

이를 위해선 템플릿에서 req.session.loggedIn 값을 사용할 수 있어야 한다.
pug와 express는 res.render를 이용하지 않고도 express middleware를 만들어 res.locals를 이용해 템플릿에 변수를 전역적으로 보낼 수 있다.
이 점을 이용해 locals object에 로그인한 user를 추가한 후 이를 템플릿에 가져와 프론트엔드에 표시할 수 있다.

먼저, src 폴더에 middlewares.js 파일을 만든 후 localsMiddleware를 만들어 export 한다.
server.js 폴더에서 localsMiddleware가 session middleware 뒤에 오도록 작성한다.
그래야만 localsMiddleware에서 로그인한 user에 대한 정보가 있는 session에 접근할 수 있기 때문이다.

// middlewares.js
export const localsMiddleware = (req, res, next) => {
  res.locals.siteName = "Wetube";
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.loggedInUser = req.ssesion.user;
  next();
};

// server.js
import session from "express-session";
import { localsMiddleware } from "./middlewares";

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

app.use(localsMiddleware);

res.locals의 loggedIn 값을 기반으로 base.pug 파일의 nav를 수정한다.

user가 로그인 상태가 아니라면 loggedInUser(즉, req.session.user)는 undefined 값을 가질 것이다.
따라서 프로필 메뉴는 user가 로그인 상태일 경우에만 보이도록 한다.

nav
  ul
    if loggedIn
      li
        a(href="/logout") Log out
      li
        a(href="/my-profile") #{loggedInUser.name}의 Profile
    else
      li
        a(href="/join") Join
        a(href="/login") Login

이제 로그인/로그 아웃 상태에 따라 메뉴가 달라지는 것을 확인할 수 있다.

💡 postLogin 컨트롤러

📌 아이디 맞는지 확인
📌 비밀번호 맞는지 확인
📌 req.session을 이용해 세션에 user 정보 추가
📌 res.locals를 이용해 프론트엔드에 로그인 여부에 따라 달리 표시 (미들웨어)

2) MongoStore

session id는 쿠키에 저장되지만, session 데이터는 서버에 저장된다.
서버에 있는 session storage는 기본적으로 memory store이다.
따라서, 서버를 재시작하면 session 데이터는 사라진다.
서버가 재시작해도 session이 사라지지 않도록 하려면 session을 mongoDB와 연결해야 한다.

(1) connect-mongo 설치

express - connect-mongo 참고

$ npm install connect-mongo

connect-mongo를 설치한 후 server.js 파일에서 mongoStore를 import 하고 MongoDB에 sessions를 만든다.

import mongoStore from "connect-mongo"; // 추가 ❗

app.use(session({
  secret: "Hello!",
  resave: true,
  saveUninitialized: true,
  store: MongoStore.create({ mongoUrl: "mongodb://127.0.0.1:27017/wetube" }), // 추가 ❗
}));

MongoDB shell에서 collections를 검색하면 sessions가 만들어진 것을 확인할 수 있다.

> show collections
sessions
users
videos

(2) session 만들기

아직은 sessions에 아무런 session도 존재하지 않는다.
session을 만들기 위해 웹 사이트를 새로고침 한다.
로그인을 하면 Log out과 프로필 메뉴가 뜬다.
MongoDB shell에서 session이 만들어진 것을 확인할 수 있다.

> db.sessions.find()
{ "_id" : "pc__EnaXP5gY37scJHXEEy8SktMy17oL", "expires" : ISODate("2021-12-15T06:49:53.129Z"), "session" : "{\"cookie\":{\"originalMaxAge\":null,\"expires\":null,\"httpOnly\":true,\"path\":\"/\"},\"loggedIn\":true,\"user\":{\"_id\":\"61a6b4041bee12373c5042ff\",\"email\":\"syong@naver.com\",\"username\":\"syong\",\"password\":\"$2b$05$zShlHon.zCXKrsSbJGzOfeuIm9vDFHasBIDiq6PsKPFSE0WV4n9WG\",\"name\":\"leesyong\",\"location\":\"goyang\",\"__v\":0}}" }

이제는 서버를 닫은 후 재시작해도 여전히 로그인 상태인 걸 확인할 수 있다. (∵ 웹 사이트 메뉴와 mongodb sessions 그대로)
session이 서버가 아니라 데이터베이스에 저장되어 있기 때문이다.

3) 로그인한 user만 데이터베이스에 저장하기

현재 session 코드

app.use(session({
  secret: "Hello!",
  resave: true,
  saveUninitialized: true,
  store: MongoStore.create({ mongoUrl: "mongodb://127.0.0.1:27017/wetube" }),
}));

서버는 방문하는 '모든 user'에게 session id를 주고, 해당 user에 대한 정보를 포함하는 그 session은 데이터베이스에 저장된다.
그런데 봇이나 로그인 하지 않고 구경만 하는 user들이 방문한 경우에도 그들에 대한 정보를 포함하는 session이 데이터베이스에 저장된다.
익명의 user까지 저장하는 것은 너무 비효율적이므로 이를 수정해야 한다.

req.session.loggedIn = true;
req.session.user = user;

session이 새로 만들어진 후 수정된 적이 없으면, unininitialized 상태라고 한다.
session을 수정하는 것은 오직 컨트롤러에서 가능한데, postLogin 컨트롤러에서 session을 수정하는 코드는 위와 같다.

app.use(session({
  secret: "Hello!",
  resave: false, // 수정 ❗
  saveUninitialized: false, // 수정 ❗
  store: MongoStore.create({ mongoUrl: "mongodb://127.0.0.1:27017/wetube" }),
}));

'똑같은 session은 한 번만 저장'하기 위해서는, resave 속성의 값을 true에서 false로 수정해야 한다. (true라면 'user'가 로그인할 때마다 session을 데이터베이스에 저장한다.)

'user가 로그인했을 때만' session을 데이터베이스에 저장하기 위해서는, server.js 파일의 session 부분에서 saveuninitialized 속성의 값을 true에서 false로 수정해야 한다.
이는 초기화되지 않은 session은 store에 저장하지 않음을 의미한다.
session이 수정되었을 때만(즉, user가 로그인 했을 때만) 서버는 브라우저에 세션 id를 넘겨주고, 해당 user에 대한 정보가 담긴 session을 데이터베이스에 저장하도록 하는 것이다.
이제 로그인하지 않은 user에 대한 정보는 데이터베이스에 저장되지 않는다.

4) 쿠키(cookie)

(1) 도메인(domain)

쿠키를 만든 서버(쿠키를 전송해야 하는 서버)를 말한다.

(2) expires

만료 날짜를 지정해주지 않으면 session cookie가 된다.
session cookie는 user가 브라우저를 닫으면 사라진다.

Max-Age란 cookie가 만료되는 날짜를 말한다.
1/1000초 단위로 작성할 수 있다.

예를 들어 아래와 같이 작성하면 로그인한 후에 10초가 지나면 쿠키는 사라지고 자동으로 로그아웃된다.

app.use(session({
  cookie: {
    maxAge: 10000,
  },
}));

이는 예시일 뿐, 실제로 현재 프로젝트에서는 만료 시점을 따로 정해주진 않았다.

(3) secret과 데이터베이스 url 보호

보안을 위해 secret과 데이터베이스 url은 보이지 않도록 보호되어야 한다.

app.use(session({
  secret: "Hello!",
  resave: false,
  saveUninitialized: false,
  store: MongoStore.create({ mongoUrl: "mongodb://127.0.0.1:27017/wetube" }),
}));

secret이란 서버가 브라우저에 쿠키를 줬다는 것을 증명하기 위해 sign 할 때 사용하는 string을 말한다.
그런데 누군가 secret을 이용해 쿠키를 훔쳐 본인이 그 user인양 할 수 있기 때문에(session hijack: 세션 납치) secret은 길게 무작위로 만들어 외부에 노출되지 않도록 해야 한다.

한편, 데이터베이스는 user에 대한 정보를 가지고 있으므로 데이터베이스 url 또한 외부에 노출되어서는 안된다.

.env 파일 생성

이를 위해 환경 변수를 만들어 코드에 들어가면 안될 내용들을 추가할 수 있다.
프로젝트 폴더(package.json 파일이 있는 곳)에 .env 파일을 추가한 후 .gitignore 파일에 .env를 추가한다.
.env 파일에 추가하는 값은 관습적으로 모두 대문자로 적어야 한다.

// .env
COOKIE_SECRET=sdfjslkfjfoj23orjasfjslafsf9f
DB_URL=mongodb://127.0.0.1:27017/wetube

dotenv 설치 및 사용

dotenv는 .env 파일을 읽어 각각의 변수들을 process.env 안으로 넣어준다.
설치 후 가능한 한 빨리(파일의 위쪽에서) 사용하도록 한다.

$ npm i dotenv

가능한 한 앱 파일의 가장 위쪽에서 import 하도록 한다.
현재 프로젝트의 경우 server.js와 init.js 파일을 분리했기 때문에 실제로 앱을 실행시키는 init.js 파일의 가장 위쪽에서 import 해주었다.

// init.js
import "dotenv/config";
import "./db";
// 이하 생략

process.env

이제 process.env를 이용해 .env 값들에 접근해 사용할 수 있다.

// server.js
app.use(session({
  secret: process.env.COOKIE_SECRET, // 수정 ❗
  resave: false,
  saveUninitialized: fasle,
  store: MongoStore.create({ mongoUrl: process.env.DB_URL }); // 수정 ❗
}));

// db.js
mongoose.connect(process.env.DB_URL); // 수정 ❗

✨ 내일 할 것

1. 강의 계속 듣기