[Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ② 회원가입과 인증(feat. Access Token & Refresh Token)

 

카카오페이 | 마음 놓고 금융하다

 

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

🗂 목차

✅ [Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ① 초기구성
✅ [Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ② 회원가입과 인증(feat. Access Token & Refresh Token)
✅ [Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ③ Multer를 이용한 이미지 처리
✅ 

 

 

GitHub - junyharang/nestTs-jwt-multer: Nest.ts를 이용한 JWT 인증, 인가와 파일 처리 연습

 

 

 

🚀 회원가입과 인증(feat. Access Token & Refresh Token)

    🔽 소개

        📦 개요

인증, 인가 처리를 위한 일련의 작업 중 첫번째로 Passport를 이용한 인증 기능을 구현해 보려고 해요.

Passport는 인증 Middleware(미들웨어)로 다양한 인증 전략과 간단한 사용법이 장점이고, 사용자를 인증하고, 권한을 부여할 수 있는 기능을 제공하고 있어요. 또한, OAuth, OpenID 등 다양한 인증 Protocol(프로토콜)을 지원하며, 손쉽게 로그인 및 권한을 부여할 수 있도록 도와주는 Package(패키지)에요.

주니가 구현한 인증 절차는 아래와 같아요.

1️⃣ 이용자의 자격증명(ID/Password, JWT 등)을 이용 및 확인하여 인증 처리.
2️⃣ 인증 상태 관리 (JWT와 같은 휴대용 Token 발행)
3️⃣ Request 경로 처리기에서 나중에 사용할 수 있도록 인증 된 이용자에 대한 정보 첨부.

이름 및 암호 인증 구현은 이용자의 이름(ID)과 암호로 인증(로그인)을 진행할건데, 인증이 되면 Server(서버)는 인증을 증명하기 위해 다음 Request(요청)에서 Authentication Header(인증 헤더)에 전달자 Token(토큰)으로 전송할 수 있는 JWT(Json Web Token)를 발행하게 할거에요. 또한, 유효한 JWT가 포함된 요청에만 접근할 수 있는 보호 경로를 만들어보려고 해요.

 

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

 

 

 

    🔽 초기 구성

        📦 Package Download

최초 이용자 ID와 암호를 통해 인증 구현을 위한 passport-local Package(패키지) 설치를 진행해볼게요.
참고로 @types/passport-local도 설치할건데, 그 이유는 Type Script 작성에 도움을 받을 수 있기 때문이에요.

npm i @nestjs/passport passport passport-local

 

npm i @types/passport-local --save-dev

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

 

 

    🔽 회원 가입

        📦 Entity

회원가입 기능 구현을 위해 최초 entity를 만들어 볼게요.

src/api/user/model/entity/user.entity.ts

 

src/api/user/model/entity/Role.ts

이용자의 역할을 구분하기 위해 Role 이라는 Enum을 만들어 주고, 관리자와 이용자를 구분해 주었어요.
주니는 로컬 환경에서는 SQLite3 Embedded Mode와 개발 환경에서는 MariaDB를 사용할 수 있게 설정해 주었는데,
SQLite3 같은 경우 Entity에 @Column type을 enum으로 잡을 경우 인식이 되지 않기 때문에 문자열로 인식될 수 있게 varchar로 설정해 주었어요.

만약 MariaDB만을 사용한다면 type을 enum으로 잡아도 돼요.

        📦 Controller

src/api/authentication/controller/authentication.controller.ts

위와 같이 회원 가입 Method(메서드)를 만들어 주었어요.

이번에는 UserCreateRequestDto를 만들어 볼게요.

        📦 RequestDto

src/api/authentication/model/dto/request/signup-request.dto.ts

간단한 테스트 실습을 위해 위와 같이 Email 주소와 비밀번호, 이름, 나이만 받도록 만들고, toEntity()를 만들어 RequestDto를 Entity로 변환할 수 있는 메서드를 만들어 주었어요.

        📦 Service

이번엔 Business Logic을 담을 Service Logic을 구현해 보도록 할게요.
주니는 SOLID 5원칙 준수를 위해 Interface(인터페이스)와 구현체를 나누어 구현해 볼거에요.

이에 대한 상세한 개념을 공부하고 싶으시다면 이 곳에 관심을 주세요. 

[SOLID][Nest.js][Java + Spring] Interface를 활용한 결합도 분리 (Interface를 이용한 Dependency Injection - DI)

src/api/authentication/service/authentication.service.ts

 

npm i bcrypt @types/bcrypt

 

common/config/environment/.env.local.yml

 

src/api/authentication/service/authentication.service-impl.ts

위 코드를 분석해 보면 최초 15번째 줄에 이용자 회원가입 정보가 담긴 DTO 값이 Null인지를 체크해주고, Null이라면 문제 발생에 대한 응답을 보내주게 했어요.

37번째 줄에는 비밀번호 Hasing 암호화를 위해 EncryptUtil의 hashingEncrypt()를 호출하여 해싱할 구분값과 해싱 대상값을 전달해 주었어요.

src/common/util/encrypt.util.ts

728x90

이 때, division(구분)값이 password이면 9 ~ 11번째 줄이 동작하게 되는데, 좀 더 안전한 암호화를 위한 Salt 값을 만들어 주었어요.
이를 위해 common/config/environment/.env.local.yml 에 bcrypt.salt에 문자열로 Salt값을 넣어줬고, configuration().brypt.salt를 통해 해당 문자열을 불러와서 Salt 값이 bcrypt.hash()에 들어갈 수 있도록 해 주었어요.

참고로 bcrypt의 hash()의 salt 값은 정수만 들어갈 수 있기 때문에 위와 같에 parseInt()로 문자열을 정수로 바꾸도록 해 주었어요.

그리고, 10번째 줄에서 이용자가 입력한 비밀번호를 Salt값과 반죽하여 bcrypt 암호 알고리즘을 이용한 Hasing 암호화를 하여 반환해 주었어요.

그리고, 요청 DTO에 담긴 이용자가 입력한 Email 주소를 통해 데이터베이스에 해당 값이 있는지 조회하고, 있다면 이미 등록된 Email이라고 문제 발생에 대한 응답을 주게 하였어요.

45번째 줄에서 위에 모든 문제 발생 상황을 통과하였다면 데이터베이스에 저장해도 되겠다고 판단된 바 데이터 베이스에 Entity로 변환하여 저장하고, 반환된 Promise<User> 자료형 타입을 갖은 saveUserResult 변수의 값이 Null인지를 확인한 뒤 Null이 아니라면 해당 변수에 담긴 이용자 ID(고유 번호)값을 반환하여 정상 회원가입 처리가 된 것을 응답하게 해 주었어요.

 

 

 

 

        📦 Module

src/api/authentication/module/authentication.module.ts

위와 같이 인증 관련 Module(모듈)을 만들어 주었어요.

 

src/app.module.ts

그리고 app.module.ts에 25번째 줄과 같이 위에서 만든 인증 모듈을 추가해 주었어요.

 

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

 

 

    🔽 JWT를 이용한 인증 with.passport - 소개

        📦 개요

JWT에 대해 궁금하시다면 먼저 이 곳에 관심을 주세요.

[정보보안] JWT(JSON Web Token) 이란?

이번에는 JWT를 이용한 Login(로그인) 구현을 해보려고 하는데, Passport라는 Module(모듈)을 이용해서 구현해 보려고 해요.

그 이유는 해당 모듈이 JWT를 이용한 인증, 인가 처리 등의 과정을 손쉽게 구현할 수 있도록 도와주기 때문이에요.

        📦 Module 소개

● @nestjs/jwt : Nest.js에서 JWT를 이용할 수 있게 도와주는 Module.
● @nestjs/passport : Nest.js에서 Passport를 이용할 수 있게 도와주는 Module.
● Passport : Passport Module.
● passport-jwt : JWT Module.

 

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

 

 

    🔽 JWT를 이용한 인증 with.passport - 구현

        📦 초기 구성

최초 위 소개된 모듈 설치부터 진행해 볼게요.

npm install @nestjs/jwt @nestjs/passport passport passport-jwt --save

common/config/environment/.env.local.yml

이번엔 위와 같이 JWT 관련하여 secret 값을 넣어주었어요.

src/api/authentication/module/authentication.module.ts

환경 변수 값을 담은 .env.yml에 환경에 맞춘 jwt 관련 값을 가져올 수 있도록 설정해 주었어요.
14번째 줄에 defaultStrategy 문자열 값은 .env.yml에 가져올 값의 최상위 이름을 넣어주어야 해요.

common/config/environment/.env.local.yml

주니는 위와 같이 13번째 줄에 jwt를 최상위 이름으로 잡아 주었기 때문에 jwt라고 해 준것이에요.

12번째 줄 secret은 Token(토큰)을 만들 때 이용하는 비밀 값을 넣어주는 부분이에요.
평문으로 입력해도 되지만, 주니는 평문을 base 64로 Encoding한 값을 넣어주었어요.

13번째 줄 signOption은 서명을 어떻게 구현할 것인지 정의해 주는 부분이에요.
그리고, ExpireIn은 Token 만료 시간을 넣어주는 부분이에요. 주니는 7일로 설정해 주었어요.

src/api/authentication/module/authentication.module.ts

12번째 줄에 다른 내용을 추가해 주었는데, 바로 PassportModule안에 register()를 호출하여 그 안에 기본 전략 값으로 jwt라는 문자열을 전달하여 JWT를 이용한 인증 기능 구현을 할 수 있게 해 주었어요.

 

        📦 Controller

src/api/authentication/controller/authentication.controller.ts

16 ~ 19번째 줄과 같이 로그인 처리를 위한 Handler(핸들러)를 만들어 주었어요.

분석해 보면 @Body 데코레이터로 HTTP 요청 Body(본문)에서 데이터를 출하도록해 주었어요.
그런 뒤 ValidationPipe를 사용하여 SigninRequestDto 형식의 데이터를 추출하고, 유효성 검사가 진행되도록 해 주었어요.

Promise<DefaultResponse<String>>은 비동기 작업을 수행할 수 있는 것을 알 수 있고, string을 담아 반환하는 이유는 토큰을 반환해 주기 위함이에요.

 

 

 

        📦 SignInRequestDto

로그인할 때 사용할 요청 DTO를 만들어 볼게요.

src/api/authentication/model/dto/request/signin-request.dto.ts

로그인할 때, ID 형식은 Email로 받고, 비밀번호를 담기 위한 요청 DTO를 만들어 주었어요.
위에 Decorator(데코레이터)들을 Pipe를 이용한 Validation 처리를 하기 위해 작성해 주었어요.

 

 

 

        📦 Service

src/api/authentication/service/authentication.service.ts

src/api/authentication/service/authentication.service-impl.ts

위 코드를 분석해 보면 최초 클라이언트에서 들어온 요청 DTO에 Email 값을 이용해 데이터 베이스에서 해당 이용자 정보 중 Email 값과 비밀번호 값을 꺼내 findByUSerInfo 상수 변수에 담게 하였어요.

그런 뒤 48번째 줄에서 해당 값이 Null이 아닌지 확인하고, 요청으로 들어온 비밀번호를 Hashing(해싱)한 뒤 데이터 베이스에 저장된 해싱된 비밀번호 값과 같은지 확인하여 모두 참이라면 JWT Payload에 해당 이용자의 Email, 이름, 나이를 담아 
jwtService()를 이용하여 Payload를 이용하여 서명한 뒤 반환하게 해 주었어요.

이렇게 되면 클라이언트는 JWT Access Token을 발급 받을 수 있어요.

 

 

 

        📦 Guard

src/api/authentication/guard/jwt.authentication.guard.ts

위 클래스는 Nest.js에서 사용되는 Guard 클래스에요.
Guard는 요청이 Router(라우터) Handler(핸들러)에게 전달되기 전에 작동하여 특정 조건을 검사하고, 요청을 계속 진행할지 막을지 결정하는 역할을 해요.

또한, Guard는 Nest.js Application(애플리케이션)에서 인증, 권한 부여, 데이터의 유효성 검사 등 다양한 작업을 수행할 수 있어요.

이 클래스는 AuthGuard를 상속 받게 되는데, AuthGuard("jwt")를 통해 부모 객체에 문자열 jwt를 전달하여 JWT 인증을 수행하는 Guard를 생성해 주는 거에요. AuthGuard 클래스는 Nest.js에서 제공하는 기본 Guard 중 하나이고, 특정 전략을 사용하여 인증 및 권한 부여를 처리할 수 있어요. JWT 전략은 JWT를 사용하여 인증을 수행하도록 설정한 부분이에요.

결국 이 클래스는 주어진 요청에 대해 JWT 토큰의 유효성을 확인하고, 인증된 사용자를 식별하여 해당 요청을 계속 진행할지 막을지 결정하기 위한 클래스에요.

만약 토큰이 유효하다면 요청 처리는 계속 진행되고, 아니라면 해당 요청은 거부될 거에요.

Guard는 주로 라우터 핸들러의 @UseGuards() Decorator(데코레이터)를 붙혀 사용하게 된답니다.

 

 

 

        📦 strategy

src/api/authentication/jwt/strategy/jwt.strategy.ts

 

src/api/authentication/jwt/jwt.payload.ts

위 클래스는 Passport를 사용하여 JWT를 처리하는 전략을 정의한 클래스로 주로 인증 미들웨어로 사용되는 클래스에요.
이 클래스는 JWT를 추출하고, 유효성을 검사하며, 인증이 성공하면 요청으로 들어온 이용자 정보를 반환하는 역할을 하게 돼요.

참고로 validate() 매개 변수의 JwtPayload는 위와 같이 interface로 정의 해 주었고, 문자열 타입의 email 변수가 정의된 것을 알 수 있어요.

한번 자세히 분석해 볼까요?

최초 9번째 줄은 JwtStrategry 클래스가 PassportStrategy 클래스를 상속한걸 알 수 있이요. PassportStrategy는 Passport 모듈을 사용한 Strategy(전략)을 구현하기 위한 기본 클래스에요. Strategy는 Passport 전략의 기본 클래스로 사용되며, "jwt"는 이 전략의 이름을 나타내는데, 이 때, 주니는 .env.yml에 최상위 이름을 입력해 주었어요.

common/config/environment/.env.local.yml

즉, 위 코드의 13번째 줄의 이름을 입력해 둔 것이에요.

14 ~ 19번째 줄은 생성자인데, 여기서 UserService 및 ConfigService를 주입받고, super()를 호출하여 부모 클래스인 PassportStrategy의 생성자를 호출하게 되고, 이 때, JWT 전략에 필요한 설정을 제공하도록 해 준 부분이에요.

✅ jwtFromRequest: JWT를 어떻게 추출할지 정의. 15번째 줄에서는 Bearer Token을 추출하기 위해 fromAuthHeaderAsBearerToken() 사용.

✅ ignoreExpiration: 만료 기간을 무시할지 여부 정의.

✅ secretOrKey: JWT의 Secret Key(비밀키) 제공. 17번째 줄에서는 configService를 사용하여 해당 설정에서 비밀키를 가져오도록 정의.

21 ~ 24번째 줄 validate()는 Passport 전략에서 구현해야 하는 메서드 validate 메서드에요.
이 메서드는 JWT Access Token의 유효성을 검사하고, 유요한 경우 해당 요청 이용자의 정보를 반환하는 역할을 해요.

✅ jwtPayload: JWT에서 추출한 Payload(Clam 정보)
✅ done: Passport에서 제공하는 Call back(콜백) 함수로 인증 성공 시 해당 요청 이용자 정보 전달.

validate()는 요청으로 들어온 Email 주소를 이용하여 UserService를 통해 해당 이용자 정보를 찾게 되고, 이용자 정보가 없으면 UnauthorizedException을 throw(던지다)하여 인증 실패를 처리하고, 응답해 주게 돼요. 만약 인증 성공 시 이용자 정보를 done()을 통해 전달하게 해 준답니다.

 

💡 참고 사항
ConfigService란?

ConfigService는 Nest.js에서 환경 설정 정보를 관리하는 Service.
주로 .env File이나, 환경 변수를 사용하여 설정된 값들을 읽어오고, Application 안에서 사용할 수 있는 기능 제공.

일반적으로 ConfigService를 사용하여 설정 값을 다루기 위해 @nestjs/config Module을 설치하고, 설정 필요.
참고 자료: https://junyharang.tistory.com/537   

ConfigService를 사용하면 중복되는 설정 값을 효율적으로 관리할 수 있으며, 환경 변수나 .env File을 사용하여 다양한 환경에서 동작하도록 설정을 변경할 수 있다.

이 Service는 Application에서 사용하는 설정 정보를 하나의 곳에서 통합적으로 관리할 수 있도록 도와주는 기능 제공.

 

 

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

 

 

    🔽 JWT를 이용한 인증 - Refresh Token

위에서 진행한 인증 기능은 JWT의 Access Token만 발급할 수 있도록 처리된 기능이에요.

JWT의 Access Token과 Refresh Token 이야기는 이 곳에 관심을 주세요.

[정보보안] JWT(JSON Web Token) 이란?

이번엔 이용자가 정상 인증을 완료하면 Access Token과 Refresh Token이 같이 발급되도록 구현해 볼게요.

        📦 Controller

src/api/authentication/controller/authentication.controller.ts

 

 

 

 

        📦 AuthenticationService

src/api/authentication/service/authentication.service-impl.ts

위에 코드에서 변경된 부분에 대해서 이야기 해 볼게요.

최초 20, 21, 25, 26번째 줄 내용이 추가 되었어요.
20번째 줄은 .env 파일의 가져올 값들의 최상위 이름을 정의해 주었어요.

💡 참고 사항
JwtConfig란?
JwtConfig는 JWT 설정을 담고 있는 객체.

// jwt.config.ts

export interface JwtConfig {
  accessTokenSecret: string;
  accessTokenExpireIn: number;
  refreshTokenSecret: string;
  refreshTokenExpireIn: number;
  saltOrRounds: number;
}

export default (): JwtConfig => ({
  accessTokenSecret: process.env.JWT_ACCESS_TOKEN_SECRET,
  accessTokenExpireIn: parseInt(process.env.JWT_ACCESS_TOKEN_EXPIRE_IN, 10),
  refreshTokenSecret: process.env.JWT_REFRESH_TOKEN_SECRET,
  refreshTokenExpireIn: parseInt(process.env.JWT_REFRESH_TOKEN_EXPIRE_IN, 10),
  saltOrRounds: parseInt(process.env.JWT_SALT_OR_ROUNDS, 10),
});

✅ JwtConfig는 Interface이며, Access Token 및 Refresh Token에 대한 비밀 키, 만료 기간, 암호화 강도 등의 정보를 보관.

✅ export default () => ({ ... }): 설정 객체를 반환하는 함수를 반환. 이는 Nest.js의 ConfigModule에서 사용되는 설정 Loading을 위해 필요한 구조.

✅ process.env를 이용한 환경 변수 읽기: process.env를 이용하여 환경 변수에서 JWT 설정 값 읽음.

✅ partInt를 이용한 숫자 형변환: 환경 변수에서 읽은 값들은 기본적으로 문자열이기 때문에 숫자로 형변환이 필요한 부분에 대해 사용.

JwtConfig는 Applicaion에서 JWT를 사용할 때 필요한 여러 설정들을 관리하며, ConfigModule을 통해 환경 변수로부터 해당 설정 Load.

이를 통해 Application 동작을 동적으로 조정.

JwtService란?

JwtService는 Nest.js에서 제공하는 JWT 관련 기능 담당 Service.
주로 이용자 혹은 사용자 인증 및 권한 부여에 사용되며, JWT 생성, 검증 등의 작업 수행.
여러 설정 Option을 제공하며, JWT의 동작 조정 가능.

20번째 내용은 .env 파일의 JWT 관련 설정 내용을 읽어 드리기 위한 내용으로 최상위 이름을 get()에 전달해줌으로 해당 내용의 모든 설정값을 가져오도록 해 준 부분이에요.

21번째 내용은 20번째에서 받아온 설정값 중 SaltOrRouds라는 값을 가져와 상수형 변수에 담아준 부분이에요.

23 ~ 27번째 줄은 생성자로 해당 서비스 로직에서 사용할 객체를 주입하기 위해 명시해 주었고, 추가된 객체는 ConfigService와 JwtService 객체에요.

src/api/authentication/service/authentication.service-impl.ts

이제 signIn()에 대해 추가된 부분에 대해 분석해 볼게요.

59번째 줄에서 로그인 요청 이용자의 정보가 참이라면 Access Token을 만들기 위해 62 ~ 65번째 줄을 작성해 주었고, Refresh Token을 만들기 위해 67 ~ 70번째 줄을 작성해 주었어요.

이 때, 각각 JWT 서명을 하는데, 데이터 베이스에 저장된 이용자 Email 주소로 만든 JwtPayload 객체와 Access Token, Refresh Token 비밀 키 그리고, 유효 기간을 객체로 넣어 서명을 한 것을 accessToken, refreshToken 상수 변수에 담아 주었어요.

그런 뒤 72번째 줄에서 해당 값을 해싱하여 User Entity에 setRefreshToken()을 호출하여 refreshToken 값을 변경해 주고, 데이터 베이스 수정을 위해 71번째 줄과 같이 입력해 주었어요.

그리고 73번째 줄에는 Refresh Token 만료 일시를 처리할 로직을 구현해 주었어요.

또한, 74 ~ 80번째 줄에 Refresh Token과 Refresh Token 만료 일시를 데이터베이스에 저장하고, 처리하기 위한 로직을 구현해 주었어요.

src/api/authentication/service/authentication.service-impl.ts

위 내용은 해당 메서드가 호출된 시각에서 jwt.refreshTokenExpireIn 설정에 정의한 시간을 더한 값을 반환하는 메서드에요. 즉, Refresh Token의 만료 날짜를 계산하기 위한 private 메서드에요.

154번째 줄에서 현재 시각을 가져올 Date 객체를 생성해 주었어요.

그런뒤 156번째 줄에서 .env.yml에서 가져온 jwt.refreshTokenExpireIn에 대한 값을 문자열로 가져오게 한 뒤 parstInt()를 이용해 정수로 형 변환해 주었어요. currnetDate.getTime()을 이용하여 현재 날짜의 Timestamp(타임 스탬프)를 반환하게 해 주고, 이 값을 가져온 Refresh Token 만료 기간(밀리초 단위)와 더하여 새로운 Date 객체를 생성하도록 해 주었어요.

그런 뒤 계산된 Refresh Token 만료 일시를 반환하게 해 준 것이에요.

src/api/authentication/service/authentication.service-impl.ts

75, 77번째 줄은 이용자가 성공적으로 로그인한 경우 클라이언트에게 전송되는 JWT Token과 관련된 응답을 내려주기 위한 부분이에요.

75번째 줄은 HTTP Reponse Header에 Authorization이라는 Key값으로 JWT 전송을 위하여 만든 것인데, 이 때, Bearer scheme(스킴)을 사용하게 되고, Access Token과 Refresh Token을 배열로 만들어 ,(쉼표)를 기준으로 문자열로 합친 뒤 접두사(Prefix)에 Bearer 이라는 문자열과 함께 Value로 전달되도록 해 준 부분이에요.

77번째 줄은 HTTP Response Cookie를 설정하는 부분으로 cookieService의 setRefreshToken()을 호출하여 처리하여 주었어요.

위 73 ~ 75번째 설정을 통해 클라이언트 측에서 Authorization Header나, Cookie를 통해 토큰을 받을 수 있도록 해 주었어요. 이렇게 전달 받은 토큰은 클라이언트가 다음 요청을 보낼 때 사용되어 질 것이고, 서버는 이를 통해 이용자에 대한 인증을 시도하게 될 거에요. JWT의 경우 Authorization Header에 토큰을 넣는 것이 일반적이지만, Cookie를 사용하는 경우도 많이 있어요.

주니는 연습을 위해 둘 다 사용해 보았어요.

이렇게 한 뒤 79번째 줄을 통해 Access Token을 생성하고, Refresh Token을 담아 응답하도록 처리해 주었어요.

 

src/common/util/encrypt.util.ts

 

회원 가입 때 비밀번호 해싱화를 위해 사용한 내용에 대해 이야기 했었는데, 이번에는 Refresh Token 해싱화에 대해 이야기 해볼게요. 최초 구분값이 token이면 매개 변수로 전달된 Refresh Token과 Salt 값을 반죽하여 해싱하고, 그 결과를 반환해 줄거에요.

 

 

 

        📦 CookieService

src/api/common/cookie/service/cookie.service-impl.ts

위 코드는 Cookie 관련 처리를 위해 만든 비즈니스 로직이에요.

최초 8번째 줄은 configService를 통해 설정 파일에서 가져온 cookie.domain 값을 DOMAIN 이라는 상수 변수에 넣게 해 주었어요.
이렇게 해 줌으로써 클래스의 생성자에서 초기화 되어 클래스 내에서 this.DOMAIN으로 접근 가능한 상태로 되었어요.

10번째 줄은 생성자인데, ConfigService를 주입 받아 인스턴스 변수 configService에 할당해주기 위해 명시해 주었어요.

12 ~ 18번째 setRefreshToken()은 HTTP Response Cookie에 Refresh Token을 담기 위한 메서드에요.
해당 메서드는 두 개의 매개 변수를 받게 되는데, 첫번째는 HTTP Response 객체이고, 두번째는 Refresh Token 값이에요.

13번째 줄에 이 작업을 위해 response.cookie()를 호출하여 Cookie를 설정할 수 있도록 해 주는 부분이에요. 이 때, 매개 변수로 Cookie 이름 ("refreshToken") 과 Cookie Value (refreshToken - Refresh Token 값)을 담아주고, Cookie Option을 설정해 주었어요.

14번째 줄 httpOnly를 ture로 해 준 부분은 JavaScript로 Cookie 접근을 막기 위해 설정한 부분이며, 이렇게 해야 클라이언트 쪽에서 JavaScript를 이용하여 Cookie에 접근해서 악의적인 행위를 하는 것을 막을 수 있기 때문에 반드시 해 주어야 해요.

16번째 줄은 Cookie의 유효기간을 설정하는 부분으로 주니는 7일로 설정해 주었어요.

17번째 줄은 설정에서 가져온 도메인 값을 사용하여 Cookie의 도메인 설정을 해 주는 부분이에요.

 

 

 

        📦 AuthenticationModule

src/api/authentication/module/authentication.module.ts

그리고, 위와 같이 CookieService에 대해 48 ~ 52번째 줄까지 Authentication Module에 등록해 주었어요.

 

 

Postman

 

Postman

위와 같이 HTTP Response Cookie 설정을 위한 부분이에요.

 

 

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

 

 

 

    🔽 JWT를 이용한 인증 - Access Token 재 발급

이번에는 Access Token을 재 발급 받을 수 있는 기능을 만들어 보려고 해요.
일반적으로 Access Token은 유효기간을 짧게 잡고, Refresh Token은 보다 길게 잡아 이용해요.

이유는 여러가지가 있지만, 이용자가 지속적으로 Login 해야 하는 불편함을 줄이기 위함이에요.

        📦 Controller

src/api/authentication/controller/authentication.controller.ts

최초 라우터 핸들러를 위와 같이 만들어 주었어요.
이 핸들러는 매개 변수로 클라이언트에서 전송된 UserTokenRequestDto를 받고, 응답값으로 Refresh Token을 반환해 줄거에요.

핸들러가 호출 되기 전 Guard가 동작하여 Refresh Token 검증을 진행하는데, 그 부분에 대해서는 아래에서 이야기 해 볼게요.

 

 

 

 

        📦 UserService

src/api/authentication/service/authentication.service-impl.ts

비즈니스 로직은 위와 같이 만들어 주었어요.
최초 84번째 줄에서 클라이언트에서 전달한 RequestDto가 Null인지를 확인하고, Null이 아니라면 이용자의 Email 주소를 Parsing(파싱)하여 JwtPayload 객체화를 하여 payload 상수 변수를 만들어 주었어요.

그런 뒤 응답값으로 해당 payload와 Access Token 비밀키 그리고, 유효 기간을 이용하여 서명을 한 뒤 Access Token을 만들어 반환해 주는 로직이에요.

 

 

 

 

        📦 RequestDto

src/api/authentication/model/dto/request/user-token-request.dto.ts

Access Token을 재 발급 받기 위해서는 위와 같이 email, 이용자 이름, 이용자 나이, 해당 계정의 역할을 보내줘야 해요.

주니는 Custom(커스텀) Decorator(데코레이터)를 만들어 주었어요.
이 부분은 11 ~ 15번째 줄 내용인데, 이 데코레이터는 HTTP Request에서 이용자 정보를 추출하여 반환하는 역할로 만들어 준 것이에요.

최초 11번째 줄을 분석해 볼게요.
여기서 createParamDecorator() 함수를 사용하여 커스텀 데코레이터를 만들어 주었는데, 이 함수는 Nest.js에서 제공하는 함수로 개발자가 정의한 데코레이터를 만들고자 할 때, 사용해요.

매개 변수 부분은 생성된 데코레이터의 로직이 들어가는 익명 함수를 정의하는 부분으로 이 함수는 데코레이터가 적용된 곳에서 실행하겠다는 의미를 갖고 잇어요. 매개 변수 ExecutionContext 객체는 실행 Context(컨텍스트)를 나타내는 매개 변수에요.

12번째 줄은 HTTP Request 값을 가져와서 request란 상수 변수에 값을 담아 주기 위한 부분이에요.
이 때, switchToHttp()는 실행 컨텍스트를 HTTP 컨텍스트로 전환하는 메서드이고, getRequest()는 HTTP Request 객체를 반환하는 메서드에요.

14번째 줄은 HTTP Request 객체에서 user를 추출하는데, 이 속성은 이용자 인증 후에 저장된 이용자 정보를 나타내요. 
추출한 user 객체를 UserReissueAccessTokenRequestDto Type으로 Casting(캐스팅 - 형 변환)하여 반환하는 데코레이터를 만든 부분이에요.

이렇게 생성된 데코레이터는 주로 Nest.js Controller(컨트롤러) 메서드의 Parameter(파라미터)로 사용되고, 해당 메서드가 실행 되었을 때, 이용자 정보에 보다 쉽게 접근할 수 있도록 하기 위해 만든 데코레이터에요.
이용자 정보는 주로 인증된 이용자의 정보를 담고 있고, 이를 통해 특정 작업이나, 권한 확인 등을 수행할 수도 있어요.

 

 

 

        📦 strategy

src/api/authentication/jwt/strategy/jwt.refresh-access-token.strategy.ts

이 코드는 Passport를 이용하여 JWT Refresh Token 전략을 구현한 클래스에요.

최초 11번째 줄을 분석해 볼게요.
여기서 PassportStrategy를 상속 받는데, 이를 통해 정의된 JWT Refresh Token 전략을 사용하기 위함이에요.
또한, jwt-refresh-token이라고 명명한 부분은 전략의 이름으로 사용되고, Passport에서 전략 등록 시 사용되게 하기 위한 문자열이에요.

12 ~ 16번째 줄 생성자 부분에서 13 ~ 14번째 줄은 UserService와 AuthenticationService를 주입하기 위한 부분이고, 주니는 SOLID 5원칙 준수를 위해 인터페이스와 구현체를 나눴기 때문에 위와 같이 정의해 준 것이에요.

15번째 줄은 설정 정보를 가져오기 위한 ConfigService를 정의해 준 부분이에요.

19 ~24번째 줄은 부모 클래스의 생성자를 호출하며, PassportStrategy의 생성자에 필요한 Option을 전달하기 위한 부분이에요.

20번째 줄은 JWT를 추출하기 위한 함수를 지정해 준 부분인데, 주니는 HTTP Request의 Cookie에서 refreshToken 값을 추출하기 위해 작성해 주었어요.

21번째 줄은 말료 여부를 무시할지 여부를 정의하는 부분으로 주니는 false로 설정했기 때문에 만료 여부를 확인하게 해 주었어요.

common/config/environment/.env.local.yml

22번째 줄은 JWT 검증 시 사용할 비밀키를 설정하는 부분이에요. 주니는 설정 파일에서 가져온 .env.yml에 명시한jwt.refreshTokenSecret 이라는 값을 사용하도록 해 주었어요.

23번째 줄은 콜백 함수에 HTTP Request 객체 전달 여부를 정의하는 부분으로 주니는 ture로 설정하여 콜백 함수에 HTTP Request 객체가 전달되도록 해 주었어요.

src/api/authentication/jwt/strategy/jwt.refresh-access-token.strategy.ts

validate()는 Passport 전략의 validate()를 구현한 메서드로 이 메서드는 Passport가 JWT 검증 시, 호출되는 메서드에요.
매개 변수로 전달 받는 Request는 HTTP Request 객체로 28번째 줄에서 해당 객체에 들어 있는 Cookie에 Refresh Token을 추출하기 위한 용도로 사용되고 있어요.

JwtPayload는 JWT의 복호화된 Payload 객체에요.

done()은 Passport에게 검증 결과를 알려주기 위한 콜백 함수에요.

30번째 줄을 통해 복호화된 JWT Payload 객체 안에 담긴 이용자 Email 주소를 이용하여 해당 이용자가 실제 데이터 베이스에 존재하는지 확인하고, 32번째 줄에서 해당 이용자가 존재하는지를 확인하는 절차를 거치고, 존재한다면 36번째 줄을 통해 Refresh Token의 유효성을 검사하도록 구성해 주었어요.

유효성 검사가 정상적으로 끝나면 37번째 줄의 done()을 호출하여 Passport에게 이용자 정보를 전달해 주게 해 주었어요.

이렇게 하여 Passport를 사용하여 JWT Refresh Token 전략을 구현하고, 이용자의 JWT Refresh Token 검증을 하고, 유효한 경우 이용자 정보를 Passport에게 전달하는 클래스를 만들어 준 것이에요.

이러한 전략은 주로 이용자의 Session(세션)을 유지하고, 토큰을 이용하여 이용자 인증 처리를 하기 위해 사용해요.

 

 

 

 

        📦 AuthenticationService

src/api/authentication/service/authentication.service-impl.ts

위 코드는 매개 변수로 전달된 이용자 정보와 Refresh Token이 유효한지 검증하기 위한 메서드에요.

최초 102번째 줄에서 bcrypt.compare()를 호출하여 매개 변수로 전달된 Refresh Token과 데이터 베이스에 저장된 해당 이용자의 Refresh Token 값이 해싱하여 같은지를 확인해 주는 부분이에요.

만약 같지 않다면 compare()는 false를 반환할 건데, 이를 통해 토큰이 유효하지 않다는 응답을 전달하게 될 것이고, if 문에 NOT(!)가 있기 때문에 false일 경우 참이 되어 103번째 줄에 내용이 동작하게 되는 것이에요.

해당 메서드의 반환 타입은 Promise<void>로 반환값이 없다는 걸 알 수 있어요.

이 메서드를 통해 이용자의 Refresh Token이 유효한지 검증하게 되는데, bcrypt.compare()를 통해 암호화된 형태로 저장된 Refresh Token과 전달 받은 Refresh Token이 같은지 비교하고, 일치하지 않으면 예외를 던지는 방식으로 유효성 검사를 하도록 해 주었어요.

 

        📦 AuthenticationModule

import { Module } from "@nestjs/common";
import { TypeOrmModule } from "@nestjs/typeorm";
import { User } from "../../user/model/entity/user.entity";
import { AuthenticationController } from "../controller/authentication.controller";
import { AuthenticationServiceImpl } from "../service/authentication.service-impl";
import { JwtModule } from "@nestjs/jwt";
import configuration from "../../../../common/config/environment/configuration";
import { PassportModule } from "@nestjs/passport";
import { JwtStrategy } from "../jwt/strategy/jwt.strategy";
import { UserServiceImpl } from "../../user/service/user.service-impl";
import { ConfigModule, ConfigService } from "@nestjs/config";
import { JwtConfig } from "../../../../common/config/jwt.config";
import { CookieServiceImpl } from "../../common/cookie/service/cookie.service-impl";
import { JwtRefreshAccessTokenStrategy } from "../jwt/strategy/jwt.refresh-access-token.strategy";

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
      load: [configuration],
    }),
    TypeOrmModule.forFeature([User]),
    // UserModule,
    JwtModule.registerAsync({
      useFactory: (configService: ConfigService) => {
        const jwt = configService.get<JwtConfig>("jwt");

        return {
          secret: jwt.accessTokenSecret,
          signOptions: { expiresIn: jwt.accessTokenExpireIn },
        };
      },
      inject: [ConfigService],
    }),
    PassportModule.register({ defaultStrategy: "jwt" }),
  ],
  controllers: [AuthenticationController],
  providers: [
    AuthenticationServiceImpl,
    {
      provide: "AuthenticationService",
      useClass: AuthenticationServiceImpl,
    },
    UserServiceImpl,
    {
      provide: "UserService",
      useClass: UserServiceImpl,
    },
    CookieServiceImpl,
    {
      provide: "CookieService",
      useClass: CookieServiceImpl,
    },
    JwtStrategy,
    JwtRefreshAccessTokenStrategy,
  ],
  exports: [
    AuthenticationServiceImpl,
    {
      provide: "AuthenticationService",
      useClass: AuthenticationServiceImpl,
    },
  ],
})
export class AuthenticationModule {}

