AI 감사일기 서비스, 기획부터 개발까지4.카카오 OAuth 인증 추가..실패..

아래 개발 히스토리를 요약하여 결론부터 말하자면, "Error getting user email from external provider"로 인해 카카오 로그인 기능 구현 추가는 실패했다.  easynext 를 사용해서 "easynext auth"를 하고, 카카오 연동을 위해 "easynext auth kakao"도 해봤다.

 

카카오 로그인 기능을 위해선 카카오로부터 카카오계정(이메일)을 제공받아야하는데, 카카오측에 따로 추가 동의항목을 신청해야한다.

그럴려면 비즈앱으로 전환하고, 비즈니스 정보 심사까지 필요하다.

 

기획 

굳이 회원가입을 이메일로 인증받아서 해야되나?

그냥 간편하게 카카오 로그인 기능은?

 

개발 

Supabase에서 카카오 OAuth 연동도 지원해준대! 카카오 프로필로 정보를 자동으로 연동한다?

지금은 이메일을 활성화 시켜서 이메일로 회원가입-이메일인증-로그인 하는 방식이였다.

 

Authentication > Providers > Kakao 활성화

 

카카오 부분을 누르면, 이렇게 3개의 입력창이 보인다.

• RESTAPI KEY : 카카오에서 발급받아서 입력필요
• Client Secret Code: 카카오에서 발급받아서 입력필요
• CallBack URL: 카카오에 이 URL 등록필요 (`https://your-project.supabase.co/auth/v1/callback` 이런식)

 

 

카카오와 연결은 어떻게 하지? 

 

1. 카카오 개발자이동

https://developers.kakao.com/

 

2. 내 앱 생성하기

 

3. RESTAPI KEY 등록 : 카카오의 REST API 키를 -> Supabase의 REST API 키에 등록

카카오의 앱 > 일반 > 앱키 에서 REST API  확인할수 있음 

 

 

4. 카카오 로그인, OpenID Connect 활성화

 

5. CallBack URL 등록

Supabase의 Cabllback URL을 -> 카카오의 리다이렉트 URI에 등록

리다이렉트 URI은 카카오 OAuth 2.0을 기반으로 하는 로그인 핵심요소.

나의 서비스에서 카카오로 로그인을 한다고 하면,이 URL로 호출하고 카카오에서 인가코드랑 토큰을 전달해준다.

 

 

6. Client Secret Code 발급 및 등록

카카오 Client Secret 키를 -> Supabase의 Client Secret 키에 등록

 

7. 카카오 로그인 버튼, OAuth인증 추가 

하지만 실패를 했다..

 

Supabase 대시보드의 Authentication > Logs에서 로그인 시도 로깅을 확인해봤다.

302에러로 리다이렉트 관련 문제였다.

 

 

8.잘못된 요청 (KOE205) 트러블슈팅

디벨로퍼스 동의항목에 설정하지 않은 scope을 scope 파라미터로 요청해서 발생하는 문제였다.

 

카카오 연동 로그인을 통해 제공받을수 있는 개인정보는 기본적으로 닉네임과 프로필사진이라, 

실제로 코드에서 로그인 요청을 할때 이렇게 scope 파라미터에 profile_nickname profile_image 요렇게 넣는다.

그런데 현재 사용안함 상태가 되어 있었던 것이다.

커서가 똑똑하게 scope에 닉네임과 이미지 둘다 지정해줬지만, 최종적으로 profile_image는 필요 없어서 삭제했다!

 

그래서 로그인할때 동의항목에 대한 설정을 해줘야했다. 

카카오에서 로그인을 해줌으로써 제공해주는 프로필 사진은 굳이 필요없을것 같아서 사용하지 않았고, 닉네임만 필수 동의를 했다. 

 

그러면 로그인할때, 이렇게 동의화면을 미리 볼수도 있었따.

 

 

결국에 카카오톡 로그인 연동을 할때 닉네임만 사용하기로 기획을 수정한 셈이다.

 

9. 결국 이메일을 가지고와야하는건가?ㅠㅠ

 

아까와 같이 잘못된 요청 (KOE205)이라는 에러는 안나왔지만, 계속해서 로그인에 실패하고 있었다....

콘솔에 로깅도 찍어봤는데 아예 세션을 가지고 오지 못하는거 같았다. 

 

로컬에서 리다이렉션이 실패하는건가 싶어서 로컬에서 콜백uri도 카카오 리다이렉트 uri에 추가했다.

로깅을 찍어보니 계속해서 이메일을 가지고 올수가 없다고 한다!ㅜㅜㅜ

 

결국 카카오 로그인을 통해 이메일을 꼭 가지고와야하는건가?ㅜㅠ

그렇다면 추가 동의항목 신청을 해야하는데...

그러면 사업자 등록이 필요한데..

 

 

+추가) 10.easynext로 카카오 로그인 연동 추가 = 실패

추가로 지금 카카오톡 로그인 연동 기능을 구현을 순식간에 해주는 오픈소스를 발견했다. (커서맛피아님이 개발하신건가보다)

easynext CLI를 다운로드 받아서 "easynext auth"를 하고, 카카오 연동을 위해 "easynext auth kakao"를 명령했다. 

 

그러면 지금까지 내가 작업햿던 카카오 인증관련 로직이 추가되고, 환경변수는 내가 작업했던 내용이였다.

그래서 로그인 버튼을 추가해서 확인해봤지만 역시나  "Error getting user email from external provider"

 

심지어 supbase의 이메일과 충돌되는 부분이 있을까 싶어 supbase에서 Email로 로그인하는걸 해제하기도 했지만 역시나였다..

 

+결론. 이메일 동의항목 추가하기 위해 비즈앱 전환  필요

결국 아무래도 카카오 로그인을 통해 이메일을 제공받기 위해

추가 동의항목 신청을 해야할것 같다.. 비즈앱으로 전환하고, 비즈니스 정보 심사가 필요하다.

 

 

참고 

 

https://github.com/easynextjs/easynext

GitHub - easynextjs/easynext: Easiest way to start Next.js project 🍪

 

https://developers.kakao.com/docs/latest/ko/kakaologin/prerequisite#kakao-login-redirect-uri

 

Kakao Developers