시작하면서...

인턴하면서 인증과정과 token에 대해 무지했기에,
제휴사 페이지 개발을 시작할 때 사용했던 토큰 이름을 관리자 페이지의 것으로 착각했던 경험이 있었다.

이러한 경험을 방지하기 위해 어떤 방법으로 인증이 활용되는지를 알아보고자 한다.


가장 먼저 도전했던 것은 'MERN스택' 체험하기였는데,
덕분에 회원가입이나 로그인 코드를 직접 만들어보고 JWT를 적용해볼 수 있었다.

이 글에서는 이후, 간단하게 다른 인증 방식을 제작했던 경험을 기술하려 한다.

---

실습

모든 실습은 express를 통해 진행되었다.

간단한 백엔드 작업만으로, 브라우저에서 확인할 수 있을 정도만 코드를 작성했다.

Session

기본 세팅

우선, 세션에 필요한 패키지들을 우선 설치했다.

• express-session
• dotenv

이후 기본적인 라우터 처리를하고 서버를 열어준다.

import express from 'express';
import session from 'express-session';
import dotenv from 'dotenv';

dotenv.config();

const app = express();

app.get('/', (req, res, next) => {
  console.log('와우');
});

app.listen(3000,()=>{
	console.log("3000번 켜짐");
});

세상에서 가장 간단한 백엔드 코드

세션 적용하기

이제 세션을 사용해보자.
다음과 같이 애플리케이션 레벨 미들웨어로 적용한다.

app.use(
  session({
    secret: 'wow this is my secret',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 10 * 1000 },
  })
);

resave와 saveUninitailized 옵션은 일반적인 경우 위와 같이 처리해준다.

• resave:
  매 request마다 기존의 session에 변경사항이 없어도 다시 저장하는 옵션.
• saveUninitailized:
  초기화 되지 않은 session도 저장하기.

이제 세션에 저장할 수 있는 정보들에 직접 접근해보자.

이전에 만들어둔 '/' 라우터를 다음과 같이 수정한다.

app.get('/', (req, res, next) => {
  console.log('세션 정보들: ', req.session);
  if (req.session.num == undefined) {
    req.session.num = 1;
  } else {
    req.session.num += 1;
  }
  res.send(`curNum: ${req.session.num}`);
});

코드 내용은 다음과 같다.

📜
session에 num이라는 필드가 없다면 1로 초기화를,
있다면 기존값에 1씩 더하고,
이를 결과를 문자열로 클라이언트에 전달하세요.

브라우저에서 cookie탭을 보면 세션 id값을 확인할 수 있을 것이다.

DB와 연결하기

실무에서의 경험을 체험해보기 위해 세션 정보들을 DB에 연결하기로 했다.

간단한 MongoDB를 사용해보았다.

필요한 패키지는 다음과 같다.

• connect-mongodb-session

express-session관련 패키지 중 가장 간단하게 사용할 수 있는 패키지로 보였다.

기본 세팅에 대한 코드는 다음과 같다.

var MongoStore = require('connect-mongodb-session')(session);
const store = new MongoStore(
  {
    uri: process.env.MONGO_URI,
    collection: 'Session',
  },
  (error) => {
    console.error(error);
  }
);
store.on('error', (err) => console.error(err));

이제 이렇게 만들어진 store를 세션 동작과 연결하면 되는데,
이는 session 미들웨어에 다음과 같이 간단하게 처리할 수 있다.

app.use(
  session({
    secret: 'wow this is my secret',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 10 * 1000 },
    store: store, // 바로 이 부분이다.
  })
);

app.get('/', (req, res, next) => {
  ...

정말 간단하게도 이렇게 하면 mongoDB에 쌓이는 num 데이터를 볼 수 있다!

참고 자료

생활코딩 Web4 - Express Session & Auth