Supabase Apple Login on Web

사전 조건

이 안내서에서는 Apple Sign-In을 Web에서 Supabase Authentication과 통합하는 방법을 설명합니다. 이 안내서를 사용하기 전에 다음을 완료한 것으로 가정합니다:

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

Implementation

구현 예제는 __CAPGO_KEEP_0__ supabaseAuthUtils.ts 파일에 있습니다. 이 안내서에서는 주요 개념과 사용 방법을 설명합니다.

인증 도우미를 사용하는 방법

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. Initialization: 플러그인은 Service ID와 현재 페이지 URL을 리다이렉트 URL로 초기화합니다.
2. OAuth Popup: Apple의 OAuth 페이지를 팝업 창으로 열람합니다.
3. User Authentication: 사용자는 팝업 창에서 Apple과 인증합니다.
4. 인증 토큰: Apple은 사용자 정보가 포함된 인증 토큰 (JWT) 을 반환합니다.
5. Supabase 인증: 인증 토큰은 Supabase로 전송됩니다. signInWithIdToken()

웹 플랫폼을 자동으로 감지하고 모든 것을 적절하게 구성하는 헬퍼 함수가 있습니다.

중요한 주의사항

: 웹은 Android와 동일한 Apple 서비스 ID가 필요합니다.

• 웹의 도메인은 Apple Developer Portal에 허용된 도메인 목록에 추가되어야 합니다.
• __CAPGO_KEEP_0__
• __CAPGO_KEEP_0__

Redirect 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 함수를 업데이트 하세요

Apple Service ID와 일치하는 Helper 함수를 사용할 때 authenticateWithAppleSupabase Helper 함수를 사용할 때는 업데이트해야 합니다 업데이트해야 합니다 clientId Apple Service ID와 일치하는 Helper 함수를 업데이트 하세요:

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와 일치하는 Helper 함수를 업데이트 하세요 'your.service.id.here' Apple Service ID와 일치하는 Helper 함수를 사용할 때는 실제 Apple Service ID (Apple Developer Portal에서 구성한 동일한 값)으로 대체하세요

문제 해결

인증이 실패한 경우:

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

Supabase Apple 로그인 웹에서 계속

Supabase Apple 로그인 웹을 사용하여 인증 및 계정 흐름을 계획하고 있습니다. 이에 따라 Supabase Apple 로그인 웹을 연결하세요. Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @capgo/capacitor-social-login에서 native capability를 사용하기 위해 @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login 구현 세부 사항에 대해 @capgo/capacitor-passkey @capgo/capacitor-passkey 구현 세부 사항에 대해 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 구현 세부 사항에 대해, 그리고 두 단계 인증 두 단계 인증 구현 세부 사항에 대해.