[Nest.js] Passport-KaKao Strategy 관련 삽질

Kakao 로그인 / 로그아웃 (velog.io)

 

우선 처음 구현할 때 위의 블로그 글을 참조하여 구현하였다. 이후 내 입맛에 맞게 만들기 위해 수정을 해보려고 했는데 오픈된 자료는 적고 passport-kakao 공식 문서는 불친절하고 아주 죽을 맛이였다. (그냥 내가 멍청할수도??...)

 

문제

위의 블로그의 글처럼 controller 로 login, redirect,...  그리고 몇 개의 라우터로 카카오 공식 문서가 알려주는 대로  api 콜을 날려서 토큰과 유저 정보를 받아오는데 나는 여기에 kakao Strategy 를 만들어 @UseGuard() 데코레이터로 유효성 검사 등등의 작업을 시켜주고 싶었다. 

카카오 로그인 로직

나는 이제 구현하면서 몇가지 의문이 들었는데 사고의 흐름을 적자면

 

1. redirect 라우터에서 토큰을 받아올 수 있는 코드를 받고 여기서 코드를 날려서 토큰을 받아오고 토큰을 활용해서 유저정보를 받아오는데, 이 시점에서  passport-kakao 를 사용하는 strategy가 활약을 하여 유효성 검사를 해야 하는게 아닌가?

2. 그러면 redirect 시점이 아니라 후의 시점에서 검사를 해야하는데??... 

3. 근데 뒷부분에 @UseGuard를 붙여보니 아예 동작을 안해버리는데???...

4. 그럼 다른 자료들처럼 결국 redirect에 붙이는게 맞는건가?? (맞긴 한데 이유를 모르는 상태)

5. redirect에 붙이니깐 Strategy파일이 redirect 라우터 실행하기 전에 실행되긴 한데, 토큰을 받아올 수 있는 코드를 날리니깐 토큰을 못받아오는데???...

=> ???? 여기서 시간을 정말 많이 소요했다

 

결론

passport-kakao가 어떤 동작을 하는지 정확히 인지하지 못하였기에 이러한 실수를 범했다...

그냥 이놈을 붙여두면 위의 블로그가 했던 카카오 api에 url 던지고 하는 것을 다해준다... 그래서 

5번에서 토큰을 받아오는 코드를 날리니깐 이미 Strategy가 먼저 실행되면서 코드를 사용하여 토큰을 받아오니 만료되서 받아오지 못하고 Bad request가 발생하는 것이였다.

 

controller.ts

참 코드가 간단하쥬?... passport-kakao를 사용하지 않은 내가 참조한 블로그의 글을 보면 얼마나 코드가 간소해진지 알 수 있다.

 

kakaoStrategy.ts

kakaoStrategy 를 보면   

 validate에 accessToken, refreshToken, profile, done 이 있는데

 super 에 설정해준  key 값이랑 callbackurl 으로 코드받아오고 토큰 받아오는걸 다하고 validate에 넣어서 실행시키는 것이다.

그래서 accessToken, refreshToken, profile을 활용할 수 있고 

done(null, user)  으로 user 객체를 내려준다.

 

 

제대로 이해하고 말하는게 맞나 싶긴한데, 나처럼 삽질하고 있는 누군가에겐 도움되는 자료이길 바라며 마친다.