Supabase Apple 로그인 - 일반 설정

개요

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

준비 사항

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

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

2. Apple Login 일반 설정 Apple OAuth 인증을 설정하는 방법에 대한 안내서를 읽었습니다. Apple OAuth 인증을 설정하는 방법에 대한 플랫폼별 안내서를 읽었습니다.

3. Android 설정

   • Android 플랫폼에서 Apple OAuth 인증을 설정하는 방법에 대한 안내서를 읽었습니다.
   • iOS 설정
   • 웹 설정

   주의

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

   iOS의 경우 클라이언트 ID는 앱 ID와 동일합니다. Android 및 웹의 경우 클라이언트 ID는 서비스 ID와 동일합니다. 7단계에서 이 안내서를 사용할 것입니다.

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

1. 애플 OAuth 제공자를 활성화하려면 Supabase 대시보드

2. 프로젝트 클릭

   

3. __CAPGO_KEEP_0__ Authentication __CAPGO_KEEP_1__

   

4. __CAPGO_KEEP_3__ Providers __CAPGO_KEEP_4__

   

5. __CAPGO_KEEP_6__ Apple __CAPGO_KEEP_7__

   

6. __CAPGO_KEEP_9__ Apple __CAPGO_KEEP_10__

   

7. __CAPGO_KEEP_0__ 설정을 입력하세요:

   주의

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

   

8. __CAPGO_KEEP_1__ 버튼을 클릭하세요. Save Supabase Apple Provider Save

   

   __CAPGO_KEEP_2__

   __CAPGO_KEEP_0__ 제공하지 않아야 합니다. __CAPGO_KEEP_0__ setup Secret key (for OAuth)Apple 로그인에 대한 커스텀 백엔드 구현을 하겠습니다.

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

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

인증 도우미를 사용하는 방법의 완전한 구현은 helper 함수를 포함합니다. authenticateWithAppleSupabase() helper 함수는 Supabase와 Apple Sign-In의 전체 흐름을 처리합니다. 이 함수는 다음과 같습니다.

• Apple Sign-In을 플랫폼에 맞게 초기화합니다.
• iOS에서 네이티브로, Android/Web에서 OAuth 리다이렉션을 처리합니다.
• Apple에서 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);
}

이것은 어떻게 작동하는가

도우미 함수는 자동으로 플랫폼에 따라 다르다는 것을 처리합니다.

• iOS: 네이티브 애플 로그인 (리다이렉트 URL이 필요하지 않으며, 자동으로 번들 ID를 사용합니다.)
• AndroidOAuth redirect flow를 사용하여 백엔드 에지 함수 (Service ID가 필요함)를 사용합니다.
• WebOAuth popup flow를 사용하여 (Service ID와 현재 페이지 URL을 리다이렉트로 사용해야 함)

Apple에서 제공하는 identity 토큰을 반환하는 함수가 있습니다. 이 토큰을 사용하여 Supabase와 인증합니다. supabase.auth.signInWithIdToken().

Supabase Apple Login - General Setup에서 계속 진행하세요.

Supabase Apple Login - General Setup을 사용하여 인증 및 계정 흐름을 계획하고 있습니다. 이에 따라 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login의 네이티브 기능을 연결합니다. @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login의 네이티브 기능을 연결합니다. @capgo/capacitor-social-login을 사용하여 @capgo/capacitor-social-login의 네이티브 기능을 연결합니다. @capgo/capacitor-social-login을 사용하여 @capgo/capacitor-social-login의 네이티브 기능을 연결합니다. @capgo/capacitor-social-login capgo/capacitor-social-login 구현 세부 사항에 대해 @capgo/capacitor-passkey capgo/capacitor-passkey 구현 세부 사항에 대해 @capgo/capacitor-native-biometric capgo/capacitor-native-biometric 구현 세부 사항에 대해, 그리고 두 단계 인증 두 단계 인증 구현 세부 사항에 대해.