[24.12.04 / TASK-54] Refactor: Token 검증 및 Velog API 호출 (#6)

* feature: database connection 추가

* refactor: db.comfig.ts -> db.config.ts 오타 수정

* feature: pre-commit 기능추가, 변경된 파일만 해당

* feature: add cors

* modify: Type folder changed from camelCase to snake_case

* refactor: changed TypeScript runtime executor from ts-node to tsx

* feature: 간단한 토큰 검증 후 Velog API 호출

* modify: 오타 및 상대 경로 -> 절대 경로

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* modify: user.controller.ts 절대 경로 -> 상대 경로

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: Token 추출 로직 개선

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: cors 설정 및 개발 환경변수 추가

* refactor: cors 설정 오탈자 수정

* refactor: src/app.ts 미들웨어 순서 조정

* featrue: 유저 저장 및 업데이트

* modify: .env.sample 수정

* modify: 에러 핸들링 next제거 express.d.ts 수정

* modify src/app.ts

에러핸들링 위치 변경

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* modify: 에러 핸들링 미들웨어

* modify: 에러 핸들링 미들웨어

* feature: login 요쳥 시 token 인증 및 사용자 저장, 업데이트

* modify: query문 수정

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor: user controller 응답값 통일화 및 에러 미들웨어 수정

* modify: key.util 문서 오타 수정

* refactor: User Repo 에러 핸들링

* modify: repositories 오타 수정

* refactor: user service 에러 헨들링

* modify: 전체 파일 절대경로 -> 상대경로

* refactor: user service 리펙토링

* refactor: dto 검증 미들웨어 try문으로 변경 및 수정

* modify: 로그인 반환값 수정

* refactor: custom error

* modify: db error status code

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* modify: import 순서 수정

* feature: log저장

* refactor: User Service encryptTokens Error

* refactor: import model path

* refactor: error handling

* fix: 오탈자 수정 및 경로 수정

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: HA0N1

.env.sample

@@ -14,5 +14,5 @@ AES_KEY_6="81f92ab73c4e59d8a67f83b21d6e4c53"
 AES_KEY_7="d87b61e9f34a2c85f19a7e53c6d8f21a"
 AES_KEY_8="7c58f92ae1d3b67a4c29f8b36e17d4f9"
 AES_KEY_9="a93b4f7e2c6d81a7f5c3b2e89d47f612"
-ALLOWED_ORIGINS="http://localhost:8080,https://myapp.com"
+ALLOWED_ORIGINS="http://localhost:3000,https://myapp.com"
 NODE_ENV="development"

package.json

@@ -25,11 +25,16 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^1.7.8",
+    "class-transformer": "^0.5.1",
+    "class-validator": "^0.14.1",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
-    "pg": "^8.13.1"
+    "pg": "^8.13.1",
+    "reflect-metadata": "^0.2.2",
+    "winston": "^3.17.0",
+    "winston-daily-rotate-file": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",

pnpm-lock.yaml

@@ -1,8 +1,11 @@
+import 'reflect-metadata';
 import express, { Application } from 'express';
 import dotenv from 'dotenv';
 import cors from 'cors';
-import router from './routes/user.router';
 import cookieParser from 'cookie-parser';
+import router from './routes/user.router';
+import { errorHandlingMiddleware } from './middlewares/error-handling.middleware';
+
 dotenv.config();
 
 const app: Application = express();
@@ -12,15 +15,16 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(
   cors({
-    origin: process.env.NODE_ENV === 'production' ? process.env.ALLOWED_ORIGINS?.split(',') : 'http://localhost:8080',
-    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+    origin: process.env.NODE_ENV === 'production' ? process.env.ALLOWED_ORIGINS?.split(',') : 'http://localhost:3000',
+    methods: ['GET', 'POST'],
     allowedHeaders: ['Content-Type', 'Authorization', 'Cookie'],
     credentials: true,
   }),
 );
-
 app.use('/', router);
 app.get('/', (req, res) => {
   res.send('Hello, V.D.!');
 });
+app.use(errorHandlingMiddleware);
+
 export default app;

src/app.ts

@@ -0,0 +1,47 @@
+import fs from 'fs';
+import winston from 'winston';
+import winstonDaily from 'winston-daily-rotate-file';
+
+const logDir = `${process.cwd()}/logs`;
+const errorLogDir = `${logDir}/error`;
+
+if (!fs.existsSync(logDir)) {
+  fs.mkdirSync(logDir);
+}
+if (!fs.existsSync(errorLogDir)) {
+  fs.mkdirSync(errorLogDir);
+}
+
+const logger = winston.createLogger({
+  format: winston.format.combine(
+    winston.format.timestamp({
+      format: 'YYYY-MM-DD HH:mm:ss',
+    }),
+    winston.format.printf((info) => {
+      return `${info.timestamp} ${info.level}: ${info.message}`;
+    }),
+  ),
+  transports: [
+    new winston.transports.Console({
+      level: process.env.NODE_ENV === 'production' ? 'info' : 'debug',
+    }),
+
+    new winstonDaily({
+      level: 'debug',
+      datePattern: 'YYYY-MM-DD',
+      zippedArchive: true,
+      filename: `%DATE%.log`,
+      dirname: logDir,
+      maxFiles: '7d',
+    }),
+    new winstonDaily({
+      level: 'error',
+      datePattern: 'YYYY-MM-DD',
+      zippedArchive: true,
+      filename: `%DATE%error.log`,
+      dirname: errorLogDir,
+      maxFiles: '7d',
+    }),
+  ],
+});
+export default logger;

src/configs/logger.config.ts

@@ -1,13 +1,26 @@
-import { CustomRequest } from 'src/middlewares/auth.middleware';
+import { NextFunction, Request, Response, RequestHandler } from 'express';
+import logger from '../configs/logger.config';
+import { UserWithTokenDto } from '../types/dto/user-with-token.dto';
 import { UserService } from '../services/user.service';
-import { Response } from 'express';
 
 export class UserController {
   constructor(private userService: UserService) {}
 
-  velogApi = async (req: CustomRequest, res: Response): Promise<void> => {
-    console.log(req.user);
-    console.log(req.body);
-    res.status(200).json({ data: req.user });
-  };
+  login = (async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      const { id, email, profile } = req.user;
+      const { accessToken, refreshToken } = req.tokens;
+
+      const userWithToken: UserWithTokenDto = { id, email, accessToken, refreshToken };
+      const isExistUser = await this.userService.handleUserTokensByVelogUUID(userWithToken);
+      return res.status(200).json({
+        success: true,
+        message: '로그인에 성공하였습니다.',
+        data: { id: isExistUser.id, email: isExistUser.email, profile },
+      });
+    } catch (error) {
+      logger.error('로그인 실패', error);
+      next(error);
+    }
+  }) as RequestHandler;
 }

