[개인프로젝트] 반려동물 동반 식당 정리 사이트 만들기 - 카카오 로그인 연동

오늘은 카카오 로그인 연동이 문제가 생겼었다..

카카오 로그인 연동은 이전에 이미 해두고, 로그인을 실제로 하기에는 진행도에 비해 활용이 되지 않는 부분이라 오늘에서야 구체화를 했었는데 이 부분이 생각보다 문제가 많았다.

아래에 나와 같이 어려움을 겪은 사람들을 위해 공식 문서와 내가 한 방법을 기록으로 남겨둔다.

카카오 로그인 연동 전체 플로우

Kakao Developers 문서

카카오 로그인 에러코드 확인하기

Kakao Developers 문서

 

 

상황 설명

카카오로 로그인을 할 수 있도록 supabase에는 연동을 한 상태였는데 일부가 덜 된 상황이었다.

클라이언트도 정상적으로 연결되고 로그인 창이 뜨지만, 실질적으로 로그인을 하면 에러코드가 출력되는 상황

즉, 로그인이 제대로 안되는데 카카오 개발자 콘솔에서 내가 무엇을 놓친건지 파악이 안됐다.

특히나 사업자 등록번호도 없는 상태였고, 비즈니스 앱으로 전환을 해둔 상태도 아니었어서 뒷 단계도 진행이 될 수 없던 상황이었더라.

예전에는 카카오 개발자 콘솔이 플랫폼 카테고리가 별도로 있었다고 하는데 지금은 전체적으로 개편이 된 상태라서 내가 어디를 보고 뭘 수정해야하는지 LLM도 못잡아내고, 검색을 해도 원하는 내용은 찾아지지 않았다.

 

1단계 : 카카오 개발자 콘솔 설정

먼저 카카오 개발자 콘솔에서 설정이 필요하다.

Supabase Callback URL을 REST API 안에 카카오 로그인 리다이렉트 URI 에 붙여넣기를 해주어야 한다.

그리고 비즈니스 인증 리다이렉트 URI 에 로컬 주소/** (http://localhost:3000/**) 을 붙여넣어 주어야 한다.

바로 아래의 클라이언트 시크릿 코드를 복사해서 준비해주자

 

 

2단계 : supabase 연동

다음으론 DB와 연동이 필요하다.

REST API에서 복사해온 시크릿 코드를 Authentication > Sign In / Providers > Kakao 설정 내의 Client Secret Code 로 붙여주자

그리고 다시 카카오 개발자 콘솔로 돌아가 REST API 키를 복사해 REST API Key에 넣어준다.

 

 

3단계 : 비즈니스 앱 전환

https://developers.kakao.com/docs/ko/app-setting/app#biz-app

Kakao Developers 문서

해당 공식 문서를 참고해서 비즈니스 앱 전환을 하는데, 나처럼 사업자 등록번호가 없는 일반인도 가능한 방법을 알 수 있으니 꼼꼼히 잘 읽어보고 따라하자

 

이렇게 비즈니스 앱으로 전환을 꼭 해야하냐? 라고 하면 사실상 이걸 전환하지 않으면 이메일을 아이디로 저장할 수 있는 권한을 부여받지 못하기 때문에 반드시 진행해야만 한다.

그리고 앱 아이콘을 임의로라도 만들어서 등록을 해야 비즈니스 앱 등록이 마무리 되니 꼭 확인하자!

 

 

4단계 : 동의항목 변경

이제 비즈니스 앱으로 전환을 했으면, 닉네임 프로필 사진, 카카오 서비스 내 친구 목록 정보 외에도 추가로 기능을 신청할 수 있다.

나는 많은 개인정보를 요구하는 서비스를 구상중인 것이 아니기 때문에 정말 기본적으로 식별만 가능하도록 위의 3가지만 확인을 한 상태고, 프로필 사진도 굳이 필요한가 싶어서 추후 그냥 삭제를 할 지, 살릴지를 고민중이다.

여튼 이러면 이제 설정은 모두 다 된거다.

 

모두 나처럼 헤매지 않길 바라며 오늘의 트러블 슈팅 끝~