src/api/authentication/module/authentication.module.ts

이제 모듈에는 JwtRefreshAccessTokenStrategy 클래스까지 등록 시켜 주면 돼요.

 

 

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

 

 

 

    🔽 JWT를 이용한 인증 - 프로필 확인

        📦 Controller

src/api/user/controller/user.controller.ts

위와 같이 이용자가 자신의 프로필을 확인할 수 있는 기능을 구현해 보려고 해요.

URL Parameter로 이용자의 ID를 전달 받을 거고, JWT를 받아 검증한 뒤 해당 로직이 진행될 거에요.

 

 

 

        📦 Service

src/api/user/service/user.service-impl.ts

이렇게 ID를 데이터 베이스에서 찾아 해당 계정의 정보를 보여주는 기능이에요.

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

 

 

🔽JWT를 이용한 인증 - Logout

이번엔 Logout 기능에 대해 만들어 보려고 해요.
사실 JWT의 개념에서 Logout은 없어요.

왜냐하면 토큰이 살아있다면 계속 인증을 할 수 있기 때문이에요.

그렇다면 어떻게 Logout 기능을 구현할 수 있을까요?

주니는 HTTP Request Header와 HTTP Request Cookie에 토큰을 담아 보낼 수 있도록 구현해 보았었어요.
그렇다면 Hader와 Cookie에 토큰을 없애 버리는 전략을 취한다면 Logout 기능을 구현할 수 있지 않을까요?

