반응형

여러 테이블의 데이터를 한꺼번에 처리할 경우가 있습니다.

예를 들면 회원 탈퇴의 경우,

고객의 계정 정보와 다른 여러 테이블에 들어있는 정보들을 한꺼번에 삭제해줘야만 하죠.

이때 특정 데이터가 삭제되지 않고 남게 되면 문제가 발생할 수 있습니다.

이렇게 모든 데이터를 한꺼번에 지우고, 만약 하나라도 오류가 발생할 경우 모든 것을 원복하는 것을 트랜젝션이라 합니다.

 

Nestjs에서 typeorm을 사용할때 트랜젝션 처리 하는 샘플코드를 만들어봅니다.

 

총 3개의 테이블에 데이터가 들어 있습니다.

- user : 사용자

- user_authority : 사용자 권한

- survey : 설문 정보

 

각각의 테이블 정보를 삭제하는 코드는 다음과 같습니다.

- user(사용자) 삭제

async deleteUser(user: User): Promise<any>{
    return await this.userRepository.createQueryBuilder()
        .delete()
        .from(User, 'user')
        .where('id = :id', { id: user.id })
        .execute();
}

- user_authority(사용자 권한) 삭제

async deleteUserAuthorities(user: User): Promise<any>{
    return await this.userAuthorityRepository.createQueryBuilder()
        .delete()
        .from(UserAuthority, 'userAuthority')
        .where('userId = :userId', { userId: user.id })
        .execute();
}

- survey(설문 정보) 삭제

async deleteAllUserSurvey(user: User): Promise<any>{
    return await this.surveyRepository.createQueryBuilder()
        .delete()
        .from(Survey, 'survey')
        .where('userId = :userId', { userId: user.id})
        .execute();
}

마지막에는 commit을 해줍니다.

await queryRunner.commitTransaction()

이 3가지를 transaction으로 처리하는 코드는 다음과 같습니다.

import {DataSource, FindOneOptions, Repository} from 'typeorm';
...

// 회원 탈퇴
async cancelUser(user: User): Promise<any>{
    // transaction 처리
    const queryRunner = this.dataSource.createQueryRunner();
    await queryRunner.connect();
    await queryRunner.startTransaction();
    try{
        // survey 삭제
        await this.deleteAllUserSurvey(user);
        // 사용자 삭제
        await this.deleteUser(user);
        // 사용자 권한 삭제
        await this.deleteUserAuthorities(user);
        // commit
        await queryRunner.commitTransaction()
    } catch (err) {
    	// 실패시 rollback
        await queryRunner.rollbackTransaction();
    } finally {
    	// release
        await queryRunner.release();
    }
}

이렇게 작성하시면 3개가 모두 성공해야만 회원 탈퇴가 성공하게 되고, 하나라도 실패할 경우 Rollback이 됩니다.

이상으로 Nestjs에서 typeorm의 tranaction 처리에 대해 알아보았습니다.

반응형
반응형

이 글은 아래 동영상 강의로 제공됩니다.

 

이번엔 Nestjs로 백엔드 개발을 진행합니다.

 

전체적인 진행 순서는 다음과 같습니다.

  1. kakao developer에서 애플리케이션 생성
  2. 전체 Workflow 이해하기
  3. Nuxtjs(Frontend) 개발
  4. Nestjs(Backend) 개발

 

아래 명령으로 프로젝트를 생성합니다.

nest new kakao-login-back

- package manager : yarn

 

axios package를 추가합니다.

yarn add axios

server port를 3001로 바꿔줍니다.

src/main.ts

await app.listen(3001);

 

src/app.controller에 login api를 만듭니다.

@Post('/login')
  async login(@Body() body: any, @Response() res): Promise<any> {
    try {
      // 카카오 토큰 조회 후 계정 정보 가져오기
      const { code, domain } = body;
      if (!code || !domain) {
        throw new BadRequestException('카카오 정보가 없습니다.');
      }
      const kakao = await this.appService.kakaoLogin({ code, domain });

      console.log(`kakaoUserInfo : ${JSON.stringify(kakao)}`);
      if (!kakao.id) {
        throw new BadRequestException('카카오 정보가 없습니다.');
      }

      res.send({
        user: kakao,
        message: 'success',
      });
    } catch (e) {
      console.log(e);
      throw new UnauthorizedException();
    }
  }

src/app.service.ts에 다음 내용을 추가합니다.

async kakaoLogin(options: { code: string; domain: string }): Promise<any> {
    const { code, domain } = options;
    const kakaoKey = '87073966cb41...';
    const kakaoTokenUrl = 'https://kauth.kakao.com/oauth/token';
    const kakaoUserInfoUrl = 'https://kapi.kakao.com/v2/user/me';
    const body = {
      grant_type: 'authorization_code',
      client_id: kakaoKey,
      redirect_uri: `${domain}/kakao-callback`,
      code,
    };
    const headers = {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
    };
    try {
      const response = await axios({
        method: 'POST',
        url: kakaoTokenUrl,
        timeout: 30000,
        headers,
        data: qs.stringify(body),
      });
      if (response.status === 200) {
        console.log(`kakaoToken : ${JSON.stringify(response.data)}`);
        // Token 을 가져왔을 경우 사용자 정보 조회
        const headerUserInfo = {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
          Authorization: 'Bearer ' + response.data.access_token,
        };
        console.log(`url : ${kakaoTokenUrl}`);
        console.log(`headers : ${JSON.stringify(headerUserInfo)}`);
        const responseUserInfo = await axios({
          method: 'GET',
          url: kakaoUserInfoUrl,
          timeout: 30000,
          headers: headerUserInfo,
        });
        console.log(`responseUserInfo.status : ${responseUserInfo.status}`);
        if (responseUserInfo.status === 200) {
          console.log(
            `kakaoUserInfo : ${JSON.stringify(responseUserInfo.data)}`,
          );
          return responseUserInfo.data;
        } else {
          throw new UnauthorizedException();
        }
      } else {
        throw new UnauthorizedException();
      }
    } catch (error) {
      console.log(error);
      throw new UnauthorizedException();
    }
  }

