Supabase Apple 로그인 Android

설치 전 필요 조건

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

• 그 Supabase Apple Login - 일반 설정.

중요

Apple Sign-In을 Android에서 사용하려면 백엔드 서버가 필요합니다. Apple은 native Android 지원을 제공하지 않기 때문입니다. 우리는 Supabase Edge Function을 백엔드 서버로 사용할 것입니다.

Step 1: 백엔드 Edge Function을 배포하세요

첫 번째로, Apple OAuth 콜백을 처리할 Supabase Edge Function을 배포해야 합니다.

1. Supabase 프로젝트 디렉토리로 이동하세요

   cd your-project/supabase

2. __CAPGO_KEEP_0__를 생성하세요. (있지 않으면) __CAPGO_KEEP_0__를 생성하세요.

   supabase functions new apple-signin-callback

3. code를 복사하세요.

   __CAPGO_KEEP_0__의 완전한 구현은 예제 앱에서 확인할 수 있습니다. 예제 앱.

   다음 파일을 프로젝트로 복사하세요.

   • supabase/functions/apple-signin-callback/index.ts - 메인 에지 함수 code
   • supabase/functions/apple-signin-callback/deno.json - 의존성 라이브러리의 임포트 맵 (JWT 서명 라이브러리 포함) jose JWT 인증을 위한 설정

4. Configure JWT verification

   Apple OAuth callback endpoint는 공개되어야 합니다 (인증이 필요하지 않습니다). Apple은 이를 호출합니다. Apple OAuth callback endpoint를 업데이트하여 supabase/config.toml file:

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   중요

   설정 verify_jwt = false 이 endpoint를 공개시킵니다. Apple의 OAuth redirect가 Supabase 인증 헤더를 포함하지 않기 때문에 필요합니다. endpoint는 OAuth 흐름을 자체적으로 검증합니다.

5. 함수 배포

   supabase functions deploy apple-signin-callback

6. 함수 URL 가져오기

   배포 후, URL이 다음과 같은 형식으로 제공됩니다:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   찾을 수 없다면 다음을 수행할 수 있습니다:

   1. 열기 https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Apple Sign-In Callback apple-signin-callback 함수 URL을 클릭하여 복사하세요.

   이 URL을 저장하세요.

   애플 개발자 포털을 구성할 때 다음 단계에서 이 URL이 필요합니다.

2단계: 애플 개발자 포털 구성

2단계: 애플 개발자 포털 구성

Function URL

1단계에서 Supabase Edge Function URL을 확인하세요. Apple Developer Portal에서 Return URL을 설정하기 위해 필요합니다.

1. Apple Login Android 설정 가이드를 따라하세요.

   Apple Login Android 설정 가이드를 완료하세요. 으로: 서비스 ID를 생성하세요.

   • .p8 파일 형식의 개인 키를 생성하세요.
   • 팀 ID와 키 ID를 확인하세요.
   • Return URL을 설정하세요.
   • Apple Developer Portal에서 Return URL을 설정하세요.

2. Return URL을 Apple Developer Portal에 설정하세요.

   Apple Developer Portal에서 Return URL을 설정할 때 (Apple 가이드의 6.9 단계), Supabase Edge Function URL을 사용하세요.

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   주의: Supabase Edge Function URL을 사용하세요.

   사용하지 마세요. Apple Login Android Setup 가이드에서 제공하는 리다이렉트 URL을 사용하지 마세요. . 그 가이드는 커스텀 백엔드 서버 URL을 사용합니다. Supabase 통합을 위해,반드시 Supabase Edge Function URL을 사용해야 합니다. 정확한 일치 필요

   Return URL은 정확히 일치해야 합니다.

   __CAPGO_KEEP_0__ 정확히 이곳에서 설정한 내용입니다. Apple은 리다이렉트 URI 매칭에 매우 엄격합니다. 필요한 모든 값을 수집하세요

