애플 로그인

필수 조건

이 가이드는 Android에서 Apple Sign-In을 Supabase 인증과 통합하는 방법을 설명합니다. Supabase 인증과 Apple Sign-In을 통합하려면 다음을 완료한 것으로 가정합니다:

• the Supabase Apple Login - 일반 설정.

중요

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

Step 1: 백엔드 Edge Function 배포

첫 번째로, Supabase Edge Function을 배포해야 합니다. 이 Edge Function은 Apple OAuth callback을 처리할 것입니다.

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

   cd your-project/supabase

2. Edge 함수를 생성하세요 (만약 존재하지 않다면)

   supabase functions new apple-signin-callback

3. Edge 함수 code을 복사하세요

   Edge 함수 구현은 예제 앱에서 확인할 수 있습니다 다음 파일을 프로젝트로 복사하세요:.

   - Main edge function __CAPGO_KEEP_0__

   • supabase/functions/apple-signin-callback/index.ts - Main edge function code
   • supabase/functions/apple-signin-callback/deno.json - 의존성에 대한 import map (includes) jose - JWT 서명에 대한 라이브러리

4. JWT 검증을 구성하십시오

   애플 OAuth callback 엔드포인트는 공개되어야 합니다 (인증이 필요하지 않습니다). 애플은 이를 리다이렉트합니다. 다음 파일을 업데이트 하십시오: supabase/config.toml 클립보드에 복사하십시오

   [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 터미널 창

5. __CAPGO_KEEP_0__

   supabase functions deploy apple-signin-callback

6. 함수 URL을 가져오세요

   배포 후, 다음 URL과 같은 URL을 받을 것입니다:

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

   URL을 찾을 수 없다면, 다음을 수행하세요:

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

   다음 단계에서 Apple Developer Portal을 구성할 때 이 URL이 필요합니다.

   URL

Step 2: Apple Developer Portal을 설정하세요.

Now we need to configure Apple Developer Portal with the backend URL and get all the required values.

Function URL

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

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

   Apple Login Android 설정 가이드를 완료하세요. to: Service ID를 생성하세요.

   • 개인 키 (.p8 파일)를 생성하세요.
   • Follow the Apple Login Android Setup Guide
   • Apple 로그인 Android 설정 가이드의 Redirect URL을 사용하지 마세요.
   • Apple 로그인 Android 설정 가이드의 Redirect URL은 사용하지 마세요.

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

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

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

   복사

   중요: Supabase Edge Function URL을 사용하세요. 사용하지 마세요. Apple Login Android 설정 가이드의 Redirect URLApple Login Android 설정 가이드의 Redirect URL은 사용하지 마세요. Apple Login Android 설정 가이드의 Redirect URL을 사용하지 마세요. Apple Login Android 설정 가이드의 Redirect URL을 사용하지 마세요.

   정확한 일치가 필요합니다.

   리턴 URL은 여기에서 설정한 것과 정확히 일치해야 합니다. 정확히 Apple은 리다이렉션 URI 일치에 매우 엄격합니다.

3. 필요한 모든 값을 수집하십시오.

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

   • APPLE_TEAM_ID: Apple Developer Team ID
   • APPLE_KEY_ID: Apple Developer Portal에서 Key ID
   • APPLE_PRIVATE_KEY: __CAPGO_KEEP_0__ (base64 인코딩이 필요합니다)
   • ANDROID_SERVICE_ID: 애플 서비스 ID (예를 들어,) com.example.app.service)
   • BASE_REDIRECT_URL: 인증 후 백엔드에 리다이렉트 될 deep link URL (예를 들어,) capgo-demo-app://path)

   Deep Link URL

   은 앱에서 구성된 deep link 스키마입니다. BASE_REDIRECT_URL 이것은 인증 후 백엔드에 리다이렉트 될 URL입니다. AndroidManifest.xmldeep link의 값은 __CAPGO_KEEP_0__에 따라 결정됩니다. 만약 __CAPGO_KEEP_0__을 설정했습니다.

   __CAPGO_KEEP_0__ android:scheme="capgo-demo-app" code android:scheme="capgo-demo-app" 애플리케이션에서 AndroidManifest.xml그런 다음 깊이 연결은 capgo-demo-app://path.

