로그인, 회원가입, 사용자인증

---

👉 COOKIES + SESSION

(cookies with session ID)

import express from 'express';
import cookieParser from 'cookie-parser';

const app = express();
const PORT = 5001;

app.use(express.json());
app.use(cookieParser());

// 1. **cookie-parser** 미들웨어를 적용해주세요!
// 2. `GET` Method로 `http://localhost:5001/set`을 호출했을 때, **name**이라는 이름을 가진 “**nodejs”** 문자열을 저장한 **쿠키를 반환**해주세요.
// 3. `GET` Method로 `http://localhost:5001/get`을 호출했을 때, 클라이언트에게 전달받은 모든 쿠키 정보들이 반환되는 API를 만들어주세요!

// 쿠키 이용
app.get('/set', (req, res) => {
  res.cookie('name', 'nodejs');
  //res.cookie를 통해 클라이언트한테 쿠키를 전달할 수 있음
  return res.status(200).end();
});

app.get('/get', (req, res) => {
  const cookies = req.cookies;
  console.log(cookies);
  return res.status(200).json({ cookies });
});

// 세션이용 (uniqueInt에 시간을 넣어서 구분하기)
let session = {};
app.get('/set-session', (req, res) => {
  const name = '윤영';
  const uniqueInt = Date.now();
  session[uniqueInt] = { name };

  console.log(session[uniqueInt]); //{ name: '윤영' }

  res.cookie('sessionKey', uniqueInt);
  // sessionKey를 발급할건데 그 안에 uniqueInt로 sessionKey를 조회할 수 있음.
  return res.status(200).end();
});

app.get('/get-session', (req, res) => {
  const { sessionKey } = req.cookies;
  console.log(req.cookies); //{ sessionKey: '1699348802445' }
  console.log(sessionKey); //1699348721612 -> 할 때마다 변경됨
  console.log(session); //{ '1699348721612': { name: '윤영' } }
  const name = session[sessionKey];
  console.log(name); //{ name: '윤영' }
  return res.status(200).json({ name });
});

app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

EXPRESS-SESSION 이용

쿠키와 세션을 이용해서 근본적으로 저렇게 코드를 짤 수 있지만 라이브러리를 이용해서 간단하게 짤 수도 있다.

라이브러리 설치

// express, express-session를 설치
yarn add express express-session

// app.js
import express from 'express';
import expressSession from 'express-session';

const app = express();
const PORT = 3019;

app.use(express.json());
app.use(
  expressSession({
    secret: 'express-session-secret-key.', // 세션을 암호화하는 비밀 키를 설정
    resave: false, // 클라이언트의 요청이 올 때마다 세션을 새롭게 저장할 지 설정, 변경사항이 없어도 다시 저장
    saveUninitialized: false, // 세션이 초기화되지 않았을 때 세션을 저장할 지 설정
    cookie: {
      // 세션 쿠키 설정
      maxAge: 1000 * 60 * 60 * 24, // 쿠키의 만료 기간을 1일로 설정합니다.
    },
  }),
);

app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

/** 세션 등록 API **/
app.post('/sessions', (req, res, next) => {
  const { userId } = req.body;

  // 클라이언트에게 전달받은 userId를 세션에 저장합니다.
  req.session.userId = userId;

  return res.status(200).json({ message: '세션을 설정했습니다.' });
});

/** 세션 조회 API **/
app.get('/sessions', (req, res, next) => {
  return res.status(200).json({
    message: '세션을 조회했습니다.',
    session: req.session.userId ?? null, // 세션에 저장된 usrId를 조회합니다.
  });
});

다만 서버에 잠깐 저장된 인메모리 형식이라 서버를 껐다 키면 세션정보가 날라간다. 고로 mongoDB나 mysql등 과 같은 DB에 연결해서 세션데이터베이스에 세션id를 저장해 관리해야한다.

// 외부 세션 스토리지를 사용하기 위한, express-mysql-session 모듈을 설치
yarn add express-mysql-session

