Supabase Kakao Login 기능 구현하기 - 1 - 카카오 개발자,supabase 설정하기

Supabase 카카오 로그인 공식문서
카카오 Developer
카카오 로그인 버튼 로고

이번에 구현할 기능은 supabase에서 제공하는 카카오 로그인 공식문서만 정독해도 만들기 어렵지 않은 기능이다.

1. 카카오 Developer에 어플리케이션 등록하기

1. 카카오 Developer링크에서 로그인후 카카오 로그인을 사용할 어플리케이션을 등록한다.
2. 앱키 탭에서 RestApi 키를 발급받는다.

2. Supabase에서 app key 등록하기

1. supabase / Authentication / Providers 탭을 연다.
   이곳에서는 auth를 관리하거나 여러 인증 방식을 등록할 수 있다.

• 현재는 이메일 인증기능만 활성화되어 있는 상태임을 알 수 있다.
  

2. 우리는 카카오 로그인을 사용할 것이므로, Kakao를 찾아서 enabled시켜주자.

카카오 developers 홈페이지에서 아래 사진의 설명에 따라 필요한 키들을 발급 받고,
supabase에서 제공하는 redirect URI를 다시 카카오 Developer에 등록하면 된다.

3. 카카오 developers에서 client secret code를 발급 받고 활성화 상태를 비활성 -> 활성으로 변경시켜준다.

4. 카카오 로그인을 활성화 시켜준다.
   

• 카카오 로그인 버튼을 누르면 카카오 서버에 먼저 요청이 가고
• 카카오에서 인증이 완료 된 후 redirect URI로 정보를 전송
• supabase 서버가 회원가입 처리를 완료한다.
• 어떤
  유저인지 파악이 되면 해당 유저의 정보를 받는 code라는 값을 받게된다.

3. kakao 동의항목 설정하기

카카오 로그인 -> 동의항목으로 이동한다.
이곳에서는 supabase에서 요청할 유저정보를 설정할 수 있다.

현재 로그인을 구현하기 위해서는 카카오계정(이메일)이 필수적인데 현재는 권한이 없는 상태이다.

따라서 이메일에 대한 권한을 가지려면 몇가지 설정을 추가적으로 진행해줘야 한다.

1. 카카오 로그인 동의항목에서 개인정보 동의항목 심사신청 버튼을 클릭한다.

2. 신청 자격 확인에서 비즈앱 전환 버튼을 누른다.
   현재는 아마 비즈앱이 아니여서 아이콘을 등록해야 한다. (아무 사진이나 등록 해준다.)

3. 사업자 정보 등록 화면에 다시 돌아가면 개인 개발자 비즈앤 전환이라는 버튼이 새로 생성되게 되는데 여기서 이메일 필수 동의 버튼을 눌러준다.

이 단계에서 모달창이 뜨지않고 2차 인증을 설정하라고 나온다면, 개인 카카오 계정이 아닐 수 있어서 추가적으로 인증과정을 진행히주면 된다.

여기까지 완료 된 후 다시 카카오로그인 동의항목으로 돌아간다.

4. 서비스에서 필요한 항목이 있다면 이제 동의단계 옵션을 설정해주면 된다.

이전까지 불가능했던 이메일 권한이 이제 설정된것을 볼 수 있다.😀