서버를 실행합니다.

yarn start:dev

브라우저의 콘솔 로그에 사용자 정보가 리턴된것을 확인할 수 있습니다.

이상으로 카카오로그인을 RestAPI를 이용하여 처리하는 방법에 대해 알아보았습니다.

반응형
반응형

이 글은 아래 동영상 강의로 제공됩니다.

 

Frontend 개발은 Nuxtjs를 이용하여 진행하도록 합니다.

 

전체적인 진행 순서는 다음과 같습니다.

  1. kakao developer에서 애플리케이션 생성
  2. 전체 Workflow 이해하기
  3. Nuxtjs(Frontend) 개발
  4. Nestjs(Backend) 개발

 

우선 아래 명령으로 Nuxt 프로젝트를 생성합니다.

npx create-nuxt-app kakao-login-front

- 프로젝트 명 : kakao-login-front

- programing language : Javascript

- Package manager : Yarn

- UI framework : None

- Nuxt.js modules : Axios

- Linting tools : ESLint

- Testing framework : None

- Rendering mode : Single Page App

- Server : Node.js

- Development tools : Enter

- Continuous integration : None

- Version control system : None

 

프로젝트 생성이 완료되면 아래와 같은 메시지가 나옵니다.

에디터에서 프로젝트를 열고, yarn dev를 사용해서 프로젝트를 실행합니다.

브라우저에서 http://localhost:3000번을 입력합니다.

이때 아래와 같은 페이지가 나오면 프로젝트가 정상적으로 만들어진 것입니다.

 

카카오 로그인 기능을 만들기 위해 아래와 같은 버튼이미지가 필요합니다.

아래 사이트에서 다운로드 하실 수 있습니다.

https://developers.kakao.com/tool/resource/login

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

이미지를 static 폴더 아래에 copy합니다.

 

카카오로그인을 사용하기 위해서 kakao.js 파일이 필요합니다.
nuxt.config.js의 'head' 아래에 다음 코드를 추가합니다.

script: [
  {
    src: 'https://developers.kakao.com/sdk/js/kakao.js'
  }
]

 

pages/index.vue 파일에 카카오 로그인 버튼을 추가하고 로그인 method를 작성 합니다.

<template>
  <a @click="loginWithKakao">
    <img src="/kakao_login_large_narrow.png"/>
  </a>
</template>

<script>
export default {
  name: 'IndexPage',
  methods: {
    kakaoInit () {
      Kakao.init('329a6a74...')// KaKao client key
      Kakao.isInitialized()
    },
    async loginWithKakao () {
      await Kakao.Auth.authorize({
        redirectUri: `${window.location.origin}/kakao-callback`
      })
    }
  },
  mounted () {
    this.kakaoInit()
  }
}
</script>

다음과 같이 컴파일 오류가 발생할 수 있습니다.

이 경우 .eslintrc.js 파일을 열고 아래 내용을 추가하면 오류를 해결 할 수 있습니다.

'Kakao' 변수가 선언되지 않았다는 오류이고, 선언되지 않은 변수를 eslint에서 인식할 수 있도록 해 준것입니다.

  globals: {
    Kakao: true
  }

카카오 인증 후 callback 페이지를 아래와 같이 만듭니다.

axios를 이용해 서버API를 호출할 것이기 때문에 nuxt.config.js 다음을 추가합니다.

- baseURL은 서버의 주소를 지정합니다.

  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    baseURL: 'http://localhost:3001/'
  },

 

pages/kakao-callback.vue

<template>
  <div>
    로그인 중 입니다...
  </div>
</template>

<script>
export default {
  async mounted () {
    try {
      // code 유무 체크
      if (!this.$route.query.code) {
        return this.$router.push('/')
      }
      console.log(`code : ${this.$route.query.code}`)

      // 카카오 로그인 요청
      const body = {
        code: this.$route.query.code,
        domain: window.location.origin
      }
      const response = await this.$axios.$post(
        '/login', body, {}
      )
      console.log(response)
    } catch (error) {
      console.log(error)
    }
  }
}
</script>

브라우저에서 확인을 해봅니다.

확인하고 계속하기를 클릭하면 아래와 같은 화면이 보입니다.

브라우저의 콘솔을 확인해보면 다음과 같이 code 값이 넘어온것을 확인 할 수 있습니다.

이렇게 해서 frontend 작업이 완료되었습니다.

다음시간은 backend 작업을 진행해보겠습니다.

반응형
반응형

