[BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - JWT를 이용한 로그인

 

 

Project Git Hub

 

 

🗂 목차

● [BackEnd][Node.js][nest.js-PJ] 사내 개발자 커뮤니티 서비스 - 초기 구성(Pipe, TypeORM, Configuration, Swagger, Logger)

● [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - 회원 가입

● [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - JWT를 이용한 Login

● [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - Passport, JWT를 이용한 인가 처리

● [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - Custom Decorator

● [BackEnd][Node.js][nest.js-PJ] 사내 개발자 커뮤니티 서비스 - 게시판 만들기 : 초기 구성(Entity, Controller,Module,Repository,Service)

 

 

 

 

📚 부록

● [Node.js] Node.js 기초
● [JavaScript] 기본 문법 
● [BackEnd][Node.js] 사내 개발자 커뮤니티 서비스 - 초기 구성
● [BackEnd][Node.js] 사내 개발자 커뮤니티 서비스 - 초기 구성 : DB 연결
● [BackEnd][Node.js] 사내 개발자 커뮤니티 서비스 - 초기 구성 : DB 연결(Sequelize)
● [Web] URL의 이해
● [Spring] Spring이란?
●[Node.js][Nest.js] 유효성 검사와 Data 형식 변환하기 - Pipe
●[Node.js][Nest.js] Configuration (설정)
●[Node.js][Nest.js]TypeORM
● [Node.js][Nest.js] Logger 기능
●[JavaScript] Promise와 async 그리고 await 
● [Nest.js] API 설계 - 요청, 응답 객체 (Request, Response Object) 
● [정보보안] JWT(JSON Web Token) 이란? 
● [Nest.js] Middle Ware(미들웨어)

 

 

 

 

🤔 내가 만난 Error

● [Node.js][Error] Cannot find module '.dotenv'

 

 

 

 

 

 

 

 

 

🚀 JWT를 이용한 Login

Swagger

Swagger

 

    🔽  설치하기

        📦 시작하기 전에

우리는 `JWT`를 이용한 Login 구현을 위해 `Passport` Module도 함께 이용할 것이에요.

왜냐하면 해당 Module이 `JWT`를 이용한 인증 처리, 인가 처리 등의 과정을 훨씬 쉽게 만들어주기 때문인 것이에요.

 

 

        📦 Module 소개

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

 

 

명령어

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

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

 

 

 

 

 

    🔽  등록하기

`auth Module` imports 부분에 내용을 넣어 줄 것이에요. 

auth.modules.ts

먼저 주니하랑은 `Configuration`을 통하여 yml에 작성한 JWT관련 내용을 9번째 줄처럼 가져온 뒤 해당 내용을 31, 32번째 줄에서 이용해서 민감 정보를 숨겨준 것이에요. 당연히 이 정보들은 `.gitignore`에도 등록이 되어 있기 때문에 주니하랑 말고는 누구도 확인할 수 없는 것이에요.

`Configuration`에 대한 내용은 `이 곳`에서 확인하실 수 있도록 준비해 둘게요.

 

31번째 줄 `secret`은 Token을 만들 때 이용하는 비밀 값을 넣어주는 것이에요. 평문으로 입력해도 되고, 주니하랑은 평문을 base 64로 Encoding한 값을 넣어 준 것이에요.

`signOptions`에서 서명을 어떻게 구현할 것인지를 정의해 주는 곳인 것이에요.

32번째 줄 `ExpireIn`은 Token 만료 시간을 넣어준 것이에요.

 

 

        📦 Passport 등록하기

auth.modules.ts

32번째 줄에 새로운 식구가 생긴것이에요. 바로 `PassportModule`안에 `register()`를 호출하는데, 그 안에 기본 전략 값으로 `JWT`를 넣어줘서 `JWT`를 이용한 Login 기능 구현을 할 수 있게 해 주는 것이에요.

 

이제 `Service`에서 `SignIn` Method를 만들어 줄 것인데, 위에서 auth Module에 JWT를 등록했기 때문에 `Service`에서 `JWT` 내용을 가져올 수 있는 것이에요.

auth.service.ts

위와 같이 생성자 부에 `userRepository`를 `DI(Dependency Injection)` 해주었듯이 `JWT`도 동일하게 해 준 것이에요.

 

 

        📦 DTO 만들기

auth.signin.request.dto.ts

로그인을 할 때, ID와 비밀번호를 담기 위한 DTO를 만들어 준 것이에요.

역시 `Pipe`를 이용한 Validation을 이용하기 위해 많은 Decorator가 분비 되어 있는 것이에요.

 

 

 

 

        📦 Service

auth.service.ts - signIn() : 134 ~ 174

먼저 `Service` 부분을 살펴 볼 것이에요. 최초 매개 변수로 DTO를 받고 그 DTO 내용을 ID, Password로 나누기 위해 각각 변수에 넣어준 것이에요.

그런 뒤 146번째 줄에 `Repository`에 `findOne()`을 통해 `Select`를 하는데, 주니하랑은 ID와 Password 값만 필요해서 `Select` Option을 147번 줄과 같이 주고, `where` Option을 통해 요청으로 들어온 ID로 ID를 찾게 한 것이에요.

152번째 줄에서 해당 값이 있는지와 함께 이용자가 입력한 암호화 Data Base에 저장되어 있는 암호가 같은지를 비교한 뒤 모두 참(&& And 연산자)이라면 payload 상수형 변수에 ID값을 넣어준 것이에요.

156번째 줄에 `jwtService`에 `sing()`을 호출하는데, payload 변수 값을 보내 전자 서명이 이뤄지게 만들고, 이를 accessToken 상수형 변수에 넣어준 것이에요.

158 ~ 163번째는 `Response(응답)` 값에 위와 같이 HTTP Status Code와 한글 Message, 영어 Message를 전달하고, data Key에 accessToken 값을 넣어준 것이에요.

이 내용을 전달하기 위해 Method 반환 Type을 보면 Promise를 이용하고, 많은 변수들을 전달하는 것이에요.

만약 If문에 통과하지 못했다면 Login이 실패했다는 정보를 보낼 것이에요.

 

auth.service.ts - signIn() : 178 ~ 186

Login은 두가지 결정이 있는 것이에요. Login이 성공하거나, Login이 실패하거나, 실패를 했다는 건 ID 혹은 비밀번호를 잘 못 입력해서 발생하는 결과일 것이에요.

그 내용은 위에서 다 처리를 해줬기 때문에 다른 문제가 발생한다면 Server 문제로 판단할 수 잇는 것이에요.

그래서 위와 같이 작성을 해 준 것이에요.

 

 

 

        📦 Controller

auth.controller.ts

반응형

Controller는 최초 `Service`의 `signIn()`을 호출하는데, 이용자가 Login을 위해 입력한 값을 담은 DTO를 전달해서 호출하는 것이에요.

그런 뒤 반환값이 돌아오면 위에 `Service`에서 반환되는 값들이 저렇게 오기 때문에 자료형 Type을 저렇게 준 상수형 변수 loginUser 변수에 값을 담아 res.status()를 호출해서 200에 대한 내용을 전달하고, `Service`에서 만든 Data가 `JSON` 형태로 전달될 수 있게 해 준 것이에요.

 

 

 

 

 

    🔽  결과

        📦 POSTMAN

Postman Test

정상적으로 Data가 반환되고 있고, Access Token까지 잘 오고 있는 것이에요.

 

아직 `Vue.js`에서 Login 부분이 구현이 되지 않아 `Vue.js`에서는 다음 포스팅에 준비 해 두도록 하겠습니다.

 

 

다음 포스팅에서는 인가 처리에 대한 내용을 공부해 보도록 할 것이에요.

 

 

이전 글 : [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - 회원 가입

다음 글 : [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - 인가 처리