Supabase Apple Login on Web

GitHub

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

사전 요구 사항

이 가이드는 Apple Sign-In을 Supabase 인증에 통합하는 데 도움이 될 것입니다. Web에서 이미 다음을 완료한 것으로 가정합니다:

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

Implementation

완전한 implementation은 example app의 supabaseAuthUtils.ts 파일에 있습니다. 이 가이드는 주요 개념과 사용 방법을 설명합니다.

인증 Helper를 사용하는 방법

The authenticateWithAppleSupabase function handles the entire authentication flow:

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

On Web, Apple Sign-In uses an OAuth popup flow:초기화
: The plugin is initialized with your Service ID and the current page URL as the redirect URLOAuth Popup
: Opens a popup window with Apple’s OAuth page: 사용자는 애플 팝업에서 인증합니다.
Identity Token: 애플은 사용자 정보를 포함하는 JWT 형태의 인증 토큰을 반환합니다.
Supabase 인증: 인증 토큰은 Supabase에 전송됩니다. signInWithIdToken()

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

중요한 참고 사항

서비스 ID 구성

웹은 Android와 동일한 Apple 서비스 ID가 필요합니다.
Apple Developer Portal에서 Return URLs이 정확하게 구성된 서비스 ID가 필요합니다.
Apple 개발자 Portal에 등록된 도메인이 있는지 확인하세요.

리다이렉트 URL

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

Supabase Client ID

Client ID

: Apple Service ID (예: Client ID com.example.app.service)

iOS를 사용 중이라면 Supabase의 Client ID 필드에 App ID와 Service ID를 모두 입력해야 합니다.

__CAPGO_KEEP_0__

Helper Function을 업데이트 하세요 authenticateWithAppleSupabase helper function을 사용할 때, helper function을 사용할 때, helper function을 사용할 때, clientId helper function을 사용할 때,

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

문제 해결

인증이 실패하면:

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

Supabes Apple 로그인 웹을 사용하여 인증 및 계정 흐름을 계획하고 연결하려면 Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login Capgo에서 @capgo/capacitor-social-login 구현에 대한 세부 정보 @capgo/capacitor-passkey Capgo에서 @capgo/capacitor-passkey 구현에 대한 세부 정보 @capgo/capacitor-native-biometric Capgo에서 @capgo/capacitor-native-biometric 구현에 대한 세부 정보, 그리고 두 단계 인증 Capgo에서 두 단계 인증 구현에 대한 세부 정보