애플 로그인 - 일반 설정

개요

이 안내서에서는 Supabase 인증과 Apple Sign-In을 통합하는 방법을 설명합니다. Apple Sign-In은 iOS, Android 및 Web 플랫폼에서 작동하는 안전하고 개인 정보 보호를 위한 인증 방법을 제공합니다.

준비 사항

시작하기 전에 다음을 확인하세요:

1. Supabase 프로젝트를 생성했습니다.

2. Apple Login 일반 설정 read_the_style_guide Apple OAuth 인증 설정 가이드

3. 대상 플랫폼에 맞는 플랫폼별 가이드를 따라 Apple OAuth 인증을 설정하세요.

   • 안드로이드 설정
   • iOS 설정
   • 웹 설정

   주의

   Supabase 튜토리얼을 시작하기 전에, 사용할 플랫폼에 따라 클라이언트 ID를 생성해야 합니다.

   iOS의 경우 클라이언트 ID는 앱 ID와 동일합니다. 안드로이드 및 웹의 경우 클라이언트 ID는 서비스 ID와 동일합니다. 이 가이드의 7단계에서 사용하겠습니다.

Supabase에서 Apple OAuth 제공자를 활성화하는 방법

1. 앱에 가서 Supabase 대시보드

2. 프로젝트를 클릭하세요

   

3. 다음으로 이동하세요 Authentication 메뉴

   

4. 선택하세요 Providers 탭

   

5. 제공자 Apple 애플 제공자

   

6. Apple 로그인 활성화 Apple 제공자

   

7. 클라이언트 ID 설정을 입력하세요:

   주의

   iOS에서 Apple 로그인을 사용하는 경우, 클라이언트 ID는 앱 ID와 동일합니다. Android 또는 Web에서 Apple 로그인을 사용하는 경우, 클라이언트 ID는 서비스 ID와 동일합니다. 두 가지 모두 사용하는 경우, 앱 ID와 서비스 ID를 모두 제공해야 합니다.

   

8. 버튼을 클릭하세요 Save Supabase Apple 제공자 저장

   

   주의

   당신은 설치하지 않아도 됩니다. 설정 Secret key (for OAuth). Capgo는 Apple 로그인에 대한 사용자 지정 백엔드 구현을 처리할 것입니다.

Voilà, 이제 당신은 Supabase 인증과 함께 Apple Sign-In을 활성화했습니다 🎉

인증 도우미를 사용하는 방법

Apple Sign-In의 전체 구현에는 인증 도우미 함수가 포함됩니다. authenticateWithAppleSupabase() 이 함수는 Apple Sign-In을 Supabase와 함께 처리하는 데 필요한 모든 단계를 처리합니다.

• Apple Sign-In을 플랫폼에 맞게 초기화합니다.
• 인증 흐름을 처리합니다 (iOS에서 네이티브, Android/Web에서 OAuth 리다이렉트)
• 애플에서 identity 토큰을 추출합니다.
• identity 토큰을 사용하여 Supabase에 로그인합니다.

완전한 Implementation

Implementation은 예제 앱의 파일에 있습니다. supabaseAuthUtils.ts 기본 사용법

기본 사용법

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

Section 제목 "이것은 어떻게 작동하는지"

플랫폼에 따라 자동으로 다루는 도우미 함수:

• iOS: native Apple Sign-In 사용 (redirect URL 필요하지 않음, 자동으로 bundle ID 사용)
• Android: 백엔드 에지 함수를 사용하는 OAuth redirect flow (Service ID 필요)
• 웹: OAuth popup flow 사용 (Service ID와 현재 페이지 URL 필요)

Apple에서 반환하는 identity 토큰을 사용하여 Supabase와 인증합니다. supabase.auth.signInWithIdToken().

Supabase Apple Login - General Setup

Supabase Apple Login - General Setup Supabase Apple Login - General Setup 인증 및 계정 흐름을 계획하고 연결하려면 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric Two-factor authentication Two-factor authentication