1. 기술 스택 선정에 대한 고찰 -4편 유저 인증-

이전 포스팅

https://ksw0627.tistory.com/101

1. 기술 스택 선정에 대한 고찰 -1편-

https://ksw0627.tistory.com/102

1. 기술 스택 선정에 대한 고찰 -2편 데이터베이스-

https://ksw0627.tistory.com/103

1. 기술 스택 선정에 대한 고찰 -3편 웹 서버-

 

이번 포스팅은 Passport, OAuth 2.0, JWT에 관한 내용이다.

다른 대안과 비교하여 작성하기 보다는 사용하게 된 계기? 이유와 사용하면서 느낀점을 위주로 적을 것 같다.

 

9. OAuth 2.0

어느샌가 우리가 웹 사이트를 이용하면서 자연스럽게 자리잡은 기술이다. 이른바 간편 로그인 기능! 이전 포스팅과 겹치는 내용이 있을 수도 있으나 Passport와 연계되는 내용으로 적으려고 한다.

구글, 페이스북, 카카오, 네이버 등에서 제공한다. OAuth 2.0 인증 프레임 워크를 기반으로 하여 사용자 인증을 수행한다.

사용자 관점에서는 사이트마다 회원가입을 하고 비밀번호를 다르게 하여 오랜만에 접속했을 때 비밀번호 찾기를 하는 귀찮음!을 덜게 해준 일등공신이다. 물론 회원가입 절차와 로그인이 간편해진 것도 있다.

이전 클론 코딩에서의 구현 경험과 이번에 구현하면서 느낀 경험으로 개발자의 관점에서는 유저의 민감한 데이터를 다루지 않아도 된다는 장점이 있었다.

티클모아 태산 서비스에서는 구글, 네이버, 카카오 로그인을 채택했으나 네이버의 빡센 검수(ㅠㅠ)로 구글/카카오 두 가지 소셜 로그인만 구현했다. 실제 서비스에는 적용하지 못했지만 네이버 로그인도 엄연히 존재한다.

프로젝트에서 내가 맡았던 부분이 네이버 였기 때문에 아쉬운 점이 있지만, 다른 구글과 카카오를 보고 느낀 것은 구현방식이 조금씩 차이가 있다는 것이다. 여기서 나오는 것이 Passport 이다.

 

10. Passport & JWT

Passport 모듈은 로그인 절차를 확실하게 하기위해 사용하는 라이브러리다. 구현 방법이 조금씩 다른 플랫폼 간 소셜 로그인 구현을 묶어서 쉽게 해주기도 한다(체계적으로 관리).

라는 정보를 얻고 실제 적용하면서 난항을 겪었다.

문법이 너무 난해하다!

클론 코딩때 카카오 OAuth 2.0을 구현해서 금방할 줄 알았는데 적용시키는 것이 어려워 주변의 도움과 Passport 문서를 한참 찾아봤던 기억이 난다.

Strategy이 무엇인지를 이해해야 했고, 내가 원하는 대로 커스텀(사실 커스텀이라고 할 것도 없었지만)하기가 힘들어서 기존에 작업 산정했던 기간보다 오래 걸렸었다.

 

Passport를 사용하면서 가장 기억에 남는 것은 callback을 사용하지 못했던 것이다.

프론트와 백엔드 서버가 분리되어 있기 때문에 생긴 문제였지만 백엔드 로컬 단위에서 테스트했을 때는 문제가 없었다. login 요청 -> code 발급 -> callback 으로 토큰 발급 이 순서 였는데, 프론트 서버와 연동해서 테스트할 때 CORS 에러가 났었다.

결국 클론 코딩 때와 같이

프론트 : login 요청 -> 카카오 서버로 부터 code 발급

백엔드 : code 인증 -> 카카오 서버로부터 유저 정보 받아오기 -> Access, Refresh Token 발급

과 같이 로그인/회원가입 절차를 분리하여 기능을 구현했다.

 

Passport 라이브러리에서 JWT인증에 관한 기능도 지원한다. 원래는 JWT를 따로 구현해서 사용하였으나, 라이브러리에서 지원하는데 따로 구현할거면 Passport를 사용하는 이유가 하나 줄기 때문에 JWT Strategy를 작성했었다

실제 계좌와 연동하려는 야심찬 계획을 가지고 진행했기 때문에 보안적으로 교차 검증을 하기 위해 pinCode(2차 비밀번호)와 RefreshToken 모두 충족하면 AccessToken을 재발급 하게 구현했다.

회원가입 시 pinCode(2차 비밀번호) 등록과정, AccessToken 만료 시 입력 받을 때 사용한다.

RefreshToken은 로그인 시에 User Table에 별도의 Column에 저장되며, 로그아웃 시에 RefreshToken은 삭제된다.

다른 프로젝트의 염탐 결과, 로그인 정보를 Redis에 저장하여 좀 더 세련된(?) 방법으로 관리할 수 있다는 것을 알았지만 구현할 시간이 없었다 ㅠㅠ(MVP 달성만 해도 너무 힘들었다.)

 

다음 편은 그 외 기술 선택과 기획 단계서 정헀지만 실제로 적용하지는 못했던 기술에 대해서 이야기 하고자 한다.(끝이 보인다.)