Supabase Apple 로그인 - 일반 설정

개요

이 안내서를 통해 Apple Sign-In을 Supabase 인증과 통합하는 방법을 배울 수 있습니다. Apple Sign-In은 iOS, Android 및 Web 플랫폼에서 작동하는 안전하고 개인 정보 보호를 위한 인증 방법을 제공합니다.

필요 조건

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

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

2. 스타일 가이드를 읽어보세요 Apple OAuth 인증을 설정하는 안내서 대상 플랫폼에 대한 Apple OAuth 인증을 설정하는 데 필요한 플랫폼별 안내서를 따르세요:

3. 안드로이드 설정

   • iOS 설정
   • 웹 설정
   • Apple Login 일반 설정

   참고

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

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

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

1. Go to your Supabase 대시보드

2. 프로젝트

   

3. Supabase 대시보드 Authentication 메뉴

   

4. 클릭하여 Providers 탭

   

5. Supabase 제공자 Apple 제공자

   

6. 활성화 Apple 제공자

   

7. 클라이언트 ID 구성:

   주의사항

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

   

8. 클릭하여 Save 버튼

   

   주의사항

   당신은 필요하지 않습니다. 설정 Secret key (for OAuth)우리는 Apple 로그인을 처리하기 위한 커스텀 백엔드 구현을 제공합니다.

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

인증 도우미를 사용합니다.

Apple Sign-In을 Supabase와 함께 완전하게 구현하는 데 사용되는 도우미 함수가 포함됩니다. authenticateWithAppleSupabase() Apple Sign-In을 Supabase와 함께 완전하게 구현하는 데 사용되는 도우미 함수는 다음과 같습니다.

• Apple Sign-In을 플랫폼에 맞게 초기화합니다.
• 인증 흐름을 처리합니다 (iOS에서 네이티브, Android/Web에서 OAuth 리다이렉트)
• Apple에서 사용자 식별 토큰을 추출합니다.
• Supabase에 사용자 식별 토큰으로 로그인합니다.

완전한 구현

완전한 구현은 예시 앱의 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 사용)
• Android: 백엔드 에지 함수를 사용하는 OAuth 리다이렉트 흐름 사용 (서비스 ID 필요)
• 웹: OAuth 팝업 흐름을 사용합니다 (Service ID 및 현재 페이지 URL을 리다이렉트로 필요합니다)

Apple에서 제공하는 식별 토큰을 반환하는 함수는 Supabase와 인증하기 위해 사용됩니다 supabase.auth.signInWithIdToken().

Supabase Apple 로그인 - 일반 설정에서 계속하기

Supabase Apple 로그인 - 일반 설정을 사용하여 인증 및 계정 흐름을 계획하고 있다면 이를 Supabase Apple 로그인 - 일반 설정과 연결하세요 Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login @Capgo capgo-capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-passkey 구현 세부 사항에 대한 @capgo/capacitor-passkey @capgo/capacitor-native-biometric 구현 세부 사항에 대한 @capgo/capacitor-native-biometric, 그리고 두 단계 인증 구현 세부 사항에 대한 두 단계 인증.