Supabase Apple Login on Web

사전 요구 사항

이 가이드는 웹에서 Apple Sign-In을 Supabase 인증과 통합하는 데 도움이 될 것입니다. 이미 다음을 완료한 것으로 가정합니다.

• the Apple Login Web 설정
• 그 Supabase Apple Login - 일반 설정.

Implementation

구현은 완전하게 예제 앱의 파일에서 사용할 수 있습니다. 이 안내서는 주요 개념과 사용 방법을 설명합니다. supabaseAuthUtils.ts Authentication Helper를 사용하는 방법

구분 제목

The function handles the entire authentication flow: authenticateWithAppleSupabase The function handles the entire authentication flow:

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);
}

__CAPGO_KEEP_1__

__CAPGO_KEEP_3__

1. __CAPGO_KEEP_4____CAPGO_KEEP_5__
2. __CAPGO_KEEP_6____CAPGO_KEEP_7__
3. __CAPGO_KEEP_8____CAPGO_KEEP_9__
4. __CAPGO_KEEP_10____CAPGO_KEEP_11__
5. Supabase 인증: Supabase로 identity 토큰을 전송합니다. signInWithIdToken()

웹 플랫폼을 자동으로 감지하고 적절히 구성하는 helper 함수가 있습니다.

중요한 주의사항

서비스 ID 구성

• 웹은 Android와 동일한 Apple 서비스 ID가 필요합니다.
• 서비스 ID는 Apple Developer Portal에 올바른 Return URL과 함께 구성되어야 합니다.
• Apple Developer Portal에 도메인이 추가되어야 합니다.

리다이렉트 URL

• 웹에서, 리다이렉트 URL은 자동으로 현재 페이지 URL로 설정됩니다. window.location.href (현재 페이지 URL)
• 이것은 Apple Developer Portal에서 구성된 Return URL 중 하나와 일치해야 합니다.
• Apple Developer Portal에서 URL의 끝에 슬래시가 있는 것과 없는 것 모두를 구성해야 합니다.

Supabase Client ID

Supabase에서 Apple 제공자와 다음을 구성하세요:

• Client ID: Apple 서비스 ID (예: com.example.app.service)

iOS도 함께 사용 중이라면, Supabase의 Client ID 필드에 App ID와 Service ID를 모두 제공해야 합니다 (쉼표로 구분).

Helper Function을 업데이트하세요

Apple 서비스 ID와 일치하는 authenticateWithAppleSupabase helper 함수를 사용할 때 해야 합니다. 업데이트 clientId Apple Service ID를 복사

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

실제 Apple Service ID (Apple Developer Portal에서 구성한 동일한 값)으로

Apple Service ID를 'your.service.id.here' 문제 해결

제목이 "문제 해결"인 섹션

인증이 실패한 경우:

• 서비스 ID 불일치: Apple Developer Portal과 code에서 일치하는 서비스 ID를 확인하세요.
• 리턴 URL이 설정되지 않았습니다.: Apple Developer Portal에서 현재 페이지 URL (끝에 슬래시가 있는 경우 포함)가 올바르게 설정되어 있는지 확인하세요.
• 팝업이 차단되었습니다.: 브라우저 설정을 확인하세요 - 일부 브라우저는 팝업을 기본적으로 차단합니다.
• 허용된 도메인이 아닙니다.: Apple Developer Portal에서 허용된 도메인이 등록되어 있는지 확인하세요.
• Supabase 구성: Supabase Apple 제공자 설정에서 서비스 ID가 올바르게 구성되어 있는지 확인하세요.
• 리뷰 예시 앱 code 참조

Supabase Apple Login on Web에서 계속하기

Capacitor를 사용 중이라면 Supabase Apple Login on Web 인증 및 계정 흐름을 계획하고 연결하려면 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey implementation 세부 정보를 위한 @capgo/capacitor-passkey @capgo/capacitor-native-biometric implementation 세부 정보를 위한 @capgo/capacitor-native-biometric, 그리고 두 단계 인증 implementation 세부 정보를 위한 두 단계 인증.