이 글은 아래 동영상 강의로 제공됩니다.

 

카카오 로그인(REST API)을 활용하여 웹애플리케이션에서 로그인 기능을 구현하는 것을 배워보도록 하겠습니다.

 

전체적인 진행 순서는 다음과 같습니다.

  1. kakao developer에서 애플리케이션 생성
  2. 전체 Workflow 이해하기
  3. Nuxtjs(Frontend) 개발
  4. Nestjs(Backend) 개발

이번시간은 REST API를 이용한 카카오로그인 전체 Workflow에 대해 설명드립니다. 

1. 서비스 화면에서 카카오로그인 버튼을 클릭합니다. 이때 카카오에서 제공하는 동의 화면이 아래와 같이 나타납니다.

2. 동의를 클릭하면 카카오 인증서버에서 인가코드를 발급해서 우리가 등록한 redirect URI로 전달을 합니다.

 

3. frontend에서 backend로 로그인을 요청합니다.
    URI는 "/auth/login"이고 post로 요청합니다.
    이때 "인가코드"를 파라메터로 전달합니다.

 

4. backend에서 카카오인증 서버로 토큰 발급을 요청합니다.

https://kauth.kakao.com/oauth/token


    이때 인가코드, redirect uri, 애플리케이션Key 등을 파라메터로 전달합니다.

 

5. 정보가 일치할 경우 카카오에서 토큰을 발급하여 backend로 return합니다.

 

6. backend에서 카카오API 서버로 "사용자정보"를 요청합니다.

https://kapi.kakao.com/v2/user/me

7. 사용자 DB에서 해당 사용자를 확인하고 인증 토큰을 발급합니다.

   이때 신규 사용자일 경우 회원가입 처리를 진행한 후 인증 토큰을 발급합니다.

 

8. frontend에서 전달받은 토큰으로 backend로 사용자 정보를 요청합니다.

9. backend에서 토큰을 받아 사용자 정보를 return합니다.

10. frontend에서 사용자 정보 중 이름이 없을 경우 이름을 입력받습니다.

11. frontend에서 입력받은 이름으로 사용자 정보를 update 요청합니다.

12. backend에서 사용자 정보를 update 한 후 변경된 정보를 return 합니다.

 

이상이 전체 로그인을 처리하는 flow입니다.

반응형
반응형

이 글은 아래 동영상 강의로 제공됩니다.

카카오 로그인을 사용하려면 kakao developer 사이트에서 애플리케이션을 만들어야합니다.

이번 글에서는 Kakao Login의 개념과 애플리케이션을 생성하는 법을 알아보도록 하겠습니다.

 

전체적인 진행 순서는 다음과 같습니다.

  1. kakao developer에서 애플리케이션 생성
  2. 전체 Workflow 이해하기
  3. Nuxtjs(Frontend) 개발
  4. Nestjs(Backend) 개발

오늘은 첫번째 순서로 kakao develper에서 애플리케이션을 생성하는 방법에 대한 내용입니다.
그 전에 카카오 로그인이 어떻게 처리되는지도 간략하게 설명합니다.

  1. Kakao Login 이해하기
  2. Kakao Login용 애플리케이션 생성

1. Kakao Login 이해하기

카카오 로그인을 이용하면 사용자가 별도의 정보를 입력하지 않고도 손쉽게 로그인을 할 수 있습니다.

간편하게 로그인을 할 수 있으므로 요즘 많은 서비스에서 카카오로그인을 이용하여 로그인 처리를 하고 있습니다.

 

Kakao developers에서 자세한 문서를 제공하고 있으므로 아래 페이지를 방문하여 내용을 읽어보도록 합니다.

https://developers.kakao.com/docs/latest/ko/kakaologin/common

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

카카오로그인 Step을 요약하면 다음과 같습니다.

  1. 카카오로그인 버튼을 클릭합니다.
  2. 카카오 동의 화면에서 동의를 합니다. 이때 카카오 인가코드가 발급됩니다.
  3. RedirectURI로 인가코드가 전달됩니다.
  4. 인가코드로 카카오 인증토큰을 요청합니다.
  5. 발급받은 인증토큰으로 카카오 사용자 정보를 요청합니다.
  6. 사용자 정보를 확인하여 신규회원일 경우 회원 가입을 처리합니다.
  7. 기존 회원일 경우 서버에서 로그인 세션 또는 토큰을 발급합니다.

카카오 로그인은 모바일, 웹, 서버등 다양한 플랫폼에서 처리가 가능합니다. 우리는 Backend와 Frontend를 분리하여 처리하므로 로그인을 위해서는 Backend Server에서 토큰을 발급하여 로그인을 체크하도록 합니다. 그러기 위해서는 Frontend에서 로그인 인가코드를 받아 서버로 로그인 요청시 인가코드를 전송하고, 서버에서 인가코드를 받아 카카오토큰을 발급받고, 카카오 사용자 정보를 조회하는 순서로 처리를 합니다. 이 단계가 완료되면 서버에서 토큰을 발급해 사용자의 로그인을 처리합니다.

 

2. 애플리케이션 생성(in Kakao Developers)

카카오 로그인을 사용하기 위해서는 Kakao Developers 사이트에서 애플리케이션을 생성하여 키를 발급받아야 합니다.

자세한 안내는 아래 url을 참고하세요.

