👩🏻‍💻 이 게시글은 설정 방법만을 설명합니다. supabase의 OAuth의 동작에 대해서는 해당 게시글을 참고해주세요!

🌱 Kakao OAuth Login

OAuth(오픈 인증)는 사용자가 제3자 애플리케이션(supabase 기반 앱)에서 인증할 수 있게 해주는 표준 프로토콜입니다. Kakao OAuth는 사용자가 별도의 회원가입 없이도 Kakao 계정을 사용해 애플리케이션에 로그인할 수 있도록 합니다.

• Kakao OAuth 설정을 위해서는 Kakao Developer 사이트에서 카카오 로그인 활성화 설정, Redirect URI 등록, 플랫폼 등록, 동의항목은 반드시 설정해야 합니다.

• 필요한 경우, OpenID Connect 활성화와 간편가입 설정을 설정할 수 있습니다.

☀️ 카카오 로그인 설정

카카오 개발자 계정 - 앱 생성 및 구성

📍 앱 생성 • 구성

앱을 생성•구성함으로써 Kakao가 OAuth 인증 요청을 처리할 때 필요한 기본 정보를 제공하는 과정입니다. 등록을 통해 인증 요청에 사용되는 고유 client ID를 받습니다.

• Kakao Developer 사이트에서 로그인을 하고 My Application(내 애플리케이션)으로 이동합니다.

• 콘솔에서Add an application(애플리케이션 추가하기)버튼을 눌러 앱 정보를 입력하고 Save(저장)해 앱을 생성합니다.

테스트 용 API 생성

• 사업자 번호와 도메인 주소가 없다면, 개발하는 동안 테스트앱을 생성해 개발할 수 있습니다. 카카오비즈니스 통합 서비스 약관 동의를 통해 사업자 번호 없이 개발을 할 수 있습니다.
  • 카카오 2단계 인증이 설정되어 있지 않다면 설정해야 할 수도 있습니다.
    
• 설정을 마친 후 서비스 약관을 동의하고 테스트 앱을 생성합니다.
  

if...

• 도메인 주소 혹은 Android / IOS 패키지명이 있다면 앱 설정 > 플랫폼에서 애플리케이션이 동작하는 플랫폼을 등록합니다.
• 웹 기반 애플리케이션에서 Kakao OAuth를 사용하므로 설정하는 것이 중요합니다.

REST API 키 확인 • 등록

📍 REST API KEY

• 앱을 생성하면 여러 종류의 앱 키가 생성되는 데, 그 중 REST API 키는 Supabase와 Kakao API간 통신시에 사용하는 인증 수단입니다.
• REST API 키로 supabase는 Kakao로부터 인증코드를 받아 액세스 토큰을 요청할 수 있습니다. 해당 키가 올바르지 않으면 호출이 실패합니다.

• Product settings(제품 설정)> App Keys(앱 키)에서 API를 호출할 때 사용하는 키(REST API key)를 확인할 수 있습니다.
  • API 키는 외부에 노출되지 않도록 주의해야 합니다.
  
• 해당 REST API key를 복사하여 Supabase project dashboard > Authentication > Providers 섹션의 'Kakao'을 클릭해 아코디언을 열고 REST API Key에 붙여넣습니다.
  

Redirect URI 추가

📍 Redirect URI

• 사용자가 Kakao 계청을 통해 로그인하고 권한을 승인한 후, 서버는 이 URI로 로그인 과정에서 요청한 인증 결과(인증 코드)와 토큰을 보냅니다. Supabase는 이 인증 코드를 사용해 액세스 토큰을 요청합니다.
• Kakao가 인증 후에 어떤 애플리케이션 페이지로 돌아갈 지를 결정하므로 'Kakao Developer 콘솔'과 'Supabase 설정'에서 주소가 일치해야 합니다.
• 올바르게 등록하지 않은 경우 KOE006 에러(인증 오류 에러)가 발생합니다.
• 로그인 후 랜딩페이지, 추가 정보 입력 페이지 등 상황에 맞는 페이지로 이동하도록 최대 10개까지 등록할 수 있습니다.
• 로그인 과정 중 특정 정보를 유지하거나 전달하려면 state 파라미터를 활용합니다.

