서론

저번 시간에 로그인 서비스를 만들기 위해서 MVC 패턴에 맞춰서 Controller, Service 코드를 생성해서 의존성 주입과 실행 테스트까지 했다. 그래서 우리는 jwt 를 이용한 로그인 방식을 구현할 예정이기 때문에 그에 맞는 설정을 이번 포스팅에서 다뤄볼 예정이다.

그럼 passport 와 jwt 를 이용해서 로그인 인증에 필요한 코드들을 구현해보도록 하자.

사전 준비로 Controller, Service 코드는 생성되었다고 가정하고 진행하니 이전 포스팅을 참고해서 코드 생성까지만 하고 오시면 편하게 보실 수 있을 것 같습니다.

본론

저번 시간에 passport 모듈에 대해서는 설치를 했었으나, 다시 처음부터 짚고 넘어가도록 하겠습니다. (만약 이전 포스팅에서 설치를 하셨으면 하지 않아도 됩니다!)

📍 Passport, JWT 패키지 다운로드

node 환경에서 많이 사용하는 인증 미들웨어인 passport 와 jwt 를 이용하기 위해서는 패키지를 설치해주어야 하는데 터미널에서 프로젝트 루트 디렉토리로 진입하고 다음 명령어를 입력해준다.

$ npm install --save @nestjs/passport passport passport-local
$ npm install --save-dev @types/passport-local

$ npm install --save @nestjs/jwt passport-jwt
$ npm install --save-dev @types/passport-jwt

그 다음에 passport 와 jwt 설정을 하기 위한 코드를 작성해보도록 하겠다.

📍 JWT 설정

먼저, jwt 를 사용하기 위해서 guard, payload, strategy 3가지를 설정해주어야 한다. 따라서 auth 폴더 밑에 jwt 폴더를 생성하고 3가지에 대한 코드를 생성해준다.

• jwt.guard.ts
• jwt.payload.ts
• jwt.strategy.ts

생성이 완료되었으면 하나씩 작성하면서 어떤 기능인지 알아가보도록 하자.

1️⃣ jwt.guard.ts 코드

코드를 작성하기전에 우선 guard 에 대해서 짚어볼 필요가 있을 것 같다. nest 공식문서 중 FAQ 파트에 Request lifecycle 이라는 파트가 있다. 해당 파트에 따르면 요청시 코드 흐름은 다음과 같다.

4, 5, 6번을 보면 Guard 라는 부분이 있는데, 우리가 현재 작성하려고 하는 Guard 와 같은 친구이다. 따라서 Guard 를 통과해야지 본격적으로 요청의 처리가 시작되는 컨트롤러에 도달 할 수 있게 된다.

그러면 Guard 란 무엇인가? 단일 책임으로 런타임에 존재하는 특정 조건 (권한, 역할 등)에 따라서 지정된 요청을 라우터 핸들러에 의해 처리할지 여부를 결정한다.

• 단일책임 : 한 클래스는 하나의 책임을 가지는 것으로 객체지향 5원칙의 SRP에 해당
  (여기서 단일책임은 요청을 승인할지 말지 하나만 가지는 클래스라는 의미이다.)

하지만 Guard 보다 먼저 실행 순서를 가지는 미들웨어에서 해주면 되는데 굳이 왜 Guard 를 또 만들었을까? 라고 의문을 가질 수 있을 것 같다. 이런 의문을 공식문서에서 아주 말끔하게 해결해주었는데 이유는 다음과 같다.

• 미들웨어는 본질적으로 멍청해서, next() 함수를 호출한 후 어떤 핸들러가 실행되는지 알 수 없다. (반대로 가드는 다음에 실행될 작업을 명확하게 알고 있다. 따라서 정확한 지점에서 처리 로직을 넣을 수 있고, 수행할 수 있도록 한다.)
• 원문은 해당 링크를 참고해주세요.

또한 Guard 는 글로벌, 컨트롤러, 라우트로 나뉘는데 이는 Guard 를 개발자가 어디에 설정하느냐에 따라서 글로벌로 작동하기도 하고, 컨트롤러에서만 작동하기도 하게 된다.

