Supabase Apple Login on Web

설치 지시어를 복사하여 이 플러그인의 설치 단계와 전체 마크다운 가이드를 포함합니다.

필수 조건

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

Apple Login Web 설정 Supabase Apple Login - 일반 설정
Implementation Implementation 섹션.

완전한 구현은

파일에 있습니다. 이 안내서에서는 주요 개념과 사용 방법을 설명합니다. 인증 도우미 사용 supabaseAuthUtils.ts file. This guide explains the key concepts and how to use it.

Using the Authentication Helper

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

초기화

: 플러그인은 Service ID와 현재 페이지 URL을 리다이렉트 URL로 초기화합니다.OAuth 팝업
: Apple의 OAuth 페이지를 표시하는 팝업 창을 열어줍니다.사용자 인증
Initialization: 사용자는 애플 팝업에서 인증합니다.
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 (예: : Your Apple Service ID (e.g., com.example.app.service)

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

__CAPGO_KEEP_0__

Helper Function을 업데이트 하세요 authenticateWithAppleSupabase Helper Function을 사용할 때는 Apple Service ID와 일치하는 값을 입력해야 합니다. 클립보드에 복사 중요 clientId 중요

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에서 허용된 도메인이 등록되어 있는지 확인하세요.
설정: Supabase의 Service ID가 Apple 제공자 설정에서 올바르게 구성되어 있는지 확인하세요.
리뷰 예시 앱 code 참조

Supabase Apple Login on Web을 사용하는 경우 인증 및 계정 흐름을 계획하고 Supabase Apple Login on Web을 연결하세요. @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login의 네이티브 기능을 사용하세요. @capgo/capacitor-social-login을 사용하여 @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에서 두 단계 인증 구현에 대한 세부 정보