NestJS - 12. JWT 토큰 생성

다음은 이글의 동영상 강의 입니다.

https://youtu.be/H4VS-Osylvo

 

토큰을 이용한 API 호출 방법

REST API 호출시 토큰을 이용하면 사용자 인증과 권한을 체크할 수 있습니다.

다음 그림은 토큰의 생성과  호출을 나타내는 그림입니다.

1. Client에서 로그인을 요청합니다.
2. Server에서 로그인을 체크한 후 토큰을 생성하고 accessToken을 전달합니다.
3. API를 호출합니다. 이때 호출 Header에 accessToken을 담아서 호출합니다.
4. accessToken을 확인하여 인증여부, 권한등을 체크한 후 결과 값을 return합니다.

 

JWT 구조

JWT 토큰은 다음과 같이 "."을 구분자로 하여 다음과 같이 3개의 값이 들어있는 형태를 갖고 있습니다.

1. header
2. payload
3. verify signature

{
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
     eyJpZCI6MSwidXNlcm5hbWUiOiJjb2RlZ2VhciIsImlhdC
     I6MTY0MzUxOTI2MCwiZXhwIjoxNjQzNTE5NTYwfQ.
     jxsk2FtHsRRhoAZrsUDgHaHOLCxI9IlSMKTrkZ0zUl4"
}

이 값은 www.jwt.io  사이트에 가면 다음과 같이 확인이 가능합니다.

JWT.IO

 

샘플 소스

지난시간까지의 소스는 아래 URL에서 받으시고, 아래 코드를 작성하시면 됩니다.

https://github.com/CodeGearGit/nestjs-04-login

GitHub - CodeGearGit/nestjs-04-login

 

JwtModule Import

우선 로그인시에 토큰을 생성해 보는 방법에 대해 설명합니다.

 

Nestjs에서 jwt 토큰을 사용하기 위해서는 @nestjs/jwt 라는 패키지를 설치합니다.

npm i --save @nestjs/jwt

JWT를 사용하고자 하는 Module에 다음과 같이 Jwt.Module을 등록합니다.

auth.module.ts

import { JwtModule } from '@nestjs/jwt';

imports: [
    TypeOrmModule.forFeature([UserRepository]),
    JwtModule.register({
      secret: 'SECRET',
      signOptions: { expiresIn: '300s' },
    }),
 ],

여기서 secret에는 verify signature에서 사용할 secret key 값을 입력합니다.

 

Payload Interface

다음은 payload에 보여 줄 값을 위해 interface를 생성합니다.

auth/security/payload.interface.ts

export interface Payload {
    id: number;
    username: string;
}

 

 

JWT토큰 생성

로그인 서비스를 다음과 같이 수정합니다.

auth/auth.service.ts의 validateUser

• payload 값 지정
• Json의 token 값으로 return

async validateUser(userDTO: UserDTO): Promise<{accessToken: string} | undefined> {
    let userFind: User = await this.userService.findByFields({
        where: { username: userDTO.username }
    });
    const validatePassword = await bcrypt.compare(userDTO.password, userFind.password);
    if(!userFind || !validatePassword) {
        throw new UnauthorizedException();
    }

    const payload: Payload = { id: userFind.id, username: userFind.username };

    return {
        accessToken: this.jwtService.sign(payload),
    };
}

 

로그인 컨트롤러를 다음과 같이 수정합니다.

@Post('/login')
async login(@Body() userDTO: UserDTO, @Res() res: Response): Promise<any> {
    const jwt = await this.authService.validateUser(userDTO);
    res.setHeader('Authorization', 'Bearer ' + jwt.accessToken);
    return res.json(jwt);
}

서버를 실행하고 Postman을 이용해 다음과 같이 로그인을 확인합니다.

POST http://localhost:3000/auth/login

결과

결과 값에서 Headers 탭을 클릭하면 다음과 같이 Bearer + 토큰 값을 확인할 수 있습니다.

 

이상으로 Nestjs에서 JWT 토큰을 생성하는 법을 알아보았습니다.