안드로이드에서 Supabase Apple 로그인

사전 요구 사항

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

• __CAPGO_KEEP_0__ Supabase Apple 로그인 - 일반 설정.

중요

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

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

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

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

   cd your-project/supabase

2. Edge 함수를 생성하세요 (이미 존재하지 않으면)

   supabase functions new apple-signin-callback

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

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

   - Main edge 함수 __CAPGO_KEEP_0__

   • supabase/functions/apple-signin-callback/index.ts - Main edge function code
   • supabase/functions/apple-signin-callback/deno.json JWT 인증 설정 jose library for JWT signing

4. Configure JWT verification

   애플 OAuth callback endpoint는 공개되어야 합니다 (인증이 필요하지 않습니다). 애플은 이를 호출합니다. __CAPGO_KEEP_0__을 업데이트하세요. supabase/config.toml __CAPGO_KEEP_0__

   [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 __CAPGO_KEEP_0__이 이 endpoint를 공개하도록 만듭니다. 이는 애플의 OAuth redirect가 Supabase 인증 헤더를 포함하지 않기 때문입니다. endpoint는 OAuth flow 자체를 검증합니다.

5. __CAPGO_KEEP_0__

   supabase functions deploy apple-signin-callback

6. __CAPGO_KEEP_0__ URL을 가져오세요

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

   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 함수 URL을 클릭하여 복사하세요. apple-signin-callback 애플 시그니인 콜백 함수 URL

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

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

애플 개발자 포털을 구성하기 위해 백엔드 URL과 모든 필요한 값을 가져와야 합니다.

애플 개발자 포털 구성

Function URL

__CAPGO_KEEP_0__

1. Apple 로그인 안드로이드 설정 가이드를 따라하세요

   __CAPGO_KEEP_1__ Apple 로그인 안드로이드 설정 가이드 으로:

   • 서비스 ID 생성
   • 개인 키 (.p8 파일) 생성
   • 팀 ID 및 키 ID 가져오기
   • 리턴 URL 설정

2. Apple Developer Portal에서 리턴 URL 설정

   Apple 개발자 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 설정 가이드에서 제공하는 리다이렉트 URL 그 가이드는 사용자 지정 백엔드 서버 URL을 사용합니다.Supabase 통합을 위해, 반드시 Supabase Edge Function URL을 사용해야 합니다. 정확한 일치 필요 정확한 일치 필요

   Copy to clipboard

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

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

   : Apple 개발자 팀 ID

   • : Apple 개발자 포털에서 Key ID: Apple 개발자 포털에서 .p8 개인 키 파일 (base64 인코딩이 필요합니다)
   • : Apple 서비스 ID (예를 들어,__CAPGO_KEEP_0__
   • __CAPGO_KEEP_0____CAPGO_KEEP_0__
   • __CAPGO_KEEP_0____CAPGO_KEEP_0__ com.example.app.service)
   • __CAPGO_KEEP_0__: __CAPGO_KEEP_0__ URL (예시,) capgo-demo-app://path)

   Deep Link URL

   는 __CAPGO_KEEP_0__을 설정한 BASE_REDIRECT_URL 이것은 인증 후 백엔드가 리다이렉트 될 URL입니다. AndroidManifest.xml의 __CAPGO_KEEP_0__ 값에 따라 __CAPGO_KEEP_0__의 값이 결정됩니다.

   __CAPGO_KEEP_0__이 설정되어 있다면 __CAPGO_KEEP_0__ android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" 이 경우 __CAPGO_KEEP_0__ AndroidManifest.xml3단계: Supabase Secrets 설정 capgo-demo-app://path.

Step 3: Supabase Secrets 설정

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__ 애플 로그인 안드로이드 설정 가이드 이미 안드로이드 앱을 구성하는 방법을 다루고 있으므로

• Step 3에서 설정한 깊이 링크 스키마를 사용합니다. AndroidManifest.xml
• Step 3에서 설정한 깊이 링크 스키마를 사용합니다. onNewIntent handler를 MainActivity.java

handler를 BASE_REDIRECT_URL 이미 구성한 단계를 완료한 후에 계속 진행하세요. Step 3에서 설정한 깊이 링크 스키마는 Step 4에서 사용할 것입니다.

Step 4: 인증 도우미 사용

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

Implementation

The complete implementation is available in the 예시 앱의 supabaseAuthUtils.ts 파일.

Authentication 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 함수를 업데이트

Authentication Helper를 사용할 때 authenticateWithAppleSupabase Authentication Helper를 사용할 때는 must 구성에 맞게 다음 값을 업데이트해야 합니다.

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 Step 3에서 사용한 값과 동일한 값으로 대체하세요.

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

5단계: 통합 테스트

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

   npx cap sync android
   npx cap run android

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

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

3. 흐름을 확인하세요

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

   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 __CAPGO_KEEP_0__
• 깊이 연결이 작동하지 않음: 다음을 확인하세요. AndroidManifest.xml intent 필터가 BASE_REDIRECT_URL
• 비밀번호가 누락됨: 다음을 확인하세요. supabase secrets list
• __CAPGO_KEEP_0__토큰 교환 실패
• : Supabase Dashboard의 Edge Function 로그를 확인하여 자세한 오류 메시지를 확인하세요. : __CAPGO_KEEP_0__을 올바르게 구현하십시오. onNewIntent MainActivity에서 __CAPGO_KEEP_0__이 올바르게 구현되었는지 확인하십시오.
• 예시 앱 __CAPGO_KEEP_0__을 참조하십시오. 참조용 예시 앱 code 작동 방식

작동 방식

초기화

1. 서비스 ID와 백엔드 리다이렉트 URL을 사용하여 플러그인을 초기화합니다.OAuth 흐름
2. 브라우저/Chrome 커스텀 탭을 열어 애플의 OAuth 페이지로 이동합니다.브라우저/Chrome 커스텀 탭을 열어 애플의 OAuth 페이지로 이동합니다.
3. 백엔드 콜백: Apple이 인증 code를 포함한 Supabase Edge Function으로 리다이렉트합니다.
4. 토큰 교환: Edge Function은 Apple의 토큰 엔드포인트를 사용하여 code를 토큰으로 교환합니다.
5. 깊이 링크 리다이렉트: Edge Function은 사용자 식별 토큰을 포함한 앱으로 리다이렉트합니다.
6. Supabase 인증: 앱은 토큰을 수신하고 Supabase에 로그인합니다.

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