바로 구현해 볼게요!

        📦 Controller

src/api/authentication/controller/authentication.controller.ts

위 라우터 핸들러는 분석해 보면 최초 핸들러가 호출 되기 전에 JwtAuthenticationGuard가 호출되어 이용자의 JWT Access Token 검증이 이뤄지게 돼요.

Access Token이 정상이라면 해당 핸들러가 동작하게 되는데, 이 핸들러는 UserTokenRequestDto와 Response를 매개 변수로 받고 있어요.

그런 뒤 응답값은 정상 처리인지 아닌지에 대한 HTTP Response 객체를 반환해 주도록 처리해 주었어요.

        📦 AuthenticationService

src/api/authentication/service/authentication.service-impl.ts

비즈니스 로직에서 최초 121번째 줄에 매개 변수로 전달된 이용자의 Email 주소로 데이터 베이스에서 이용자 정보를 조회하고, 123 ~ 125번째 줄을 통해 해당 이용자 정보가 존재하는지 검증하고 있어요.

이용자 정보가 존재하면 127 ~ 128번째 줄을 통해 Entity의 Refresh Token과 Refresh Token 유효 기간을 초기화 해 주었어요.

그리고, 데이터 베이스에도 초기화된 값을 넣어주기 위해 144 ~ 150번째 줄 로직을 작성해 주었어요.