https://developers.kakao.com/docs/latest/ko/getting-started/app

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

애플리케이션 생성을 간단히 요약하면 다음과 같습니다.

1. kakao developers 사이트에 로그인합니다.

2. 상단의 내애플리케이션 메뉴를 클릭하고 애플리케이션 추가하기 버튼을 클릭합니다.

3. 앱 이름과 사업자명을 입력하고 저장 버튼을 클릭합니다.
    저는 nestSocialLogin라는 이름으로 생성을 했습니다.

4. 아래와 같이 앱이 만들어졌습니다.

5. 앱을 클릭하고 들어가면 다음과 같이 앱키를 확인하실 수 있습니다.

6. 앱을 사용하기 위해서는 하단의 플랫폼 설정하기를 해주어야 합니다.

7. 우리는 web을 개발할 것이므로 web 플랫폼 등록을 선택합니다.
   사이트 도메인은 최대 10개까지 등록이 가능합니다.
   우선은 로컬에서만 개발을 진행하므로 "http://localhost:3000"을 등록합니다.(3000은 포트입니다.)

8. 아래와 같이 도메인이 등록되면, Redirect URI를 등록해 주시면 됩니다.
   Redirect URI는 카카오 로그인화면에서 호출될 우리가 만든 서비스 URI입니다.

9. 우선 로그인 기능을 사용하기 위해 "활성화 설정"을 ON으로 변경합니다. 그리고 하단의 "Redirect URI 등록" 버튼을 클릭합니다. 

10. Redirection 될 URI 를 입력하고 저장합니다.

11. 카카오로그인 -> 동의항목 설정을 해줍니다.

    좌측의 카카오로그인 메뉴 아래 동의항목을 클릭합니다.

   로그인시에 카카오에서 가져올 정보를 설정을 통해 "필수 동의" 또는 "선택 동의"로 설정합니다.

 

이렇게 하면 카카오 로그인을 개발하기 위한 설정은 완료되었습니다.

 

실제 로그인 프로그램을 만드는 것은 다음 글을 참고 해주세요.

반응형
반응형

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

https://youtu.be/zjkaDU3syO8

 

완성 소스는 github 링크를 참조하세요.

https://github.com/CodeGearGit/nest-sample

 

GitHub - CodeGearGit/nest-sample: nestjs sample program

nestjs sample program. Contribute to CodeGearGit/nest-sample development by creating an account on GitHub.

github.com

 

환경 설정(Configuration)

Nestjs 프로젝트 실행시에 미리 정의된 환경설정을 읽어와서 실행합니다.

이때 환경변수를 통해서 가져오는 것과 설정파일을 통해 가져오는 것이 있습니다.

  • 환경변수
    • 보안상 중요한 내용을 코드에 노출하지 않기 위해 사용.
    • 개발시에는 .env 파일을 이용해서 관리.
    • .env는 .gitignore에 추가해서 서버에 배포되지 않게 합니다.
    • 서버에서는 프로파일에 export로 정의.
    • AWS의 ECS 같은 경우는 작업정의에서 정의.
  • 설정파일
    • 개발/운영등의 환경에 맞는 설정을 다르게 사용하기 위해 사용.
    • yaml 형식의 파일을 사용.

 

Nestjs Config

Nestjs에서는 설정 파일을 쉽게 관리할 수 있도록 @nestjs/config 패키지를 제공합니다.

@nestjs/config 패키지는 dotenv를 포함하고 있으므로 따로 설치하지 않아도 됩니다.

다음 명령을 사용해 패키지를 설치합니다.

npm i @nestjs/config

다음은 AppModule에서 config를 사용할 수 있도록 ConfigModule을 import 합니다.

  • isGlobal option은 다른 모듈에서 config를 사용할 수 있도록 global로 설정을 합니다.

src/app.module.ts

import { ConfigModule } from '@nestjs/config';
...

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true
    }),
    ....]
...

 

환경 변수 정의

프로젝트 루트 폴더에 .env를 만들고 다음과 같이 작성을 합니다.

NODE_ENV=development
NODE_SERVER_PORT=3000

main.ts 파일에서 다음과 같이 사용할 수 있습니다.

const port = process.env.NODE_SERVER_PORT
...
await app.listen(port);
logger.log(`Application listening on port ${port}`);

 

환경변수 테스트

서버를 실행해서 port를 읽어오는지 확인합니다.

npm run start

 

ConfigService 사용하기

이제 ConfigService를 사용하도록 main.ts 를 변경합니다.

  • @nestjs/config의 ConfigService를 사용합니다.
  • configService.get('NODE_SERVER_PORT')를 사용하여 port를 읽어옵니다.
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as cookieParser from 'cookie-parser';
import { ConfigService } from "@nestjs/config";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(cookieParser());
  const configService = app.get(ConfigService);
  const port = configService.get('NODE_SERVER_PORT');
  await app.listen(port);
  console.log(`Application listening on port ${port}`);
}
bootstrap();

서버를 실행해보면 이전과 동일하게 서버가 올라갑니다.

 

ConfigService를 다른 곳에서 사용하시려면 construtor 추가하면 됩니다.

import { ConfigService } from '@nestjs/config';
...
constructor(private configService: ConfigService);
...
configService.get('...');

 

