웹에서 Supabase Apple 로그인

GitHub

이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 프롬프트를 복사하세요.

사전 요구사항

이 가이드는 웹에서 Apple Sign-In을 Supabase Authentication과 통합하는 데 도움을 줍니다. 다음 단계를 이미 완료했다고 가정합니다:

해당 Apple Login Web 설정
해당 Supabase Apple Login - 일반 설정.

구현 방법

전체 구현 코드는 예제 앱의 supabaseAuthUtils.ts 파일에서 확인할 수 있습니다. 이 가이드에서는 핵심 개념과 사용 방법을 설명합니다.

Authentication Helper 사용하기

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

작동 원리

Web 환경에서 Apple Sign-In은 다음과 같은 OAuth 팝업 흐름을 사용합니다:

초기화: 플러그인이 Service ID와 현재 페이지 URL을 리다이렉트 URL로 사용하여 초기화됩니다.
OAuth 팝업: Apple OAuth 페이지가 포함된 팝업 창이 열립니다.
사용자 인증: 사용자가 팝업에서 Apple을 통해 인증을 진행합니다.
Identity Token: Apple이 사용자 정보가 담긴 identity token(JWT)을 반환합니다.
Supabase 인증: identity token이 다음을 통해 Supabase로 전송됩니다. signInWithIdToken()

헬퍼 함수가 웹 플랫폼을 자동으로 감지하여 모든 설정을 적절하게 구성합니다.

주의사항

Service ID 설정

웹 환경에서는 Apple Service ID가 필요합니다 (Android와 동일)
Apple Developer Portal에서 올바른 Return URL을 사용하여 Service ID를 설정해야 합니다
Apple Developer Portal의 허용된 도메인(allowed domains)에 도메인이 추가되었는지 확인하세요

리다이렉트 URL

웹의 경우, redirect URL은 자동으로 다음으로 설정됩니다: window.location.href (현재 페이지 URL)
Apple Developer Portal에 설정된 Return URL 중 하나와 일치해야 합니다
Apple Developer Portal에 슬래시(/)가 포함된 URL과 포함되지 않은 URL을 모두 설정했는지 확인하세요

Supabase Client ID

Supabase에서 Apple provider를 다음과 같이 설정하세요:

클라이언트 ID: Apple Service ID (예: com.example.app.service)

iOS도 함께 사용하는 경우, Supabase의 Client ID 필드에 App ID와 Service ID를 모두 입력해야 합니다 (쉼표로 구분).

Helper 함수 업데이트

다음의 authenticateWithAppleSupabase helper function을 사용할 때, 해야 합니다 업데이트 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,
  },
});

문제 해결

인증에 실패하는 경우:

Service ID 불일치: Apple Developer Portal과 code의 Service ID가 일치하는지 확인하세요
Return URL이 설정되지 않았습니다: 현재 페이지 URL(끝에 슬래시 포함 및 미포함)이 Apple Developer Portal에 설정되어 있는지 확인하세요
팝업이 차단되었습니다: 브라우저 설정을 확인하세요 - 일부 브라우저는 기본적으로 팝업을 차단합니다
허용되지 않은 도메인입니다: Apple Developer Portal의 허용 도메인 목록에 해당 도메인이 추가되었는지 확인하세요
Supabase 설정: Supabase Apple provider 설정에 Service ID가 올바르게 구성되었는지 확인하세요
다음을 참고하세요: 예제 앱 code 참고용

사용 중이라면 웹에서 Supabase Apple 로그인 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @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단계 인증의 구현 세부 사항에 대해서는