Supabase Apple 로그인 Android

설치 전 필요 조건

이 안내서에서는 Android에서 Apple Sign-In을 Supabase 인증과 통합하는 방법을 알려줍니다. 다음 단계를 이미 완료했다고 가정합니다:

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

중요

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

Step 1: 백엔드 Edge Function 배포

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

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

   cd your-project/supabase

2. __CAPGO_KEEP_0__을 생성하세요. (존재하지 않으면)

   supabase functions new apple-signin-callback

3. code의 에지 함수를 복사하세요.

   에지 함수 구현은 예제 앱에서 확인하실 수 있습니다. 예제 앱.

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

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

4. - JWT 서명 라이브러리 포함의 의존성 라이브러리 임포트 맵

   애플 OAuth callback 엔드포인트는 공개되어야 합니다 (인증이 필요하지 않습니다). 애플은 이를 호출합니다. __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__ 이 엔드포인트를 공개합니다. 이는 애플의 OAuth 리다이렉트가 Supabase 인증 헤더를 포함하지 않기 때문입니다. 엔드포인트는 OAuth 흐름을 자체적으로 유효성 검사합니다.

5. __CAPGO_KEEP_0__ 함수를 배포

   supabase functions deploy apple-signin-callback

6. __CAPGO_KEEP_0__ 함수 URL을 가져오기

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

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

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

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

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

기능 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을 사용하세요.

   __CAPGO_KEEP_1__ 사용하지 마세요. __CAPGO_KEEP_2__Apple Login Android 설정 가이드에서 제공하는 리다이렉트 URL을 사용하지 마세요. __CAPGO_KEEP_3__ 그 가이드는 커스텀 백엔드 서버 URL을 사용합니다.

   Supabase 통합을 위해, 반드시 Supabase Edge Function URL을 사용해야 합니다.

   __CAPGO_KEEP_5__ 정확히 이곳에서 설정한대로. Apple은 리다이렉션 URI 매칭에 매우 엄격합니다.

3. 필요한 모든 값을 수집하세요.

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

   • __CAPGO_KEEP_0__: Apple 개발자 팀 ID
   • : Apple 개발자 포털에서 키 ID: Apple 개발자 포털에서 .p8 개인 키 파일 (base64 인코딩이 필요함)
   • : Apple 서비스 ID (예를 들어,__CAPGO_KEEP_0__
   • : 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. 개인 키를 인코딩하세요

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

• 애플 로그인 안드로이드 설정 가이드 AndroidManifest.xml
• 이미 애플 로그인 안드로이드 설정 가이드에서 Android 앱을 구성하는 방법을 다룹니다. onNewIntent deep link intent 필터를 추가하는 방법 MainActivity.java

handler를 추가하는 방법 BASE_REDIRECT_URL 애플 로그인 안드로이드 설정 가이드의 Step 3에서 설정한 deep link scheme을 사용합니다.

Step 4: 인증 도우미 사용

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

Implementation

The complete implementation is available in the 예시 앱의 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 다음 값을 업데이트 하여 설정에 맞게 수정해야 합니다.

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. 인증 흐름을 확인하세요

   인증 흐름은 다음과 같이 완료되어야 합니다:

   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. 앱이 사용자 식별 토큰으로 Supabase에 로그인합니다

문제 해결

If authentication fails:

• Redirect URI 불일치: 리턴 URL이 Apple Developer Portal에 정확히 일치하는지 확인하세요. APPLE_REDIRECT_URI secret
• Deep link가 작동하지 않습니다. : intent filter가 정확히 일치하는지 확인하세요. AndroidManifest.xml secret BASE_REDIRECT_URL
• : 모든 secret가 올바르게 설정되었는지 확인하세요.Token exchange fails supabase secrets list
• : Edge Function 로그를 Supabase Dashboard에서 자세한 오류 메시지로 확인하세요.App이 callback을 받지 않습니다.
• __CAPGO_KEEP_0__: __CAPGO_KEEP_0__을 올바르게 구현하십시오. onNewIntent MainActivity에서 __CAPGO_KEEP_0__이 올바르게 구현되었는지 확인하십시오.
• 예시 앱 __CAPGO_KEEP_0__을 참조하십시오. 참조용 예시 앱 code 작동 방식

작동 방식

초기화

1. Service ID와 백엔드 리다이렉트 URL을 사용하여 플러그인을 초기화합니다.OAuth 흐름
2. 브라우저/Chrome Custom Tab을 열어 Apple의 OAuth 페이지로 이동합니다.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 지원을 제공하지 않기 때문에 필요합니다.

Supabase Apple 로그인 Android에서 계속

If you are using Apple Supabase 로그인 on 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의 구현 세부 정보를 위해, 두 단계 인증 두 단계 인증의 구현 세부 정보를 위해.