Custom Configuration - 개발 / 운영 설정 파일 분리

yaml 파일 처리를 위해 js-yaml 패키지를 설치합니다.

npm i js-yaml @types/js-yaml

config 폴더를 만들고 다음과 같이 파일을 추가합니다.

- 테스트를 위해 개발/운영 각각 포트를 다르게 주었습니다.

  • src/config/production.yaml
server:
  port: 3001
  • src/config/development.yaml
server:
  port: 3002

 

config/config.ts 파일을 다음과 같이 만듭니다.

- 환경변수의 NODE_ENV가 'production'일 경우는 production.yaml을 읽고

- 그외의 경우는 development.yaml을 읽게 합니다.

  • src/config/config.ts
import { readFileSync } from 'fs';
import * as yaml from 'js-yaml';
import { join } from 'path';

const YAML_CONFIG_PROD = 'production.yaml';
const YAML_CONFIG_DEV = 'development.yaml';

export default () => {
  return yaml.load(
      (process.env.NODE_ENV==='production')?
        readFileSync(join(__dirname, YAML_CONFIG_PROD), 'utf8')
      : readFileSync(join(__dirname, YAML_CONFIG_DEV), 'utf8'),
  ) as Record<string, any>;
};

AppModule에서 config.ts 정보를 가져옵니다.

