Supabase Apple 로그인 웹

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

사전 요구 사항

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

Apple Login Web 설정 Supabase Apple Login - 일반 설정
Implementation 제목: Implementation.

완전한 Implementation은 예제 앱의

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

Apple Login Web 설정

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

작동 방식

초기화

: 플러그인은 서비스 ID와 현재 페이지 URL을 리다이렉트 URL로 초기화합니다.OAuth 팝업
: Apple의 OAuth 페이지를 표시하는 팝업 창을 열어줍니다.사용자 인증
User Authentication: 사용자는 애플 팝업에서 인증합니다.
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 Developer Portal에 허용된 도메인 목록에 추가되어야 합니다.

리다이렉트 URL

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

Supabase Client ID

Supabase에서 Apple 제공자에 다음을 구성하세요:

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

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

Helper Function을 업데이트하십시오

helper function을 사용할 때는 authenticateWithAppleSupabase helper function을 사용할 때는 helper function을 사용할 때는 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에서 허용된 도메인이 등록되어 있는지 확인하세요.
Supabae 설정: Supabae Service ID가 올바르게 설정되어 Supabae Apple 제공자 설정에서 확인하십시오.
Review the 예시 앱 code 참조용

Supabae Apple Login on Web을 사용하여 인증 및 계정 흐름을 계획하고 있다면 이를 Supabae Apple Login on Web과 연결하십시오 Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @capgo/capacitor-social-login을 사용하여 native capability Using @capgo/capacitor-social-login을 사용하여 native capability @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 구현 세부 사항, 두 단계 인증 두 단계 인증 구현 세부 사항