// src/app.js
import express from 'express';
import cookieParser from 'cookie-parser';
import expressSession from 'express-session';
import expressMySQLSession from 'express-mysql-session';
import LogMiddleware from './middlewares/log.middleware.js';
import ErrorHandlingMiddleware from './middlewares/error-handling.middleware.js';
import UsersRouter from './routes/users.router.js';
import PostsRouter from './routes/posts.router.js';
import CommentsRouter from './routes/comments.router.js';

const app = express();
const PORT = 3018;

// MySQLStore를 Express-Session을 이용해 생성합니다.
const MySQLStore = expressMySQLSession(expressSession);
// MySQLStore를 이용해 세션 외부 스토리지를 선언합니다.
const sessionStore = new MySQLStore({
  user: 'root',
  password: 'aaaa4321',
  host: 'express-database.clx5rpjtu59t.ap-northeast-2.rds.amazonaws.com',
  port: 3306,
  database: 'community_hub',
  expiration: 1000 * 60 * 60 * 24, // 세션의 만료 기간을 1일로 설정합니다.
  createDatabaseTable: true, // 세션 테이블을 자동으로 생성합니다.
});

app.use(LogMiddleware);
app.use(express.json());
app.use(cookieParser());
app.use(
  expressSession({
    secret: 'customized_secret_key', // 세션을 암호화하는 비밀 키를 설정
    resave: false, // 클라이언트의 요청이 올 때마다 세션을 새롭게 저장할 지 설정, 변경사항이 없어도 다시 저장
    saveUninitialized: false, // 세션이 초기화되지 않았을 때 세션을 저장할 지 설정
    store: sessionStore, // 외부 세션 스토리지를 MySQLStore로 설정합니다.
    cookie: {
      // 세션 쿠키 설정
      maxAge: 1000 * 60 * 60 * 24, // 쿠키의 만료 기간을 1일로 설정합니다.
    },
  }),
);
app.use('/api', [UsersRouter, PostsRouter, CommentsRouter]);
app.use(ErrorHandlingMiddleware);

app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

---

👉 JWT (JasonWebToken)

sign 메소드 : jwt 생성
decode 메소드 : jwt 복호화
verify 메소드 : jwt 변조 검증

• 변조되지 않은 데이터 : 복호화된 값(payload) 출력
• 변조된

import jwt from "jsonwebtoken";

const token = jwt.sign({ myPayloadData: 1234 }, "secretKey");
console.log(token); //eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJteVBheWxvYWREYXRhIjoxMjM0LCJpYXQiOjE2OTkzNTQzMTR9.YWfR1LNuKabazvkhWnipzwppNCHGprwlb9oporShoGQ

const decodedtoken = jwt.decode(token);
console.log(decodedtoken); //{ myPayloadData: 1234, iat: 1699354314 }

const decodedValueByVerify1 = jwt.verify(token, "secretKey");
console.log(decodedValueByVerify1); //맞다면 복호화된 값 반환{ myPayloadData: 1234, iat: 1699354608 }

// const decodedValueByVerify2 = jwt.verify(token, "SecretKey");
// console.log(decodedValueByVerify2); //JsonWebTokenError: invalid signature

---

👉 ACCESS TOKEN + REFRESH TOKEN + JWT

// app.js
import express from 'express';
import jwt from 'jsonwebtoken';
import cookieParser from 'cookie-parser';

const app = express();
const PORT = 3019;

const ACCESS_TOKEN_SECRET_KEY = 'Hello';
const REFRESH_TOKEN_SECRET_KEY = 'World';

app.use(express.json());
app.use(cookieParser());

//-----------------------------------------------------------
//accessToken, refreshToken 만들기 함수
function createAccessToken(id) {
  return jwt.sign({ id }, ACCESS_TOKEN_SECRET_KEY, {
    expiresIn: '10s',
  });
}

function createRefreshToken(id) {
  return jwt.sign({ id }, REFRESH_TOKEN_SECRET_KEY, {
    expiresIn: '7d',
  });
}