import config from './config/config';
...
@Module({
  imports: [
    ConfigModule.forRoot({
      load: [config],
      isGlobal: true
    }),...

main.ts에서 config를 이용해 포트를 읽어오도록 변경합니다.

const configService = app.get(ConfigService);
const port = configService.get<string>('server.port');

yaml은 컴파일시에 dist 폴더로 copy가 되지 않으므로 파일을 찾을 수 없습니다.

package.json에서 script를 이용해 yaml을 copy하기 위해 다음 패키지를 설치합니다.

npm i cpx

package.json을 다음과 같이 파일 복사 스크립트를 추가합니다.

- scripts에 "copy-files"를 아래와 같이 추가합니다.

- "copy-files": "cpx \"src/config/*.yaml\" dist/config/",

- start 및 build 스크립트에 "npm run copy-files" 를 추가합니다.

...
"scripts": {
    "copy-files": "cpx \"src/config/*.yaml\" dist/config/",
    "prebuild": "rimraf dist",
    "build": "npm run copy-files && nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "npm run copy-files && nest start",
    "start:dev": "npm run copy-files && nest start --watch",
    "start:debug": "npm run copy-files && nest start --debug --watch",
    "start:prod": "npm run copy-files && node dist/main",
...

프로젝트를 실행합니다.

npm run start:dev

.env의 "NODE_ENV=development"일 경우에는 3002번 포트로 서버가 실행됩니다.

.env의 "NODE_ENV=production"일 경우에는 3001번 포트로 서버가 실행됩니다.

이렇게 환경 설정파일을 분리해서 개발과 운영의 환경을 다르게 설정할 수 있습니다.

 

반응형
반응형

 

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

https://youtu.be/Unkbarfk1-M

 

로그인시 jwt token을 client의 쿠키에 저장하고, 로그아웃시에 삭제하는 방법을 알아보겠습니다.

 

우선 기존 login 처리 controller에서 쿠키를 저장할 수 있도록 소스를 수정합니다.

- res.cookie를 이용해서 jwt 토큰 값을 전달합니다.

- res.cookie의 인자는 (key, value, option) 으로 구성됩니다.

- option에는 httpOnly는 브라우저에서 cookie를 이용할 수 없게 합니다. 따라서 XSS 등의 보안을 강화시킬 수 있습니다.

- maxAge는 쿠키의 유효기간을 설정할 수 있습니다.

 

src/auth/auth.controller.ts

@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);
    res.cookie('jwt',jwt.accessToken,{
        httpOnly: true,
        maxAge: 24 * 60 * 60 * 1000 //1 day
    });
    return res.send({
        message: 'success'
    });
}

postman에서 login을 호출하면 다음과 같은 결과가 나옵니다.

- url = http://localhost:3000/auth/login

하단 결과 탭에 Cookie를 선택하면 다음과 같이 쿠키값이 들어있는 것을 확인할 수 있습니다.

이제 클라이언트에서 요청이 올때 이 쿠키 정보도 같이 보내게 됩니다.

이를 서버에서 처리하기 위해 cookie-parser 라는 패키지를 설치합니다.

npm i cookie-parser @types/cookie-parser

이제 다음과 같이 쿠키분석을 할 수 있도록 main.ts에 쿠키 파서를 추가합니다.

- app.use(cookieParser())를 추가함으로서 쿠키파서를 사용할 수 있습니다.

src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as cookieParser from 'cookie-parser';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(cookieParser());
  await app.listen(3000);
}
bootstrap();

쿠키값을 잘 읽어 오는지 확인하기 위해 컨트롤러를 하나 만듭니다.

- 여기서는 단순히 쿠키의 jwt 값을 읽어서 리턴해줍니다.

src/auth/auth.controller.ts

@Get('/cookies')
getCookies(@Req() req: Request, @Res() res: Response): any {
    const jwt =  req.cookies['jwt'];
    return res.send(jwt);
}

postman으로 호출하면 다음과 같은 결과를 확인할 수 있습니다.

- url = http://localhost:3000/auth/cookies

이제 로그아웃시에 쿠키를 삭제하는 컨트롤러를 추가합니다.

- 쿠키의 'jwt'값을 삭제합니다.

- 유효기간을 '0'으로 설정합니다.

src/auth/auth.controller.ts

@Post('/logout')
logout(@Req() req: Request, @Res() res: Response): any {
    res.cookie('jwt', '', {
        maxAge: 0
    })
    return res.send({
        message: 'success'
    })
}

postman에서 테스트하면 결과는 다음과 같습니다.

- url = http://localhost:3000/auth/logout

다음과 같이 Cookies 탭에 값이 없어진것을 확인할 수 있습니다.

이상으로 Nestjs에서 쿠키를 다루는 방법이었습니다.

반응형
반응형

Nestjs에서 기본적으로 제공하는 ValidationPipe를 이용하면 요청 Parameter의 유효성을 쉽게 체크하고 처리할 수 있습니다.

예를 들면 필수 입력 값의 경우 @IsNotEmpty를 사용하는 것만으로 유효성 체크가 끝이 납니다.

 

사용자 등록시 아이디와 패스워드를 필수 값으로 처리하는 방법에 대해 알아보겠습니다.

이전 예제에서 사용자 등록시 Input Parameter는 아래의 UserDTO를 사용하였습니다.

src/auth/dto/user.dto.ts

export class UserDTO {
    username: string;
    password: string;
}

이 경우에 username을 빈값으로 보내게 되어도 다음과 같이 회원 가입이 됩니다.

db에는 다음과 같이 id 3번 값이 공백으로 들어가게 됩니다.

공백이 입력되는 것을 막는 ValidationPipe를 사용해 보겠습니다.

 

우선 class-validator 패키지를 설치합니다.

npm i --save class-validator

UserDTO에서 "@IsNotEmpty()" 데코레이터를 추가합니다.

src/auth/dto/user.dto.ts

import { IsNotEmpty } from "class-validator";

export class UserDTO {
    @IsNotEmpty()
    username: string;
    @IsNotEmpty()
    password: string;
}

 

회원가입 라우팅 메소드에 "@UsePipes(ValidationPipe)"를 추가합니다.

src/auth/auth.controller.ts

import { Body, Controller, Get, Post, Req, Res, UseGuards, UsePipes, ValidationPipe } from "@nestjs/common";
...
@Post('/register')
@UsePipes(ValidationPipe)
async registerAccount(@Req() req: Request, @Body() userDTO: UserDTO): Promise<any> {
    return await this.authService.registerUser(userDTO);
}
...

 

이제 다시 위와 동일하게 username을 공백으로 API를 호출합니다.

* 이때 Validation 체크가 되지 않을 경우 "npm run build"를 한번 실행 후에 하시면 됩니다.

결과는 400 에러가 나오고 , username은 반드시 입력해야 한다는 메시지가 나옵니다.

 

class-validator의 데코레이터는 다음 사이트에가면 확인하실 수 있습니다.

https://github.com/typestack/class-validator#manual-validation

 

GitHub - typestack/class-validator: Decorator-based property validation for classes.

Decorator-based property validation for classes. Contribute to typestack/class-validator development by creating an account on GitHub.

github.com

 

반응형
반응형

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

https://youtu.be/hJMxGJoNsjQ

https://youtu.be/QBTgOnKMo9s

https://youtu.be/e6HpJqXj1mk

https://youtu.be/d_-Q98-hKs8

 

사이트에서 특정 권한자만 접근이 가능하도록 제어해야할 필요가 있습니다.

예를 들면 회원관리 메뉴의 경우는 모든 사람이 접근하면 안되고, 관리자만 접근 가능해야 하는 경우입니다.

이를 구현하기 위해서는 사용자의 권한(Role)을 관리해야 합니다.

 

권한 관리를 위해서는 다음 사항들이 수행되어야 합니다.

- 권한 구분 : admin, user등으로 권한을 설정합니다.

- 사용자 별로 어떤 권한이 있는지를 db에 저장하고 있어야 합니다.

- 메뉴 접근시 사용자의 권한을 체크하여 사용 가능 여부에 따라 접근을 허가 또는 거부합니다.

 

db에 사용자의 권한을 관리하기 위한 테이블 user_autority의 구조는 다음과 같습니다.

다음을 SQL을 이용하여 user_authority 테이블을 만듭니다.

- user_id는 user 테이블의 id 값에 매핑되는 값입니다.

- authority_name은 다음 두가지 type을 갖도록 ENUM으로 만듭니다.

- authority_name : USER, ADMIN

- 초기 데이터를 아래와 같이 입력합니다.

CREATE TABLE IF NOT EXISTS `test`.`user_authority` (
  `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
  `user_id` BIGINT NOT NULL,
  `authority_name` ENUM('ROLE_USER', 'ROLE_ADMIN') NOT NULL,
  PRIMARY KEY (`id`))
ENGINE = InnoDB

insert into `test`.`user_authority` (user_id, authority_name) values (1,'ROLE_USER');
insert into `test`.`user_authority` (user_id, authority_name) values (1,'ROLE_ADMIN');
insert into `test`.`user_authority` (user_id, authority_name) values (2,'ROLE_USER');

- user 테이블에 아래와 같이 id에 값이 있어야 합니다.

 

user-authority entity를 만듭니다.

- 한 사용자가 여러개의 authority를 갖을 수 있으므로 user_authority 테이블에서는 ManyToOne으로 Join을 합니다.

- auth/entity/user-authority.entity.ts

import { Column, Entity, JoinColumn, ManyToOne, PrimaryColumn } from "typeorm";
import { User } from "./user.entity";

@Entity('user_authority')
export class UserAuthority {
    @PrimaryColumn()
    id: number;

    @Column('int',{name: 'user_id'})
    userId: number;

    @Column('varchar',{name: 'authority_name'})
    authorityName: string;

    @ManyToOne(type=>User, user=>user.authorities)
    @JoinColumn({name: 'user_id'})
    user: User;
}

user-entity를 다음과 같이 수정합니다.

- 한 사용자가 여러개의 authority를 갖을 수 있으므로 user 테이블에서는 OneToMany Join을 합니다.

- auth/entity/user.entity.ts

import { Column, Entity, OneToMany, PrimaryGeneratedColumn } from "typeorm";
import { UserAuthority } from "./user-authority.entity";

@Entity('user')
export class User {
    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    username: string;

    @Column()
    password: string;

    @OneToMany(()=>UserAuthority, userAuthority => userAuthority.user, {eager: true})
    authorities?: any[];
}

authority repository를 만듭니다.

- auth/repository/user-autority.repository.ts

import { EntityRepository, Repository } from "typeorm";
import { UserAuthority } from "../entity/user-authority.entity";

@EntityRepository(UserAuthority)
export class UserAuthorityRepository extends Repository<UserAuthority> {}

App Module의 TypeOrmModule.forRoot에 UserAuthority를 추가합니다.

- app.module.ts

TypeOrmModule.forRoot({
  type: 'mysql',
  host: 'localhost',
  port: 13306,
  username: 'root',
  password: 'root',
  database: 'test',
  entities: [Cat, User, Authority],
  synchronize: true,
}),

Auth Module에 UserAuthorityRepository를 추가합니다.

import { Module } from '@nestjs/common';
import { JwtModule } from '@nestjs/jwt';
import { PassportModule } from '@nestjs/passport';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AuthController } from './auth.controller';
import { AuthService } from './auth.service';
import { JwtStrategy } from './security/passport.jwt.strategy';
import { UserRepository } from './repository/user.repository';
import { UserService } from './user.service';
import { UserAuthorityRepository } from './repository/user-authority.repository';

@Module({
  imports: [
    TypeOrmModule.forFeature([UserRepository, UserAuthorityRepository]),
    JwtModule.register({
      secret: 'SECRET_KEY',
      signOptions: {expiresIn: '300s'},
    }),
    PassportModule
  ],
  exports: [TypeOrmModule],
  controllers: [AuthController],
  providers: [AuthService, UserService, JwtStrategy]
})
export class AuthModule {}

payload에도 UserAutyrity를 추가합니다.

- auth/security/payload.interface.ts

export interface Payload {
    id: number;
    username: string;
    authorities?: any[];
}

 

Role Type을 다음과 같이 만듭니다.

- auth/role-type.ts

export enum RoleType {
    USER = 'ROLE_USER',
    ADMIN = 'ROLE_ADMIN',
    ANONYMOUS = 'ROLE_ANONYMOUS',
}

Role Decorator를 다음과 같이 만듭니다.

- auth/decorator/role.decorator.ts

import { SetMetadata } from '@nestjs/common';
import { RoleType } from '../role-type';

export const Roles = (...roles: RoleType[]): any => SetMetadata('roles', roles);

 

Role Guard를 다음과 같이 만듭니다.

- auth/security/roles.guard.ts

import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
import { Reflector } from '@nestjs/core';
import { User } from '../entity/user.entity';

@Injectable()
export class RolesGuard implements CanActivate {
    constructor(private readonly reflector: Reflector) {}

    canActivate(context: ExecutionContext): boolean {
        const roles = this.reflector.get<string[]>('roles', context.getHandler());

        if (!roles) {
            return true;
        }

        const request = context.switchToHttp().getRequest();
        const user = request.user as User;

        return user && user.authorities && user.authorities.some(role => roles.includes(role));
    }
}

RolesGuard에서 사용된 Reflector는 Application Runtime시에 정의된 Metadata를 이용해 type을 알아내는데 사용합니다.

 

AuthService의 payload에 authority를 추가합니다.

- authorities는 배열 형태로 RoleType이 들어갑니다.

- auth/auth.service.ts

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

    this.convertInAuthorities(userFind);

    const payload: Payload = { id: userFind.id, username: userFind.username, authorities: userFind.authorities };
    return {
        accessToken: this.jwtService.sign(payload)
    };
}

async tokenValidateUser(payload: Payload): Promise<User| undefined> {
    const userFind = await this.userService.findByFields({
        where: { id: payload.id }
    });
    this.flatAuthorities(userFind);
    return userFind;
}

private flatAuthorities(user: any): User {
    if (user && user.authorities) {
        const authorities: string[] = [];
        user.authorities.forEach(authority => authorities.push(authority.authorityName));
        user.authorities = authorities;
    }
    return user;
}

private convertInAuthorities(user: any): User {
    if (user && user.authorities) {
        const authorities: any[] = [];
        user.authorities.forEach(authority => authorities.push({ name: authority.authorityName }));
        user.authorities = authorities;
    }
    return user;
}

테스트를 위해 Controller에 핸들러를 하나 추가합니다.

- auth/auth.controller.ts

@Get('/admin-role')
@UseGuards(AuthGuard, RolesGuard)
@Roles(RoleType.ADMIN)
adminRole(@Req() req: Request): any {
    const user: any = req.user;
    return user;
}

Application을 실행합니다.

npm run start:dev

 

ADMIN 권한이 있는 아이디로 테스트 

- 관리자 계정으로 로그인 후 토큰값을 받아 옵니다.

accessToken을 이용해서 관리자 접근 권한을 체크합니다.

ADMIN 권한이 없는 아이디로 테스트

권한이 없을 경우 아래와 가티 에러가 발생됩니다.

이상으로 Nest에서 권한을 체크하는 방법에 대해서 알아보았습니다.

반응형
반응형

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

https://youtu.be/1upOqWW2zyU

 

Nestjs에서 JWT 토큰을 이용한 인증시에는 Guard를 사용합니다.

Guard는 라우팅 전에 작동하는 일종의 미들웨어입니다.

 

이전까지의 코드가 들어있는 샘플소스는 다음 github 저장소에서 받으실 수 있습니다.

https://github.com/CodeGearGit/nestjs-05-jwt

 

GitHub - CodeGearGit/nestjs-05-jwt

Contribute to CodeGearGit/nestjs-05-jwt development by creating an account on GitHub.

github.com

 

패키지 설치

프로젝트에 다음과 같이 패키지를 설치합니다.

npm i --save @nestjs/passport @types/passport-jwt

 

코드 작성

JWT 검증을 위해 JwtStrategy를 만듭니다.

auth/security/passport.jwt.strategy.ts

import { Injectable, UnauthorizedException } from "@nestjs/common";
import { ExtractJwt, Strategy, VerifiedCallback } from 'passport-jwt';
import { PassportStrategy } from "@nestjs/passport";
import { AuthService } from "../auth.service";
import { Payload } from "./payload.interface";

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy){
    constructor(private authService: AuthService){
        super({
            jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
            ignoreExpiration: true,
            secretOrKey: 'SECRET_KEY',
        })
    }

    async validate(payload: Payload, done: VerifiedCallback): Promise<any> {
        const user = await this.authService.tokenValidateUser(payload);
        if (!user) {
            return done(new UnauthorizedException({ message: 'user does not exist' }), false);
        }

        return done(null, user);
    }
}

auth/auth.service.ts 에 tokenValidateUser를 추가합니다.

async tokenValidateUser(payload: Payload): Promise<UserDTO | undefined> {
    return await this.userService.findByFields({
        where: { id: payload.id }
    });
}

auth/auth.module.ts

- imports에 PassportModule 을 추가하고,

- providers에 JwtStrategy 를 추가합니다.

import { Module } from '@nestjs/common';
import { JwtModule } from '@nestjs/jwt';
import { PassportModule } from '@nestjs/passport';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AuthController } from './auth.controller';
import { AuthService } from './auth.service';
import { JwtStrategy } from './security/passport.jwt.strategy';
import { UserRepository } from './user.repository';
import { UserService } from './user.service';

@Module({
  imports: [
    TypeOrmModule.forFeature([UserRepository]),
    JwtModule.register({
      secret: 'SECRET_KEY',
      signOptions: {expiresIn: '300s'},
    }),
    PassportModule
  ],
  exports: [TypeOrmModule],
  controllers: [AuthController],
  providers: [AuthService, UserService, JwtStrategy]
})
export class AuthModule {}

auth/security/auth.guard.ts를 만듭니다.

import { ExecutionContext, Injectable } from '@nestjs/common';
import { AuthGuard as NestAuthGuard } from '@nestjs/passport';

@Injectable()
export class AuthGuard extends NestAuthGuard('jwt') {
    canActivate(context: ExecutionContext): any {
        return super.canActivate(context);
    }
}

auth/auth.controller.ts에 아래와 같이 라우터를 하나 추가합니다.

@Get('/authenticate')
@UseGuards(AuthGuard)
isAuthenticated(@Req() req: Request): any { 
    const user: any = req.user;
    return user;
}

 

테스트

jwt 인증 모듈의 개발이 완료되었으므로 Postman을 이용해서 테스트를 해봅니다.

토큰이 없을 경우 다음과 같이 Unauthorized 값이 리턴됩니다.

로그인 호출을 통해 토큰 값을 받아옵니다.

토큰을 이용해 authenticate를 다시 호출합니다.

- Headers 에 다음 값을 입력합니다.

   KEY: Authorization

   VALUE : 로그인에서 받아온 토큰값

다음과 같이 결과가 나오는걸 보실 수 있습니다.

이상으로 JWT 인증하는 법에 대해 알아보았습니다.

 

최종 완료된 소스는 아래 URL에서 확인하시면 됩니다.

https://github.com/CodeGearGit/nestjs-06-jwt-auth

 

GitHub - CodeGearGit/nestjs-06-jwt-auth

Contribute to CodeGearGit/nestjs-06-jwt-auth development by creating an account on GitHub.

github.com

 

반응형

+ Recent posts