애플 Apple 로그인

사전 요구 조건

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

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

Implementation

구현 방법은 예제 앱의 파일에서 확인할 수 있습니다. 이 안내서에서는 주요 개념과 사용 방법을 설명합니다. 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);
}

Native Build 방법

Section titled “How It Works”

1. InitializationInitialization
2. OAuth PopupOAuth Popup
3. : Opens a popup window with Apple’s OAuth pageUser Authentication
4. 식별 토큰: Apple은 사용자 정보가 포함된 식별 토큰 (JWT) 을 반환합니다.
5. Supabase 인증: 식별 토큰은 Supabase에 전송됩니다. signInWithIdToken()

도움말 함수

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

: 제목 ‘중요한 주의사항’

• : 제목 ‘서비스 ID 구성’
• 웹은 Android와 동일한 Apple 서비스 ID가 필요합니다.
• 서비스 ID는 Apple Developer Portal에 올바른 Return URL을 설정한 후에 구성해야 합니다.

__CAPGO_REDIRECT_URL__

• 웹에서 리다이렉트 URL은 자동으로 설정됩니다. window.location.href (현재 페이지 URL)
• Apple 개발자 Portal에서 반환 URL 중 하나와 일치해야 합니다.
• URL에尾문자(/)가 있는 경우와 없는 경우 모두 Apple 개발자 Portal에서 설정해야 합니다.

__CAPGO_SUPABASE_CLIENT_ID__

Supabase에서 Apple 제공자에 대해 구성하세요:

• 클라이언트 ID: Apple 서비스 ID (예: com.example.app.service)

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

업데이트 함수를 수정하세요

Apple 서비스 ID와 일치하는 값을 사용해야 합니다. authenticateWithAppleSupabase Apple 서비스 ID를 복사하세요 중요 업데이트 하세요 clientId Apple 서비스 ID와 일치하는 실제 값을 사용하세요 (Apple Developer Portal에서 설정한 동일한 값)

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

Important

Replace 'your.service.id.here' 중요

문제 해결

인증이 실패하면:

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

Supabase Apple 로그인 웹에서 계속

Supabase Apple 로그인 웹을 사용하여 인증 및 계정 흐름을 계획하고 Supabase Apple 로그인 웹을 연결하세요. Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login @Capgo capgo-capacitor 소셜 로그인 @capgo/capacitor-social-login Supabase Apple 로그인 웹을 사용하여 인증 및 계정 흐름을 계획하고 @capgo/capacitor-social-login을 연결하세요. Capgo의 @capgo/capacitor-social-login 구현 세부사항을 위해 @capgo/capacitor-passkey @capgo/capacitor-passkey 구현 세부 사항을 위한 @capgo/capacitor-native-biometric for capgo capacitor-native-biometric 구현 세부 사항에 대해 두 단계 인증 구현 세부 사항에 대한 두 단계 인증의 설명입니다.