그런 뒤 152번째 줄을 통해 HTTP Response Cookie에 Refresh Token을 무력화 시키기 위한 로직을 따로 구현해 주었어요.

그렇게 해서 Refresh Token이 무력화 되면 로그 아웃이 처리된 것이기 때문에 132번째 줄과 같이 응답해 주도록 해 주었어요.

        📦 CookieService

src/api/common/cookie/service/cookie.service-impl.ts

위 메서드가 호출되면 매개 변수로 들어온 HTTP Response 객체에 담긴 Cookie에 refreshToken이라는 이름의 Cookie를 지우고, 26번째 줄을 통해 HTTP Response Header의 Authorization 이름의 값을 지우도록 해 주었어요.

 

 

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

 

 

 

    🔽 잘 만들었나? 🤔

        📦 Swagger 수정

이제 Logic(로직)을 어느정도 구현했으니 잘 구현했는지 확인해 보려고 해요.

그 전에 현재 주니가 구성한 Swagger(스웨거)는 요청 헤더값을 넣을수가 없어요.

http://localhost:8181/swagger-ui/index.html#/default/AuthenticationController_signUp

요청 헤더값을 넣을 수 있도록 수정 해보도록 할게요.

common/config/document/swagger.config.ts

 

11번째에서 19번째 줄과 같이 추가해 주면 JWT를 넣을 수 있는 공간을 만들 수 있어요.

 