src/controllers/user.controller.ts

@@ -0,0 +1,10 @@
+export class CustomError extends Error {
+  code: string;
+  statusCode?: number;
+  constructor(message: string, code: string, statusCode?: number) {
+    super(message);
+    this.name = this.constructor.name;
+    this.code = code;
+    this.statusCode = statusCode;
+  }
+}

src/exception/custom.exception.ts

@@ -0,0 +1,7 @@
+import { CustomError } from './custom.exception';
+
+export class DBError extends CustomError {
+  constructor(message: string) {
+    super(message, 'DB_ERROR', 500);
+  }
+}

src/exception/db.exception.ts

@@ -0,0 +1,6 @@
+import { CustomError } from './custom.exception';
+export class TokenError extends CustomError {
+  constructor(message: string) {
+    super(message, 'TOKEN_ERROR', 401);
+  }
+}

src/exception/token.exception.ts

@@ -1,82 +1,47 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { NextFunction, Request, Response } from 'express';
 import axios from 'axios';
+import logger from '../configs/logger.config';
+import { TokenError } from '../exception/token.exception';
 
-interface VelogUser {
-  id: string;
-  username: string;
-  email: string;
-  profile: {
-    id: string;
-    thumbnail: string;
-    display_name: string;
-    short_bio: string;
-    profile_links: Record<string, string>;
-  };
-  user_meta: {
-    id: string;
-    email_notification: boolean;
-    email_promotion: boolean;
-  };
-}
-
-// Request에 user 프로퍼티를 추가하기 위한 타입 확장
-export interface CustomRequest extends Request {
-  user?: VelogUser;
-}
-
-/**
- * authmiddleware의 역할
- * 1. Velog API 호출 전 간단한 Bearer 검증
- * 2. Velog API 호출
- * 3. 무사히 응답이 되었다면 next로 엔드포인트 진입
- */
+const VELOG_API_URL = 'https://v3.velog.io/graphql';
+const QUERIES = {
+  LOGIN: `query currentUser {
+    currentUser {
+      id
+      username
+      email
+      profile {
+        thumbnail
+        }
+      }
+    }`,
+};
 
 /**
  * 요청에서 토큰을 추출하는 함수
- * @param {CustomRequest} req - req에 user 프로퍼티를 추가한 Express 객체
- * @returns {string | null, string | null} accessToken 및 refreshToken 객체 반환
- * @description 다음과 같은 순서로 토큰을 확인합니다
- * 1. 요청 본문 - 신규 유저인 경우
- * 2. 요청 헤더 - 기존 유저인 경우
- * 3. 요청 쿠키 - 기존 유저인 경우
+ * @param req - Express Request 객체
+ * @returns  추출된 토큰 객체
+ * @description 다음 순서로 토큰을 확인합니다:
+ * 1. 요청 본문 (req.body) - 신규 로그인
+ * 2. 요청 헤더 - API 호출
+ * 3. 쿠키 - 웹 클라이언트
  */