이제 Guard 에 대해서 간략하게 알아보았으니 코드를 작성해보도록 하자. 코드의 내용은 다음과 같다.

import { Injectable } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Injectable()
export class JwtAuthGuard extends AuthGuard('jwt') {}

• AuthGuard: Guard 의 전략을 실행시켜주는 함수가 내장된 라이브러리로 Guard 가 실행될 때 jwt.strategy.ts 코드를 실행시켜서 Guard 에 필요한 로직이 실행될 수 있도록 도와준다. (이때 전략은 jwt 방식을 이용해서 요청으로부터 Guard 를 한다.)

2️⃣ jwt.strategy.ts 코드

jwt.strategy.ts 코드는 Guard 의 전략을 담은 코드로 Strategy 내부의 validate 함수가 실행되면서 인증 절차를 거치게 된다.

코드는 다음과 같이 작성할 수 있다.

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import { Payload } from './jwt.payload';	// 다음에서 곧장 생성할 예정

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      // 헤더 Authentication 에서 Bearer 토큰으로부터 jwt를 추출하겠다는 의미
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      secretOrKey: 'secret',	// jwt 생성시 비밀키로 사용할 텍스트 (노출 X)
      ignoreExpiration: false,  // jwt 만료를 무시할 것인지 (기본값: false)
    });
  }

  async validate(payload: Payload) {
    const user = payload.sub === '0'

    if (user) {
      return user; // request.user에 해당 내용을 넣어준다 (Passport 라이브러리가 해줌)
    } else {
      throw new UnauthorizedException('접근 오류');
    }
  }
}

우선은 이렇게 적고 넘어갈 수 있도록 하자.

3️⃣ jwt.payload.ts 코드

payload 는 jwt 에서 사용자가 원하는 정보를 넣는 부분으로 타입을 정의하는 코드이다. 따라서 사용자가 보안에 위협이 가지 않는 선에서 원하는 정보를 넣어서 사용하면 되는데 우선은 아래와 같이 작성해서 사용해보도록 하자.

export type Payload = {
  email: string;
  sub: string;
};

여기까지 완료했으면 로그인 후 인증에 대해서 사용할 수 있는 코드들은 마무리가 되었다.
마지막으로 로그인 했을 때 jwt 토큰을 만들고, 해당 토큰으로 인증이 되는지 한 번 확인해보도록 하자.

📍 로그인 할 때 JWT 생성하기

이제 드디어 저번 시간에 만들었던 로그인 컨트롤러, 서비스를 사용할 때가 왔다.
먼저 로그인 컨트롤러를 켜고 다음과 같이 코딩을 해보도록 하자.

import { Controller, Post, Req } from '@nestjs/common';
import { LoginService } from './login.service';
import { Request } from 'express';

@Controller('login')
export class LoginController {
  constructor(private readonly loginService: LoginService) {}

  @Post()
  login(@Req() request: Request) {
    const { email, password } = request.body;
    return this.loginService.login(email, password);
  }
}

그리고 로그인 서비스 코드에서는 다음과 같이 작성할 수 있도록 한다.

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class LoginService {
  constructor(private jwtService: JwtService) {}

  login(email: string, password: string) {
    if (email === 'test@test.com' && password === 'test') {
      const payload = { email: email, sub: '0' };
      return this.jwtService.sign(payload);
    }
    throw new UnauthorizedException('인증되지 않은 사용자입니다.');
  }
}

그리고 지금 우리가 Passport, jwt 기능을 로그인 컨트롤러, 서비스에서 이용해주기 위해서는 의존성 주입이 되어야 하는데 이는 로그인 모듈 코드에서 명시해주면 된다. 코드는 다음과 같다.

import { Module } from '@nestjs/common';
import { LoginController } from './login.controller';
import { LoginService } from './login.service';
import { PassportModule } from '@nestjs/passport';
import { JwtModule } from '@nestjs/jwt';
import { JwtStrategy } from '../jwt/jwt.strategy';