3. Apple 설정 가이드를 완료한 후, 다음을 갖추어야 합니다:

   APPLE_TEAM_ID

   • : Apple 개발자 팀 IDAPPLE_KEY_ID
   • : Apple 개발자 포털에서 Key IDAPPLE_PRIVATE_KEY
   • : .p8 개인 키 파일 (base64 인코딩이 필요합니다)ANDROID_SERVICE_ID
   • : Apple 서비스 ID (예를 들어,__CAPGO_KEEP_0__ com.example.app.service)
   • BASE_REDIRECT_URL: Your deep link URL (e.g., capgo-demo-app://path)

   Deep Link URL

   The BASE_REDIRECT_URL is the deep link scheme configured in your AndroidManifest.xml. This is where the backend will redirect after authentication.

   The value of your deep link is dependent on the android:scheme="capgo-demo-app" code android:scheme="capgo-demo-app" If you have set AndroidManifest.xmlin your capgo-demo-app://path.

then your deep link will be

Supabase Edge Function의 환경 변수(비밀)를 설정해야 합니다.

1. 개인 키를 base64로 인코딩하십시오

   Apple 개인 키 (.p8 파일)를 base64로 인코딩하십시오:

   base64 -i AuthKey_XXXXX.p8

   복사할 수 있는 전체 출력(길고 긴 문자열)을 복사하십시오.

2. Supabase CLI에서 비밀을 설정하십시오

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   대체자 대체

   __CAPGO_KEEP_0__을 실제 값으로 대체하세요.

3. __CAPGO_KEEP_0__ 대신 Supabase 대시보드에서 비밀을 설정하세요.

   __CAPGO_KEEP_0__을 사용하는 경우:

   1. __CAPGO_KEEP_0__로 이동하세요.
   2. __CAPGO_KEEP_0__으로 이동하세요. __CAPGO_KEEP_0__ → __CAPGO_KEEP_0__ → __CAPGO_KEEP_0__
   3. __CAPGO_KEEP_0__ 변수를 각 비밀 값과 함께 추가하세요.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ 애플 로그인 안드로이드 설정 가이드 __CAPGO_KEEP_0__

• Android 앱을 구성하는 데 이미 다루어졌습니다: AndroidManifest.xml
• Android 앱에 깊이 연결된 intent 필터를 추가하는 것 onNewIntent handler를 MainActivity.java

앱에서 인증 도우미를 사용하기 전에 Step 3에서 구성한 깊이 연결 스키마를 완료하십시오. BASE_REDIRECT_URL Step 4: 인증 도우미 사용

Step 4: 인증 도우미 사용

Now you can use the authentication helper in your app code.

Implementation

The complete implementation is available in the __CAPGO_KEEP_0__ example app의 supabaseAuthUtils.ts 파일.

인증 Helper를 사용하는 방법

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

Helper 함수를 업데이트합니다.

helper 함수를 사용할 때, authenticateWithAppleSupabase 당신은 아래의 값을 당신의 설정과 일치시켜야 합니다: __CAPGO_KEEP_1__

1. 업데이트 redirectUrl - Supabase Edge Function URL로 설정하세요:

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. 업데이트 clientId - Apple Service ID로 설정하세요:

   await SocialLogin.initialize({
     apple: {
       clientId: isIOS
         ? undefined // iOS uses bundle ID automatically
         : 'your.service.id.here', // Your Apple Service ID for Android
       redirectUrl: redirectUrl,
     },
   });

   중요

   대체 'your.service.id.here' 실제 Apple Service ID (Step 3에서 사용한 값과 동일한 값)으로 대체하세요. ANDROID_SERVICE_ID See the __CAPGO_KEEP_0__.

__CAPGO_KEEP_1__ 완전한 구현 참조용입니다.

5단계: 통합 테스트

1. Android 앱을 빌드하고 실행하세요.

   npx cap sync android
   npx cap run android

2. 인증 흐름을 테스트하세요.

   • 애플 로그인 버튼을 탭하세요.
   • 브라우저에서 애플 OAuth 페이지를 볼 수 있습니다.
   • 인증 후 앱으로 돌아옵니다.
   • 콘솔 로그에서 오류를 확인하세요.

3. __CAPGO_KEEP_0__을 확인하세요.

   __CAPGO_KEEP_0__의 완전한 흐름은 다음과 같습니다.

   1. 사용자가 '애플로 로그인' 버튼을 탭합니다.
   2. 애플 로그인 브라우저가 열립니다.
   3. 사용자가 애플 계정으로 인증합니다.
   4. 애플에서 리다이렉트됩니다. https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Edge 함수가 code을 토큰으로 교환합니다.
   6. Edge 함수가 리다이렉트됩니다. your-app://path?id_token=...&access_token=...
   7. 안드로이드 앱이 깊이 링크를 수신하고 사용자 식별 토큰을 처리합니다.
   8. 앱이 사용자 식별 토큰으로 Supabase에 로그인합니다.

문제 해결

인증이 실패할 경우:

• Redirect URI 일치하지 않음: Apple Developer Portal의 Return URL이 정확히 일치하는지 확인하세요. APPLE_REDIRECT_URI 비밀번호
• 깊이 연결이 작동하지 않음: 다음을 확인하세요. AndroidManifest.xml intent 필터가 BASE_REDIRECT_URL
• 비밀번호가 누락됨: 다음을 확인하세요. supabase secrets list
• 모든 비밀번호가 올바르게 설정되었는지 토큰 교환 실패
• : Supabase Dashboard의 Edge Function 로그를 확인하여 자세한 오류 메시지를 확인하세요. : __CAPGO_KEEP_0__을 확인하세요. onNewIntent is properly implemented in MainActivity
• Review the example app code for reference

How It Works

On Android, Apple Sign-In uses an OAuth redirect flow:

1. Initialization: Plugin은 Service ID와 백엔드 리다이렉트 URL로 초기화됩니다.
2. OAuth Flow: Apple의 OAuth 페이지를 열어 Chrome Custom Tab 또는 브라우저를 엽니다.
3. Backend Callback애플이 사용자 인증을 위해 Edge 함수로 리다이렉트합니다. code
4. 토큰 교환애플의 토큰 엔드포인트를 사용하여 code를 토큰으로 교환합니다.
5. 깊이 연결 리다이렉트Edge 함수가 사용자 인증 토큰을 포함한 앱으로 리다이렉트합니다.
6. Supabase 인증앱이 토큰을 수신하고 Supabase에 로그인합니다.

이 흐름은 애플이 Sign in with Apple을 위한 네이티브 안드로이드 지원을 제공하지 않기 때문에 필요합니다.

Supabase 애플 로그인에서 계속

애플 로그인 사용 중입니다. Apple Android 로그인 인증 및 계정 흐름을 계획하고 연결하세요. @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의 구현 세부 정보를 사용하여 두 가지 인증 방법을 사용합니다. 두 단계 인증 두 단계 인증의 구현 세부 정보를 사용하여