카카오 로그인 API 프론트 엔드로부터 인가코드 받아오기

작년에 진행한 캘린더 앱에서는 로그인 api를 구현할 때 프론트 엔드로부터 인가 코드가 아닌

인가 코드로 카카오 서버로부터 생성한 토큰을 프론트 엔드에서 받아서 카카오 로그인을 구현했다.

 

원래 작동 방식은 다음과 같다.

 

하지만 이번 주식 프로젝트에서는 로그인 api를 구현할 때 프론트 엔드로부터 인가 코드를 받고

백엔드에서 인가코드로 토큰을 얻은 다음 그 토큰으로 사용자 정보를 얻어왔다.

 

일단 작년에 프론트엔드로부터 인가 코드가 아닌 토큰을 받아온 큰 이유 중 하나는

카카오 developers 계정에서 다음과 같은 4가지의 키를 이용해야 하는데

네이티브 앱 키, REST API 키, JavaScript 키, Admin 키

이 4가지의 키를 서버에서 사용 안 해도 되기 때문이었다. ( 단지 편의를 위해서 )

하지만 보안 문제도 있다고 하여 이번 기회에 한번 인가 코드를 서버에서 받아서 하는 식으로 했다.

그렇게 되면 같은 계정의 저 4가지 키를 사용해야  한다.

따라서 프론트 엔드가 kakao developers 에서 계정을 만들기로 하고

서버 측에서는 프론트 엔드가 발급받은 4가지 키 중에서 rest api 키를 프론트 엔드에게 물어봐야 한다.

 

이렇게 해서 시도를 했지만 문제가 있었는데 해결했다.

프론트엔드가 인가 코드를 받을 때 사용한 redirect url은 프론트엔드 측에서 인가코드를 이용하여 토큰을 발급 받을 때 넣는 redirect url에다가도 넣어준다.

그리고 그 인가코드를 서버에게 보내준 다음 서버도 그 인가코드를 사용해서 토큰을 발급받아야 하는데

이때 redirect url도 프론트엔드가 썼던 redirect url로 적어줘야 한다.

나 같은 경우는 redirect url를 서버에서 진행하고 있는 그 url를 적어줬더니 계속 에러가 났다.

꼭 프론트엔드와 백엔드가 같은 redirect url를 사용하도록 하자.