[MEMO APP] Back-end/ Session&Token-Register (2)

 

👨‍💻 Session&Token (2)

지난 포스팅에서 저희는 Json Web Token 이라는 모듈을 이용해서 토큰을 만들고 해석하는 함수를 만들었습니다. 오늘은 이 함수들을 회원가입 절차에서 사용을 해보도록 하겠습니다.

📌 Register fuction & Web Token

우리가 여기서 원하는것은 회원가입이 이루어졌을때 해당유저에게 token을 만들어주는 것인데요. 우리가 사전에 만들었던 token을 만들어주는 generateToken 함수를 사용해 auth.ctrl.js에서 구현을 해줄수도 있지만, 유저에대한 token은 다른 함수에서도 자주 사용이될 여지가 있기 때문에 따로 User.js 모델파일에서 methods함수를 이용해 만들어주도록 하겠습니다.

 

그럼 db폴더안에 User.js 파일을 열어주세요.

그리고 상단에 제일먼저 우리가 사용할 lib폴더안에 token파일과 토큰을 생성할때(토큰을 해쉬화할때) 사용할 문자열을 .env에서 가져오겠습니다.

그리고 맨 하단에 특정 유저정보(payload)를 담은 토큰을 만들어주는 함수를 만들어줄겁니다.

 

우리가 예전 포스팅에서 DB안에 정보를 처리할때(특정 이메일의 유저 찾기등..) statics를 사용했었는데요.

이때 statics는 DB자체에대한 처리를 할때 사용한다면 method는 특정 유저데이터에대한 처리를 할때 사용합니다.

 

그래서 이번에는 method를 이용해서 아래와같이 소스코드를 추가해줄게요.

(우리가 이전에 만들었던 token.js의 generateToken함수를 이용해서 'user'라는 subject를 가진 토큰을 만들어줍니다.)

이제 우리는 auth.ctrl.js에서 특정 User객체의 generateToken함수를 이용해서 쉽게 토큰을 만들수 있습니다.

 

자 그럼 auth.ctrl.js을 수정해보겠습니다. 파일을 열어줍니다.

그리고 우리가 이전에 만들었던 localRegister 함수를 다시 확인할게요.

 

우리는 아래의 사진처럼 클라이언트로부터 데이터를 받아 우리가 원하는 형식대로 잘 왔는지 Joi라는 모듈로 확인했습니다. 만약 잘못들어왔다면 Error를 발생시켰습니다.

만약 잘 들어왔다면, 클라이언트가 보내준 데이터를 DB에 저장하기위해서 Try Catch구문을 사용해 그 안에서 작업을 해주었습니다.

여기까지하면 우리가 원하던대로 새로운 유저의정보가 DB에 저장되는 소스코드가 완성되었습니다.

 

약간 아쉬웠던점이 회원가입과 동시에 로그인이 안되어지는 것이었는데요, 오늘 그부분을 방금 User.js에서 만든 generateToken을 이용해 처리를 해주겠습니다.

 

위의 사진에서 47번째줄 아래에 토큰을 생성해주는 함수를 넣어주겠습니다. 아래의

사진을 따라 작업해주세요.

(하이라이트한 소스코드를 참고해주세요.)

이전에 DB에 저장을 하면서 만들어졌던 user객체에 우리가 새로만든 generateToken을 이용합니다. 이때 우리가 따로 어떠한 파라미터값을 넘겨주지 않아도 user객체안에있는 display, email 등의 정보를 이용해서 그 정보를 payload로 이용해 token을 알아서 생성이 됩니다.

 

그리고 이정보를 쿠키에 담아서 다시 요청했던 클라이언트에게 보내줍니다.

이때 쿠키의 활성시간은 7일로 설정해주는데 여기에 입력하는 단위는 ms단위 계산임으로 아래 사진과같이 입력해줍니다.

이렇게까지 해주셨다면 회원가입과 동시에 세션이 생성되고 그 안에 토큰이 만들어집니다.

 

서버를 실행시켜 확인해 보겠습니다.

postman을 이용해 아래의 데이터로 테스트를 진행해 보겠습니다.

테스트가 정상적으로 이루어졌다면, postman 하단에 cookie안에 우리가 생성한 token이 존재하는것을 볼 수 있습니다.

그리고 이 token안의 정보를 복사하여서 https://jwt.io/ 사이트로 들어가 제대로 작성이 되었는지 확인해 보겠습니다.

 

이렇게 좌측에 복사한것을 붙여넣기 해주면 우측에 HEADER, PAYLOAD, SIGNATURE 영역별 정보가 나오게 됩니다.

 

즉 PAYLOAD보면 우리가 token을 만들때 넣었던 정보들을 확인이 가능해집니다.

오늘은 회원가입이 이루어졌을때 로그인이 유지되기위해 token을 유저에게 발급해주는 기능까지 구현해 주었습니다.

 

다음은 auth.ctrl.js 안에 loginLocal 기능을 구현해 주도록 하겠습니다.