• REST API key를 설정한 Supabase 페이지에서 Callback URL을 복사합니다.

• Product settings > Kakao Login > Redirect URI 에 복사해둔 Callback URL를 붙여넣어 줍니다.
  

Client-Secret 생성 & 활성화

📍 Client-Secret

• OAuth 인증 과정에서 애플리케이션을 식별하고, 요청이 신뢰할 수 있는 애플리케이션에서 온 것임을 증명하는데 사용됩니다.
• supabase가 Kakao로부터 인증 코드를 받아 액세스 토큰을 요청할 때, 미리 발급받은 Client-secret을 파라미터에 포함시켜 함께 전송한 경우에만 성공 응답하도록 설정해 인증의 신뢰성을 높여 애플리케이션의 안정성을 강화하는 보안 기능입니다.

• Product settings > Kakao Login 에서 스위치를 클릭해서 활성화해줍니다.
  

• Security(보안)으로 이동해 generate code(코드 생성)을 클릭해 Client Secret를 생성합니다.
  

• Activation state(활성화 상태)에서 활성화합니다. 발급된 클라이언트 시크릿 코드는 활성화 상태를 사용함으로 변경해야 적용됩니다.
  

• 생성한 Client Secret 코드를 복사하여 supabase project dashboard > Authentication > Providers 에서 Kakao에 Client Secret Code에 입력하고 save합니다.
  

• 코드를 갱신하거나 유출이 의심되는 상황에서 재발급으로 새 클라이언트 시크릿 코드를 발급받을 수 있습니다. 재발급 받으면 운영 중인 서비스라면, 기존 코드를 사용한 토큰 발급 요청이 모두 실패하게 되므로 운영 중인 경우에는 주의해야 합니다.

사용자 동의 항목 설정

📍 사용자 동의 항목

• 사용자가 인증되고, 사용자 정보 중 어떤 정보에 접근할 수 있는지 정의하고, 설정된 동의 항목에 따라 로그인 시에 Kakao가 접근 권한을 요청합니다.
• 사용자가 동의한 항목에 한해서만 애플리케이션이 해당 정보를 얻을 수 있습니다. 동의하지 않으면 Supabase는 사용자 정보를 제대로 수신할 수 없습니다.

• Kakao Login > Consent Items(동의 항목)에서 범위를 설정합니다. 각 항목별 '설정'으로 사용 여부와 동의 단계를 설정할 수 있습니다.

• 'account_eamil(카카오계정)', 'profile_image(프로필 사진)', 'profile_nickname(닉네임)'은 기본적으로 설정하여야 오류없이 사용할 수 있습니다.
  

☀️ 간편 가입 설정

간편가입을 사용하면 Kakao Login을 통해 회원가입까지 완료할 수 있습니다.

• 서비스 약관이 1개 이상이어야 활성화를 할 수 있습니다. '서비스 약관 추가' 버튼을 눌러 약관을 추가합니다.
• 추가한 뒤에 사용여부에서 OFF → ON 으로 스위치를 바꿔줍니다.
  

☀️ OpenID Connect 활성화 설정

OepnID Connect(OIDC)
사용자의 로그인을 더 안전하게 처리할 수 있는 표준 인증 프로토콜입니다.
활성화하면 사용자 인증 정보가 담긴 ID토큰을 액세스 토큰과 함께 발급받고, 표준 규격을 준수한 형태의 사용자 정보를 제공받을 수 있습니다.

• OpenID Connect를 활성화하면 카카오 로그인 시 액세스 토큰과 ID토큰을 함께 발급받을 수 있습니다. Kakao Login 에서 OpenID Connect를 활성화 합니다.
  

---

🌈 Reference

• supabase docs
• kakao login 설정하기