http://localhost:8181/swagger-ui/index.html#/default/AuthenticationController_signUp

 

http://localhost:8181/swagger-ui/index.html#/default/AuthenticationController_signUp

위와 같이 Authorize 버튼을 누르면 JWT Token을 입력할 수 있는 모달창을 만날 수 있는 걸 확인할 수 있어요.

 

 

 

        📦 회원 가입

스웨거를 이용하여 회원 가입이 정상적으로 되는지 확인해 볼게요.

http://localhost:8181/swagger-ui/index.html#/default/AuthenticationController_signUp

위와 같이 정상적으로 가입 된 걸 확인할 수 있어요.

Embedded SQLite

데이터베이스에도 값이 잘 들어간걸 확인할 수 있어요.

http://localhost:8181/swagger-ui/index.html#/default/AuthenticationController_signUp

동일한 Email 주소로 가입 시도를 하면 이미 등록 되었다고 나오는 것도 확인할 수 있어요.

http://localhost:8181/swagger-ui/index.html#/default/AuthenticationController_signUp

유효성 검사도 잘 진행되는걸 알 수 있어요.

 

        📦 로그인

회원 가입이 되었으니 로그인을 진행하고, JWT Token이 반환되는지 확인해 볼게요.

http://localhost:8181/swagger-ui/index.html#/default/AuthenticationController_signIn

