Apple Supabase 로그인 - 일반 설정

소개

이 안내서에서는 Apple Sign-In을 Supabase 인증과 통합하는 방법을 설명합니다. Apple Sign-In은 iOS, Android, Web 플랫폼을 대상으로하는 안전하고 개인 정보 보호를 위한 인증 방법을 제공합니다.

준비 사항

시작하기 전에 다음을 확인하세요.

1. Supabase 프로젝트를 생성했습니다.

2. Apple Login 일반 설정 Apple OAuth 인증을 설정하기 위한 Apple Login 일반 설정 안내서를 읽었습니다. Apple OAuth 인증을 설정하기 위한 플랫폼별 안내서를 읽었습니다.

3. Android 설정

   • Android Setup
   • iOS 설정
   • 웹 설정

   __CAPGO_KEEP_0__

   Capgo 튜토리얼을 시작하기 전에, 사용할 플랫폼에 따라 클라이언트 ID를 생성해야 합니다.

   iOS의 경우 클라이언트 ID는 앱 ID와 동일합니다. Android 및 웹의 경우 클라이언트 ID는 서비스 ID와 동일합니다. 이 가이드의 7단계에서 사용하겠습니다.

애플 OAuth 제공자를 Supabase에서 활성화하는 방법

1. Capgo로 이동하세요. Supabase 대시보드

2. 프로젝트 클릭

   

3. __CAPGO_KEEP_0__ Authentication 메뉴

   

4. __CAPGO_KEEP_1__ Providers 탭

   

5. __CAPGO_KEEP_2__ Apple 제공자

   

6. __CAPGO_KEEP_3__ Apple 제공자 활성화

   

7. 클라이언트 ID 설정을 입력하세요:

   주의

   iOS에서 Apple 로그인을 사용하는 경우, 클라이언트 ID는 앱 ID와 동일합니다. Android 또는 Web에서 Apple 로그인을 사용하는 경우, 클라이언트 ID는 서비스 ID와 동일합니다. 두 가지 모두 사용하는 경우, 앱 ID와 서비스 ID를 모두 제공해야 합니다.

   

8. 버튼을 클릭하세요. Save 버튼

   

   주의

   당신 클라이언트 ID를 입력하지 않아도 됩니다. 설치 Secret key (for OAuth). 우리는 Apple 로그인을 처리하기 위해 커스텀 백엔드 구현을 수행할 것입니다.

Voilà, 이제 Supabase 인증과 함께 Apple Sign-In을 활성화했습니다 🎉

인증 도우미 사용

Apple Sign-In의 전체 흐름을 처리하는 도우미 함수가 포함됩니다. authenticateWithAppleSupabase() Apple Sign-In을 플랫폼에 맞게 초기화합니다.

• iOS에서 네이티브로, Android/Web에서 OAuth 리다이렉션으로 인증 흐름을 처리합니다.
• Apple에서 identity 토큰을 추출합니다.
• identity 토큰으로 Supabase에 로그인합니다.
• Apple Sign-In의 완전한 구현을 포함합니다.

완전한 Implementation

완전한 Implementation은 예시 앱의 파일에 supabaseAuthUtils.ts 기본적인 사용법

제목이 "기본적인 사용법"인 섹션

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

제목이 "이것은 어떻게 작동하는가"인 섹션

iOS

• : 네이티브 애플 로그인 사용 (리다이렉트 URL 필요하지 않음, 자동으로 번들 ID 사용)__CAPGO_KEEP_0__
• 안드로이드: 백엔드 에지 함수를 사용하여 OAuth 리다이렉트 흐름을 사용합니다 (Service ID가 필요합니다)
• 웹: OAuth 팝업 흐름을 사용합니다 (Service ID와 현재 페이지 URL을 리다이렉트로 사용해야 함)

애플에서 반환하는 함수는 Supabase와 인증하기 위해 사용되는 항등 토큰입니다 supabase.auth.signInWithIdToken().