웹에서 Supabase Apple 로그인

설치 전 조건

이 안내서에서는 Apple Sign-In을 Web에서 Supabase Authentication과 통합하는 방법을 설명합니다. 다음 조건이 이미 완료된 것으로 가정합니다:

• Apple Login Web 설정 Supabase Apple Login - 일반 설정
• Implementation Implementation.

완전한 구현은 예제 앱의

인증 도우미 사용 __CAPGO_KEEP_0__ supabaseAuthUtils.ts __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

The authenticateWithAppleSupabase 함수는 전체 인증 흐름을 처리합니다:

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

How It Works

웹에서 Apple Sign-In은 OAuth 팝업 흐름을 사용합니다:

1. 초기화: 플러그인은 Service ID와 현재 페이지 URL을 리다이렉트 URL로 초기화합니다.
2. OAuth 팝업: Apple의 OAuth 페이지를 표시하는 팝업 창을 엽니다.
3. 사용자 인증: 사용자가 애플에 인증합니다.
4. 식별 토큰: 애플에서 사용자 정보를 포함하는 식별 토큰 (JWT) 을 반환합니다.
5. Supabase 인증: 식별 토큰을 Supabase로 전송합니다. signInWithIdToken()

도움말 함수는 자동으로 웹 플랫폼을 감지하고 모든 것을 적절하게 구성합니다.

중요한 주의사항

서비스 ID 구성

• 웹은 Android와 동일한 Apple 서비스 ID가 필요합니다.
• 서비스 ID는 Apple Developer Portal에서 올바른 Return URLs과 함께 구성되어야 합니다.
• 애플 개발자 포털에 등록된 도메인이 있는지 확인하세요.

리다이렉트 URL

• 웹에서 리다이렉트 URL은 자동으로 현재 페이지 URL로 설정됩니다. window.location.href (현재 페이지 URL)
• 애플 개발자 포털에 등록된 Return URL 중 하나와 일치해야 합니다.
• 애플 개발자 포털에서 URL에 슬래시가 있는지 없는지 모두 설정해야 합니다.

Supabase Client ID

Supabase에서 Apple 제공자와 Apple Service ID (예를 들어,

• Client ID: Your Apple Service ID (e.g., com.example.app.service)

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

Helper 함수를 업데이트하십시오.

helper 함수를 사용할 때, authenticateWithAppleSupabase helper 함수를 사용할 때, helper 함수를 사용할 때, helper 함수를 업데이트하여 Apple Service ID와 일치하십시오. clientId 클립보드에 복사하십시오.

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

대체하십시오.

__CAPGO_KEEP_0__ 'your.service.id.here' 실제 Apple 서비스 ID (Apple Developer Portal에서 설정한 동일한 값)과 함께 사용하세요.

문제 해결

인증이 실패한 경우:

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