-const extractTokens = (req: CustomRequest): { accessToken: string | undefined; refreshToken: string | undefined } => {
+const extractTokens = (req: Request): { accessToken: string; refreshToken: string } => {
   const accessToken = req.body.accessToken || req.headers['access_token'] || req.cookies['access_token'];
   const refreshToken = req.body.refreshToken || req.headers['refresh_token'] || req.cookies['refresh_token'];
 
   return { accessToken, refreshToken };
 };
 
 /**
- * Velog GraphQL API를 호출하여 액세스 토큰을 검증하는 함수
- * @param {string} accessToken - Velog Api 검증에 사용할 Access Token
- * @returns {Promise<VelogUser | null>} 검증 성공 시 사용자 데이터, 실패 시 null 반환
+ * Velog API를 통해 사용자 정보를 조회합니다.
+ * @param query - GraphQL 쿼리 문자열
+ * @param accessToken - Velog access token
+ * @throws {Error} API 호출 실패 시
+ * @returns Promise<VelogUserLoginResponse | null>
  */
-const verifyVelogToken = async (accessToken: string): Promise<VelogUser | null> => {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const VELOG_API_URL = 'https://v3.velog.io/graphql';
-  const query = `
-    query currentUser {
-      currentUser {
-        id
-        username
-        email
-        profile {
-          id
-          thumbnail
-          display_name
-          short_bio
-          profile_links
-        }
-        user_meta {
-          id
-          email_notification
-          email_promotion
-        }
-      }
-    }
-  `;
-
+const fetchVelogApi = async (query: string, accessToken: string) => {
   try {
     const response = await axios.post(
       VELOG_API_URL,
@@ -93,54 +58,50 @@ const verifyVelogToken = async (accessToken: string): Promise<VelogUser | null>
     const result = response.data;
 
     if (result.errors) {
-      console.error('GraphQL Errors:', result.errors);
+      logger.error('GraphQL Errors:', result.errors);
       return null;
     }
 
-    return result.data?.currentUser || null;
+    return result.data.currentUser || null;
   } catch (error) {
-    console.error('Velog API 호출 중 오류:', error);
+    logger.error('Velog API 호출 중 오류:', error);
     return null;
   }
 };
 
 /**
- * Bearer 토큰을 검증하고 Velog 사용자를 인증하는 미들웨어
- * @param {CustomRequest} req - req에 user 프로퍼티를 추가한 Express 객체
- * @param {Response} res - 응답 객체
- * @param {NextFunction} next - 다음 미들 웨어 화출 함수
- * @returns {Promise<void>}
- * @description
- * 인증 처리 과정:
- * 1. 요청에서 액세스 토큰과 리프레시 토큰 추출
- * 2. Velog API를 통해 토큰 유효성 검증
- * 3. 검증 성공 시 요청 객체에 사용자 정보 첨부
- * 4. 토큰이 유효하지 않거나 누락된 경우 에러 응답 반환
- *
- * @throws {Error} 토큰 검증 실패 시 에러 발생
+ *  Bearer 토큰을 검증하고 Velog 사용자를 인증하는 함수
+ * @param query - 사용자 정보를 조회할 GraphQL 쿼리
+ * @returns
  */
-export const verifyBearerTokens = async (req: CustomRequest, res: Response, next: NextFunction): Promise<void> => {
-  try {
-    // 1. 토큰 추출
-    const { accessToken, refreshToken } = extractTokens(req);
-    if (!accessToken || !refreshToken) {
-      res.status(401).json({ message: 'access_token과 refresh_token은 필수값 입니다.' });
-      return;
-    }
+export const verifyBearerTokens = (query: string) => {
+  return async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      const { accessToken, refreshToken } = extractTokens(req);
 
-    // 2. Velog API를 통한 토큰 검증
-    const velogUser = await verifyVelogToken(accessToken);
-    if (!velogUser) {
-      res.status(401).json({ message: '유효하지 않은 토큰입니다.' });
-      return;
-    }
+      if (!accessToken || !refreshToken) {
+        throw new TokenError('accessToken과 refreshToken의 입력이 올바르지 않습니다');
+      }
 
-    // 3. 사용자 정보를 객체에 추가
-    req.user = velogUser;
+      const velogUser = await fetchVelogApi(query, accessToken);
 
-    next();
-  } catch (error) {
-    console.error('토큰 검증 중 오류 발생:', error);
-    res.status(500).json({ message: '서버 오류로 인해 토큰 검증에 실패했습니다.' });
-  }
+      if (!velogUser) {
+        throw new TokenError('유효하지 않은 토큰입니다.');
+      }
+
+      req.user = velogUser;
+      req.tokens = { accessToken, refreshToken };
+      next();
+    } catch (error) {
+      logger.error('인증 처리중 오류가 발생하였습니다.', error);
+      next(error);
+    }
+  };
+};
+/**
+ * Velog 사용자 인증을 위한 미들웨어 모음
+ * @property {Function} login - 사용자의 전체 정보를 조회하는 인증 미들웨어
+ */
+export const authMiddleware = {
+  login: verifyBearerTokens(QUERIES.LOGIN),
 };