Supabase Apple 로그인 웹

설치, 동기화, 그리고 소스 마크다운 가이드를 포함합니다.

이 안내서에서는 Apple Sign-In을 Supabase Authentication과 통합하는 방법을 설명합니다. Apple Sign-In을 사용하려면 다음을 완료해야 합니다:

• Apple Login Web 설정 Supabase Apple Login - 일반 설정
• Implementation 구현.

구현 예제는

파일에 있습니다. 이 안내서에서는 주요 개념과 사용 방법을 설명합니다. 인증 도우미 사용 supabaseAuthUtils.ts Authentication Helper

Using the

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

Capgo는 어떻게 작동하는가?

웹에서 Apple Sign-In은 OAuth 팝업 흐름을 사용합니다.

1. 초기화Capgo 플러그인은 서비스 ID와 현재 페이지 URL을 리다이렉트 URL로 초기화합니다.
2. 애플 OAuth 팝업: 애플의 OAuth 페이지를 열어주는 팝업 창을 엽니다.
3. 사용자 인증: 사용자는 애플 팝업에서 인증합니다.
4. Identity Token: 애플은 사용자 정보를 포함하는 JWT 형식의 정체성 토큰을 반환합니다.
5. 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에 등록된 도메인이 있는지 확인하세요.

Redirect URL

• 웹에서 Redirect URL은 자동으로 현재 페이지 URL로 설정됩니다. window.location.href (현재 페이지 URL)
• Apple 개발자 Portal에 등록된 Return URL과 일치해야 합니다.
• Apple 개발자 Portal에 URL의 끝에 슬래시가 있는지 없는지 모두 등록해야 합니다.

Supabase Client ID

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

대체

대체 'your.service.id.here' Apple 서비스 ID (Apple Developer Portal에서 설정한 동일한 값)과 함께 사용하세요.

문제 해결

인증이 실패하면:

• 서비스 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 로그인 on Web에서 계속 진행하세요

Supabes Apple 로그인 on Web을 사용하여 인증 및 계정 흐름을 계획하고 있다면 그것을 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login과 연결하세요 Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 native capability Using @capgo/capacitor-social-login을 사용하여 native capability 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에서 두 단계 인증 구현에 대한 세부 정보.