Found:er 카카오 로그인 (ft. 삽질기)

결론 : 카카오 로그인을 구현하고자 한다면 카카오 공식 문서를 따라르자❗

이번 프로젝트에서는 카카오 로그인에서 인가코드를 받는 과정,인가코드를 통해 토큰을 받는 과정,토큰을 이용해 자체 토큰을 만드는 과정까지 전부 백엔드 분들께서 담당하시기로 하면서 작업을 시작했다!

삽질 시작

하지만 완성된 로그인 API를 연결하는 과정에서 문제가 생기게 되었다!

1. 자체 로그인 API를 호출했을 때 로그인창이 뜨지 않는 문제가 발생했다.

카카오 공식 문서에서는

/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code

를 클릭하면 로그인 창이 뜨고 => 리다이렉트 url에서 인가코드를 발급받는 형태이다.

하지만 우리는 자체 로그인 API에서 위의 인가코드를 발급받는 부분을 처리하고 있었기에 API를 호출하면 로그인 창이 뜰거라 생각했지만 이상한 cors error...allow-origin 과 관련된 문제

Access to XMLHttpRequest at 'https://accounts.kakao.com/login?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttps%253A%252F%252Ffound-er.co.kr%252Fapi%252Fauth%252Fkakao%252Fsignin%252Fcallback%26through_account%3Dtrue%26client_id%3Dbc422e96c0ca239a21e64daadbfc9161' (redirected from '백엔드api') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

가 뜨게 되면서👿 삽질을 시작했다.

해결 : redirect url 설정

문제는 리다이렉트 url을 자체 callback api로 설정해야 한다고 했지만 그렇게 되면 프론트 개발 환경에서는 제대로 로그인 되어도 확인할 수 없었던 상황이었다.

❗ 리다이렉트 url은 반드시 프론트 개발 환경 으로 만들고 추후에 배포할 때 실제 도메인을 가진 url로 바꾸어야 한다.

이렇게 해야 프론트 에서 로그인이 잘 되었는지 확인할 수 있다!

그래서 삽질 끝에 카카오 개발자 톡에 문의 드린 결과 프론트에서는 인가코드를 발급받는 과정을 생략할 수 없다는 답변을 듣고

백엔드에서 만들어주신 로그인 api를 쓰는 대신에 카카오 공식 문서 를 따라 프론트에서 인가코드를 발급받고 프론트 개발 환경으로 돌린 로컬 3000으로 돌린 리다이렉트 url에서 인가코드를 추출해서 callback api에 인가코드를 쿼리 스트링을 넣어서 accesstoken을 받을 수 있도록 했다.......👏

카카오 공식문서가 짱이다.

카카오 로그인을 처음 시도하게 되면서 어떻게 문제를 해결해야 될 지 몰라 많이 혼란스러웠다..... 혹시라도 이런 문제를 겪고 있다면 카카오 공식문서를 다시 따라한다면 문제가 해결될 것 입니다 ^_^