TIL - NestJS(passport-kakao)

eslerkang·2022년 1월 15일
1

TIL - Today I Learned

목록 보기
14/19
post-thumbnail

NestJS

군대에 있을때 사지방에서 사용했던 프레임워크인 Express를 기업협업을 하는 한달 간 사용하게 되었다. 자유롭고 필요한 것만 사용해 백앤드를 구성할 수 있다는 점이 매력으로 다가와 사용했었지만 협업을 하는 과정에서 tsoa 데코레이터 에러(vscode에서 나는 에러였다. 실제 서비스에 지장은 없었다. NeoVim을 쓰면 에러가 안보인다고?), 아키텍쳐에 대한 고민, Sequelize와의 사투로 약간 지쳐있었다. 그러던 와중 Java의 Spring, Python의 Django처럼 Node.js에서도 정해진 아키텍쳐가 있는 Nest를 알게 되었다. 며칠 사용해보진 않았지만 Module - Controller - Service 아키텍쳐, Guard, Pipe 등 매력적인 요소가 많았고 토이 프로젝트와 같이 개인적으로 백앤드를 구성한다면 Nest를 사용해야겠다고 생각했다.

Passport-Kakao

Nest를 사용하며 카카오 로그인을 구현하고 싶어 passport-kakao를 사용하였다. 이 포스트에서는 간략하게 Nest에 passport-kakao를 적용하는 방법에 대해 다뤄보고자 한다.

Kakao Developers

우선 Kakao Developers에 들어가 앱을 등록해줘야 한다.

와 같이 앱을 등록해주고 등록된 앱에 들어가보면 REST API 키를 볼 수 있다. 우린 그 키를 사용할 것이기에 복사해둔다.

그 후 왼쪽의 메뉴에서 카카오 로그인 메뉴로 들어가고

위의 사진과 같이 카카오 로그인을 활성화하고, 사용할 Redirect URI를 지정해준다.

또한 왼쪽 메뉴 카카오 로그인 - 동의항목 메뉴에서

와 같이 사용할 정보들에 대해 동의 여부를 지정해준다. 나의 경우 이메일과 닉네임만 필요했기에 이메일을 선택 동의로 수정해주었다.

우선 Kakao Developers에서 해야 할 설정은 모두 완료했다.

Config

이번 프로젝트에서는 dotenv 대신 config를 사용해보았다.

yarn add config

와 같이 config를 설치해주고,
와 같은 디렉토리를 구성해준다. 그 후 default.yaml에

kakao:
    clientID: {아까 복사한 REST API 키}

와 같이 작성해주고, development.yaml에

kakao:
    callbackURL: {아까 설정해둔 redirectURI}

와 같이 작성해준다. 이 경우 개발 환경에서는 localhost로 리다이렉트 시켜야하기 때문에 위와 같이 설정해 준 것이고, 실제 production 과정에선 production.yaml에 callbackURL을 따로 설정해주어야한다.
자세한 config에 대한 내용은 다루지 않겠다(나도 찾아봐야...ㅎㅎ..).

passport-kakao

우선 카카오 로그인 등을 다루기 위해 auth module, auth controller, auth service를 만들고, kakao.strategy.ts 파일을 생성했다.

우선은 위에서 언급하지 않은 파일에 대해선 무시하자.

우리는 passport 등과 같은 것들을 설치하지 않았으니(nest와 관련된 것들은 기본적을 설치되어 있다고 생각한다. 이미 진행했으니...)

yarn add @nestjs/passport passport passport-kakao
yarn add -D @types/passport-kakao

를 설치해준다.

그 다음 kakao.strategy.ts 파일을 열고 들어가서

와 같이 입력해준다. 입력 과정에서 UserKakaoDto 부분은 입력하지 않아도 된다(내가 만든 DTO로 payload의 타입을 지정해주는 용도이다).

KakaoStrategy 클래스는 PassportStrategy(Stragegy)를 상속받는 클래시로 여기서 Strategy는 passport-kakao의 Strategy를 의미한다.

KakaoStrategy의 중요한 부분은 생성자와 validate 함수로,
constructor의 super에서 clientID, callbackURL과 같이 우리가 config에서 지정해준 카카오와 연결하기 위한 속성들을 지정해주고, validate 함수는 카카오가 리다이렉트 해준 이후에 정보들
(accessToken - 카카오 엑세스 토큰, refreshToken - 카카오 리프레시 토큰, profile - 사용자의 프로필 정보, done - 에러, 성공 시 핸들링하는 콜백함수)
을 가져와 원하는 로직을 실행시킬 수 있도록 해준다.

로직 관련 부분은 잠시 후 다시 살펴보도록 하고, 컨트롤러와 모듈을 살펴보겠다.

auth module을 먼저 살펴보면

다른 부분은 다 무시하고 providers: [KakaoStrategy] 부분에 집중하도록 하자. Provider로 KakaoStrategy를 등록해주는 부분으로 이를 통해 AuthGuard를 사용할 수 있게 된다.

이번엔 auth controller를 살펴보면
/kakao, /kakao/redirect라는 두 엔드포인트가 존재하고 둘 다 UseGuard(AuthGuard('kaka'))가 적용되어 있음을 볼 수 있다. 위의 엔드포인트가 로그인을 하기 위한 접근 엔드포인트, 두번째가 리다이렉트 엔드포인트로 둘 다 KakaoStrategy를 적용시키기 위해 데코레이터가 사용되었다.

특히 리다이렉트 되는 라우트 부분의 경우 아까전 보고 있던 validate의 done이후 함수가 실행되는 구조이다.

다시 KakaoStrategy로 돌아가면

payload라는 유저를 생성/검색하기 위한 객체를 만들어 done(null, payload)로 넘겨주는 것을 볼 수 있다. 앞의 null이 에러 부분, payload 부분이 Request.user에 담기는 부분으로 에러가 없고 Requeset.user에 payload 객체를 담기 위한 부분이다.

즉 done(null, payload)를 통해 /kakao/redirect의 AuthGuard('kakao')가 끝나고 kakaoLoginCallback 함수가 실행되게 된다. 그 후 Request에 담긴 user(payload)를 기반으로 내가 원하는 동작(로그인/회원가입 등)을 할 수 있게 되는 것이다.

마무리

사실 다 써놓고 다시 읽어보니 차라리 글이 없는게 낫다고 생각될 정도로 엉망인 글이 되어버렸다(하지만 올린다). 아직 내가 Nest에 입문한지 얼마 안지나서 Guard에 대한 이해도 부족과 passport 자체를 Nest와 처음 물려본 상태다 보니 확신이 부족했던 것 같다. 지금 당장엔 리마인드용으로만 사용될 것 같은 글이 되어버렸지만 후에 프레임워크에 더 익숙해지고, 이해도가 상승하면 다시 정리해서 올리고 싶다.

profile
Surfer surfing on the dynamic flow of the world

0개의 댓글