@Module({
  imports: [
    // session을 사용하지 않을 예정이기 때문에 false
    PassportModule.register({ defaultStrategy: 'jwt', session: false }),
    // jwt 생성할 때 사용할 시크릿 키와 만료일자 적어주기
    JwtModule.register({
      secret: 'secret',
      signOptions: { expiresIn: '1y' },
    }),
  ],
  controllers: [LoginController],
  providers: [LoginService, JwtStrategy], // strategy 의존성 주입을 위해서
})
export class LoginModule {}

그리고 포스트맨을 이용해서 로그인을 시도하면 다음과 같이 JWT 토큰을 리턴해준다. 따라서 리턴된 토큰을 가지고 앞으로 인증을 진행하면 된다.

📍 UseGuard를 이용해서 인증해보기

지금 발급된 토큰은 어디에 잘 복사해두었다가 이번 섹션에서 사용할 수 있도록 하자.

이제 마지막으로 아까 열심히 제작한 jwt 관련 코드들을 적용해보는 시간을 가지도록 하자.
그러기 위해서는 간단한 컨트롤러 하나를 제작해보자.

src 폴더 밑에 user 폴더를 만들고 user.controller.ts 코드를 만들어보도록 하자.

// user.controller.ts
import { Controller, Get, UseGuards } from '@nestjs/common';
import { JwtAuthGuard } from '../jwt/jwt.guard';

@Controller('user')
export class userController {
  @UseGuards(JwtAuthGuard)
  @Get('all')
  getAllUser() {
    return {
      success: true,
      user: {
        email: 'test@test.com',
      },
    };
  }
}

위의 코드는 JwtAuthGuard 를 통과하면 성공이라는 메시지와 함께 유저 이메일을 보여주는 식으로 아주 간단하게 만들었다. 위와 같은 방식으로 @UseGuards 애노테이션을 이용해서 글로벌, 컨트롤러, 라우트에 자신이 원하는 곳이 인증을 부착할 수 있다.

그럼 포스트맨으로 테스트를 해봐야하는데 테스트는 다음과 같이 한다.

1. 먼저 GET http://localhost:포트/user/all 로 URL을 변경
2. Headers 탭으로 이동 후 다음의 내용을 적는다.

• KEY: Authentication
• VALUE: Bearer <토큰>
  (Header 의 Authentication 키에 Bearer 토큰을 넣는 이유는 jwtStrategy 코드에서 jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken() 으로 명시해주었기 때문이다.)

3. Send를 눌러서 리턴값을 확인한다.

따라서 성공하게 되면 다음과 같이 결과가 뜬다.

만약 실패하면 다음과 같이 결과가 뜬다. (Bearer 111<토큰> 으로 이상하게 수정)

우리는 세션을 사용하지 않고 jwt 토큰을 이용해서 인증을 구현하였는데, 요즘 운영 환경에서 하나의 서버만 사용하는 것이 아니고 여러 개의 서버를 동시에 돌리게 된다.

그리고 세션은 서버에 종속되기 때문에 각각 서버마다 내가 생성한 세션이 동기화가 되어야지 로드밸런서로 다른 서버로 이동되더라도 컨텍스트를 잃지 않고 작업 할 수 있다.

이런 부분이 번거로워서 jwt 토큰을 이용해서 인증을 구현하는 것이고 이 방법을 사용하면 서버마다 세션을 사용할 필요가 없게 된다.

결론

뭔가 벼락처럼 Passport 와 jwt 를 이용한 로그인 구현이 지나가게 되었는데, 사실 아직 석연치 않은 부분들이 있고 완벽하게 이해된 것이 아니다. 따라서 계속 공부를 할 예정이고 새롭게 안 사실이 있으면 중간 중간 포스팅 내용을 수정하거나 추가할 수 있도록 하겠습니다.

그리고 지금은 하드코딩으로 값을 비교하고 처리하였는데, 다음 포스팅에는 데이터베이스를 연동하고 nest 기능을 좀 더 적극적으로 활용 할 수 있는 방안을 작성해보도록 하겠습니다.

긴글 봐주셔서 감사합니다.

그럼 이만 총총..🏃🏻‍♀️