Apple 웹에서 Supabase 로그인

__CAPGO_KEEP_3__

__CAPGO_KEEP_5__

• __CAPGO_KEEP_6__ __CAPGO_KEEP_7__
• __CAPGO_KEEP_8__ __CAPGO_KEEP_9__.

__CAPGO_KEEP_10__

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

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

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

작동 방식

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

1. 초기화: __CAPGO_KEEP_0__를 사용하여 서비스 ID와 현재 페이지 URL을 리다이렉트 URL로 초기화합니다.
2. OAuth Popup: Apple의 OAuth 페이지를 팝업 창으로 열어줍니다.
3. User Authentication: 사용자가 팝업 창에서 Apple과 인증합니다.
4. Identity Token: 사용자 정보가 포함된 JWT 형식의 인증 토큰을 반환합니다.
5. Supabase Authentication: 인증 토큰을 Supabase로 전송합니다. signInWithIdToken()

The helper function automatically detects the web platform and configures everything appropriately.

Important Notes

서비스 ID 설정

• 웹에서는 Apple 서비스 ID (Android와 동일)를 필요로 합니다.
• Apple 개발자 Portal에서 Return URL이 정확하게 설정된 서비스 ID를 구성해야 합니다.
• Apple 개발자 Portal에 도메인이 허용된 도메인 목록에 추가되어야 합니다.

리다이렉트 URL

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

Supabase 클라이언트 ID

In Supabase, configure your Apple provider with:

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

iOS 앱 ID와 Service ID를 Supabase의 Client ID 필드에 모두 입력해야 합니다.

Helper 함수를 사용할 때, Apple Service ID와 일치하는 Helper 함수를 업데이트해야 합니다.

must authenticateWithAppleSupabase update the to match your Apple Service ID: Section titled “Update the Helper Function” clientId Section titled “Supabase Client 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,
  },
});

중요

바꾸기 'your.service.id.here' Apple 서비스 ID (Apple Developer Portal에서 설정한 실제 값)으로 바꾸기.

문제 해결

인증이 실패한 경우:

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

Supabase Apple Login on Web에서 계속 진행하세요

Supabase Apple Login on Web에서 계속 진행 중이라면 Apple Supabase 로그인 인증 및 계정 흐름을 계획하고 연결하려면 @capgo/capacitor-social-login을 사용하여 @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의 구현 세부 정보를 위해 2단계 인증 2단계 인증의 구현 세부 정보를 위해