위와 같이 정상적으로 로그인 처리가 되고, Access Token과 Refresh Token까지 발급 되는걸 확인할 수 있어요.

http://localhost:8181/swagger-ui/index.html#/default/AuthenticationController_signIn

 

Postman

그리고 위와 같이 HTTP Response Header에 authorization이라는 이름으로 Bearer 문자열과 ,를 기준으로 Access Token과 Refresh Token이 전달 된 걸 확인할 수 있어요.

postman

그리고 위와 같이 HTTP Response Cookie에 Access Token과 Refresh Token이 담겨 온 걸 확인할 수 있어요.

 

 

 

        📦 Refresh Token

Access Token이 만료 되었을 경우 Refresh Token으로 Access Token을 잘 발급 받는지 확인해 보려고 해요.

Postman

반응형

최초 만료 기한이 지나버린 Access Token을 이용하여 회원 정보를 조회하려고 할 때, 위와 같이 접근할 수 없는 것을 알 수 있어요.

Postman

이 때, 위와 같이 API를 호출해주면 HTTP Request Cookie에 담긴 refreshToken 값을 통해 Refresh Token을 검증하고, 정상 Refresh Token이면 위와 같이 Access Token을 다시 발급 받는 걸 알 수 있어요.

 

 

 

 

 

        📦 프로필 조회

위와 같이 Token과 이용자의 ID를 URL Parameter로 전달하여 요청을 보내니
정상적으로 이용자 정보를 받아오는 걸 확인할 수 있어요.

 

 

 

        📦 로그 아웃

Postman

위와 같이 Access Token을 HTTP Request Header의 Authrozation에 Bearer Token으로 넣어주면 정상적으로 로그아웃이 되는걸 확인할 수 있어요.

Login 시 HTTP Response Cookies 정보

 

Login 시 HTTP Response Headers 정보

Logout 시&nbsp;HTTP Response Cookies 정보

 

Logout 시&nbsp;HTTP Response Headers 정보

다음 글에선 Nest.js Multer를 이용한 Image 저장에 대해 실습해 보도록 할게요!

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

GitHub - junyharang/nestTs-jwt-multer: Nest.ts를 이용한 JWT 인증, 인가와 파일 처리 연습

 

 

 

🧐 참고 자료

Documentation | NestJS - A progressive Node.js framework

 

 

request dto의 메서드 동작 오류

 

 

카카오페이 | 마음 놓고 금융하다