3단계: Supabase 비밀을 설정하십시오

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

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

   첫 번째로, 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

   위치 홀더 대체

   2 단계에서 실제 값으로 모든 위치 홀더 값을 대체하세요.

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

   대시보드를 사용하는 경우:

   1. Supabase 프로젝트 대시보드에 가세요
   2. 가장자리 Edge Functions → 설정 → 비밀
   3. 각 비밀 변수에 값 추가하세요

안드로이드 앱 구성

Android 애플 로그인 안드로이드 설정 가이드 이미 애플 로그인 안드로이드 설정 가이드에서

• deep link intent 필터를 추가하는 AndroidManifest.xml
• deep link onNewIntent handler를 추가하는 MainActivity.java

handler BASE_REDIRECT_URL Step 3에서 설정한 deep link 스키마를 사용합니다.

Step 4: 인증 도우미 사용

이제 앱에서 인증 도우미를 사용할 수 있습니다 code.

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

도우미 함수 업데이트

When using the authentication helper with Supabase and Apple, you need to update the helper function to handle the authentication flow for Android. authenticateWithAppleSupabase 도움을 주는 함수, 당신 해야 합니다 다음 값들을 당신의 설정에 맞게 업데이트해야 합니다:

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 서비스 ID(Step 3에서 사용한 실제 값)과 함께 ANDROID_SERVICE_ID Step 3에서 사용한 실제 값입니다.

Step 3에서 사용한 실제 값입니다. 참고용 전체 구현 참고용 전체 구현

5단계: 통합 테스트

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

   npx cap sync android
   npx cap run android

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

   • Apple 로그인 버튼을 탭하세요.
   • 애플 OAuth 페이지는 브라우저에서 보이게 됩니다.
   • 인증 후 앱으로 돌아오게 됩니다.
   • 콘솔 로그를 확인하세요.

3. 흐름을 확인하세요.

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

   1. 사용자가 “애플로 로그인” 버튼을 누릅니다.
   2. 앱이 브라우저를 열어 애플 OAuth를 여는 것입니다.
   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. App은 Supabase와 identity token을 사용하여 로그인합니다.

문제 해결

인증이 실패하면:

• 리디렉션 URI 일치하지 않음: Apple Developer Portal에서 Return URL이 정확히 일치하는지 확인하세요. APPLE_REDIRECT_URI secret
• 깊이 링크가 작동하지 않음: intent filter가 AndroidManifest.xml 비밀 키가 누락됨 BASE_REDIRECT_URL
• : 모든 비밀 키가 올바르게 설정되었는지 secret supabase secrets list
• 토큰 교환 실패: Supabase 대시보드의 Edge Function 로그를 확인하여 자세한 오류 메시지를 확인하세요
• 앱이 콜백을 받지 못합니다: MainActivity 에서 properly implemented 여부를 확인하세요 onNewIntent MainActivity 에서 properly implemented 여부를 확인하세요
• 예시 앱 __CAPGO_KEEP_0__ example app code How It Works

페이지 설명

초기화

1. Initialization: 애플 로그인 플러그인은 Service ID와 백엔드 리다이렉트 URL로 초기화됩니다.
2. OAuth Flow: 애플의 OAuth 페이지에 브라우저/Chrome 커스텀 탭이 열립니다.
3. Backend Callback: 애플은 Supabase Edge Function으로 리다이렉트됩니다. (인증 code)
4. Token Exchange: Edge Function은 Apple의 토큰 엔드포인트를 사용하여 code를 토큰으로 교환합니다.
5. Deep Link Redirect: Edge Function은 앱으로 리다이렉트하여 identity 토큰을 전달합니다.
6. Supabase Authentication: 앱은 토큰을 수신하고 Supabase에 로그인합니다.

이 흐름은 애플이 Android에서 native Sign in with Apple 지원을 제공하지 않기 때문에 필요합니다.

Supabase Apple Android 로부터 계속

만약 당신이 Supabase Apple Android 인증 및 계정 흐름을 계획하고 있다면 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-passkey @capgo/capacitor-native-biometric Capacitor에서 @capgo/capacitor-native-biometric 구현에 대한 세부 정보 두 단계 인증 Capacitor에서 두 단계 인증 구현에 대한 세부 정보