function validateToken(token, secretKey) {
  try {
    return jwt.verify(token, secretKey);
  } catch (error) {
    return null;
  }
}
//--------------------------------------------------

let tokenStorage = {};

//==================================================
/** access, refresh token 발급 **/
app.post('/tokens', async (req, res) => {
  const { id } = req.body;
  const accessToken = createAccessToken(id);
  const refreshToken = createRefreshToken(id);

  //refreshToken을 가지고 해당 유저의 정보를 서버에 저장
  tokenStorage[refreshToken] = {
    id: id,
    ip: req.ip,
    userAgent: req.headers['user-agent'],
  };

  // access, refresh Token -> 쿠키에 전달
  res.cookie('accessToken', accessToken);
  res.cookie('refreshToken', refreshToken);

  return res
    .status(200)
    .json({ message: 'token이 정상적으로 발급되었습니다.' });
});

//-----------------------------------------------------------
/** accessToken 검증 : verify로 검증 -> payload로 만들어 -> id만 취해 -> req.user에 담기**/
app.get('/tokens/validate', async (req, res) => {
  const { accessToken } = req.cookies;

  if (!accessToken) {
    return res
      .status(400)
      .json({ messge: 'Access Token이 존재하지 않습니다.' });
  }

  const payload = validateToken(accessToken, ACCESS_TOKEN_SECRET_KEY);
  if (!payload) {
    return res
      .status(400)
      .json({ message: 'Access Token이 유효하지 않습니다.' });
  }

  const { id } = payload;
  return res.status(200).json({
    message: `${id}의 payload를 가진 token이 성공적으로 인증되었습니다.`,
  });
});

//-----------------------------------------------------------
/** refreshToken으로 accessToken 갱신하기 : refreshToken 가져와서 -> payload 뽑아내서 refreshtoken이 유효한지 확인 -> 생성할 때 만들어뒀던 userInfor를 가져와서 그걸 **/
app.post('/tokens/refresh', async (req, res) => {
  const { refreshToken } = req.cookies;

  if (!refreshToken) {
    return res
      .status(400)
      .json({ message: 'Refresh Token이 존재하지않습니다.' });
  }

  const payload = validateToken(refreshToken, REFRESH_TOKEN_SECRET_KEY);
  if (!payload) {
    return res
      .status(400)
      .json({ message: 'Refresh Token이 존재하지않습니다.' });
  }

  const userInfo = tokenStorage[refreshToken];
  if (!userInfo) {
    return res
      .status(400)
      .json({ message: 'Refresh Token 정보가 서버에 존재하지않습니다.' });
  }

  const newAccessToken = createAccessToken(userInfo.id);
  res.cookie('accessToken', newAccessToken);

  return res
    .status(200)
    .json({ message: 'Access Token을 새롭게 발급하였습니다.' });
});

app.get('/', (req, res) => {
  return res.status(200).send('Hello Token!');
});

app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

  return res
    .status(200)
    .json({ message: 'Access Token을 새롭게 발급하였습니다.' });
});

app.get('/', (req, res) => {
  return res.status(200).send('Hello Token!');
});

app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

👆 post('/tokens') 실행한 모습 : cookies에 accessToken과 refreshToken 이 있다.

👆 get('/tokens/validate') 실행한 모습 : accessToken의 만료시간(10초)가 지나서 유효하지 않다고 나오는 것.

👆 get('/tokens/validate') 실행한 모습 :
10초 안에 실행한 모습.

👆 post('/tokens/refresh') 실행한 모습 : accessToken가 만료 후나 전이나 refreshToken을 발급하여 accessToken를 갱신한 모습이다. 처음 발급받았을 때와 새로 갱신해서 받은 accessToken의 값이 다르다! 왜냐면 jwt의 구조 중 payload의 내용 중 iat (issued at) 때문이다. iat은 항상 바뀌는데 이거때문에 jwt의 형태가 갱신할 때마다 바뀐다.