애플 로그인 on Android

GitHub

설치

필수 조건

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

the Supabase Apple Login - 일반 설정.

1단계: 백엔드 Edge Function 배포

먼저 Supabase Edge Function을 배포하여 Apple OAuth callback을 처리해야 합니다.

Supabase 프로젝트 디렉토리로 이동하세요
터미널 창
```
cd your-project/supabase
```
에지 함수를 생성하세요 (만약 존재하지 않으면)
터미널 창
```
supabase functions new apple-signin-callback
```
code 에지 함수를 복사하세요

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

- 메인 에지 함수 __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 서명에 대한 라이브러리
JWT 검증을 구성하십시오

Apple OAuth callback endpoint는 공개되어야 합니다. (인증이 필요하지 않습니다.) Apple은 이를 호출합니다. 따라서 Apple OAuth callback endpoint를 업데이트하십시오. 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 함수 배포

터미널 창

supabase functions deploy apple-signin-callback

함수 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
You’ll need this URL in the next step when configuring Apple Developer Portal.

Step 2: Apple Developer Portal을 구성하세요.

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

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

Apple Login Android 설정 가이드를 완료하세요. 을 따라하세요: Service ID를 생성하세요.
- 개인 키 (.p8 파일)를 생성하세요.
- Follow the Apple Login Android Setup Guide
- 팀 ID와 키 ID를 가져오세요.
- 리턴 URL을 구성하세요.
애플 개발자 포털에서 리턴 URL을 설정하세요.

애플 개발자 포털에서 리턴 URL을 구성할 때 (애플 가이드의 6.9 단계), Supabase Edge Function URL을 사용하세요:
```
https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
```
중요: Supabase Edge Function URL을 사용하세요.
사용하지 마세요. 애플 로그인 안드로이드 설정 가이드에서 제공하는 리다이렉트 URL을 사용하지 마세요. . 이 가이드는 커스텀 백엔드 서버 URL을 사용합니다. Supabase 통합을 위해, 반드시 Supabase Edge Function URL을 사용해야 합니다. 이 가이드는 커스텀 백엔드 서버 URL을 사용합니다. Supabase 통합을 위해,

리턴 URL은 여기에서 설정한 것과 정확히 일치해야 합니다. 정확히 Apple은 리다이렉트 URI 일치에 매우 엄격합니다.
필요한 모든 값을 수집하세요.

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: 인증 후 백엔드가 리다이렉트할 수 있는 깊이 링크 URL (예를 들어,) capgo-demo-app://path)
깊이 링크 URL BASE_REDIRECT_URL 깊이 링크 URL AndroidManifest.xml깊이 링크 URL
깊이 링크 URL android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" 애플리케이션에서 AndroidManifest.xml, 그러면 깊은 링크는 capgo-demo-app://path.

3단계: Supabase 비밀을 설정하세요

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

개인 키를 인코딩하세요

먼저, Apple 개인 키 (.p8 파일)를 base64로 인코딩하세요:
터미널 창
```
base64 -i AuthKey_XXXXX.p8
```
전체 출력을 복사하세요 (단일 긴 문자열입니다).

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

대안: Supabase 대시보드에서 비밀번호 설정

대시보드를 사용하는 경우:
1. Supabase 프로젝트 대시보드에 가세요
2. 가장자리 Edge Functions → 설정 → 비밀
3. 각 비밀 변수에 실제 값을 추가하세요

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

Helper 함수 업데이트

__CAPGO_KEEP_0__을 사용하여 앱에서 인증 도우미를 사용할 수 있습니다. authenticateWithAppleSupabase 도움을 주는 함수, 당신 해야 합니다 다음 값들을 당신의 설정에 맞게 업데이트해야 합니다:

업데이트 redirectUrl - 이에 해당하는 Supabase Edge Function URL을 설정하세요:

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

업데이트 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에서 사용한 값입니다.

참조하세요. 구현의 전체 예제 참조하세요.

5단계: 통합 테스트

Android 앱을 빌드하고 실행하세요.
터미널 창
```
npx cap sync android
npx cap run android
```
인증 흐름을 테스트하세요.
- Apple 로그인 버튼을 탭하세요.
- 애플 OAuth 페이지는 브라우저에서 볼 수 있어야 합니다.
- 인증 후 앱으로 돌아가야 합니다.
- 콘솔 로그를 확인하여 오류가 있는지 확인하세요.
플로우를 확인하세요.

완전한 플로우는 다음과 같습니다.
1. 사용자가 “애플로 로그인” 버튼을 클릭합니다.
2. 앱은 브라우저를 열어 애플 OAuth를 여세요.
3. 사용자가 애플과 인증합니다.
4. 애플은 다음과 같은 URL로 리다이렉트합니다. https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
5. Edge 함수는 code를 토큰으로 교환합니다.
6. Edge 함수는 다음과 같은 URL로 리다이렉트합니다. your-app://path?id_token=...&access_token=...
7. 안드로이드 앱은 깊이 링크를 수신하고 사용자 식별 토큰을 처리합니다.
8. __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

__CAPGO_KEEP_3__

__CAPGO_KEEP_4____CAPGO_KEEP_5__ APPLE_REDIRECT_URI __CAPGO_KEEP_6__
__CAPGO_KEEP_7____CAPGO_KEEP_8__ AndroidManifest.xml __CAPGO_KEEP_9__ BASE_REDIRECT_URL
__CAPGO_KEEP_10____CAPGO_KEEP_11__ supabase secrets list
토큰 교환 실패: Supabase 대시보드의 Edge Function 로그를 확인하여 자세한 오류 메시지를 확인하세요
앱이 콜백을 받지 못합니다: MainActivity 에서 properly implemented 여부를 확인하세요 onNewIntent MainActivity 에서 properly implemented 여부를 확인하세요
예시 앱 __CAPGO_KEEP_0__ example app code How It Works

앱 빌드 방법

Android 에서 Apple Sign-In은 OAuth 리다이렉트 흐름을 사용합니다:: Capgo 플러그인은 Service ID와 백엔드 리다이렉트 URL로 초기화됩니다.
OAuth Flow: Apple의 OAuth 페이지에서 브라우저/Chrome 커스텀 탭이 열립니다.
백엔드 콜백: Apple은 인증 code를 Supabase Edge Function으로 리다이렉트합니다.
토큰 교환: Edge Function은 Apple의 토큰 엔드포인트를 사용하여 code를 토큰으로 교환합니다.
딥 링크 리다이렉트: Edge Function은 앱으로 리다이렉트하여 identity 토큰을 전달합니다.
Supabase 인증: 앱은 토큰을 수신하고 Supabase에 로그인합니다.

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

만약 당신이 Supabase Apple Android 인증 및 계정 흐름을 계획하고 싶다면 Capacitor에서 @capgo/capacitor-social-login Capacitor에서 @capgo/capacitor-social-login Capacitor에서 @capgo/capacitor-social-login Capacitor에서 @capgo/capacitor-passkey Capacitor에서 @capgo/capacitor-passkey Capacitor에서 @capgo/capacitor-native-biometric Capacitor에서 @capgo/capacitor-native-biometric capgo/capacitor-native-biometric 두 단계 인증 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric