내용으로 건너뛰기
Capgo - Capacitor을 빌드, 배포 및 업데이트 하세요 Capgo

14일 동안 무제한 무료试用. 신용 카드가 필요하지 않습니다.

GitHub

기본 조건

기본 조건 섹션

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

1단계: 백엔드 에지 함수를 배포하세요

Step 1: 백엔드 Edge Function 배포

context: Page/area: About Capgo 페이지. Role: UI 레이블. Seen in: page about.astro. Message key `about_how_step_label` (About How Step Label).

  1. Step 1: 백엔드 Edge Function 배포 섹션입니다.

    터미널 창
    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 - 메인 에지 함수 code
    • supabase/functions/apple-signin-callback/deno.json (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"

  5. 함수 배포

    터미널 창
    supabase functions deploy apple-signin-callback

  6. URL을 가져오세요.

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

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

    만약 찾을 수 없다면 다음을 시도해 보세요.

    1. Open https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
    2. 열기 apple-signin-callback 클릭하여 URL을 복사하기 위해

2단계: 애플 개발자 포털 설정

Step 2: Apple Developer Portal 설정

Apple Developer Portal을 백엔드 URL과 함께 구성하고 필요한 모든 값을 얻어야 합니다.

  1. Apple Login Android 설정 안내서를 따라하세요

    Apple Login Android 설정 안내서를 완료하세요 으로 to:

    • .p8 파일을 생성하여 개인 키를 만드세요
    • 팀 ID와 키 ID를 얻으세요
    • Apple Login Android 설정 안내서를 따라하세요
    • 설정 URL을 구성하세요.

  2. 애플 개발자 포털에서 Return URL을 설정하세요.

    애플 개발자 포털에서 Return 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을 사용해야 합니다.

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

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

    • APPLE_TEAM_ID: Apple Developer Team ID
    • APPLE_KEY_ID: Apple Developer Portal에서 Key ID
    • APPLE_PRIVATE_KEY: .p8 개인 키 파일 (base64 인코딩이 필요합니다.)
    • 안드로이드 서비스 ID: 애플 서비스 ID (예: com.example.app.service)
    • 기본 리다이렉트 URL: 인증 후 백엔드에 리다이렉트 될 URL (예: capgo-demo-app://path)

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

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

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

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

    1. Supabase 프로젝트 대시보드에 가세요.
    2. 이동 에지 함수 → 설정 → 비밀
    3. 각 비밀 변수에 변수 값을 추가하세요.

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

Step 4: 인증 도우미 사용

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

구현

구현

구현은 예제 앱의 supabaseAuthUtils.ts file.

인증 도우미 사용

Section titled “인증 도우미 사용”
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);
}

업데이트 도우미 함수

Section titled “업데이트 도우미 함수”

helper 함수를 사용할 때 authenticateWithAppleSupabase 당신 해야 합니다. 다음 설정 값을 자신의 설정과 일치시키기 위해 업데이트하십시오:

  1. 업데이트 redirectUrl Set this to your Supabase Edge Function URL:

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

  2. 업데이트 clientId Set this to your 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,
      },
    });

참조용으로 완전한 구현을 참조하세요. 참조용으로

5단계: 통합 테스트

Step 5: Integration 테스트

  1. 5단계: 통합 테스트

    Android 앱을 빌드하고 실행하세요.
    npx cap sync android
    npx cap run android

  2. 클립보드에 복사

    • 애플 로그인 버튼을 탭하세요
    • 인증 흐름을 테스트하세요.
    • 인증이 완료되면 앱으로 돌아가야 합니다.
    • 콘솔 로그를 확인하여 오류가 있는지 확인하세요.

  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에 로그인합니다.

문제 해결

문제 해결 섹션

인증이 실패하면:

  • 리다이렉션 URI 일치하지 않음: Apple 개발자 Portal의 Return URL이 정확히 일치하는지 확인하세요. APPLE_REDIRECT_URI 비밀
  • 깊이 연결이 작동하지 않음: AndroidManifest.xml 인텐트 필터가 BASE_REDIRECT_URL
  • 비밀이 누락됨: supabase secrets list
  • 토큰 교환 실패: Supabase 에서 에지 함수 로그를 확인하여 자세한 오류 메시지를 확인하세요.
  • 앱이 콜백을 받지 못합니다.: Ensure onNewIntent 이것이 올바르게 구현되어 있는지 확인하세요.
  • 리뷰 예시 앱 code 참조

Native Build 방법

페이지: Capgo Builder / 네이티브 클라우드 빌드 제품 페이지. 역할: 섹션 또는 페이지 제목. 메시지 키 `native_build_how_it_works_title` (네이티브 빌드 How It Works 제목). | 홈 페이지 문제/해결 섹션. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 페이지: 프리미엄 지원.astro. 메시지 키 `ps_how_it_works` (Ps How It Works). | 라이브 업데이트 제품 페이지. 역할: 섹션 또는 페이지 제목. 메시지 키 `live_update_how_it_works_title` (라이브 업데이트 How It Works 제목).

How It Works 섹션

  1. Initialization초기화하기: 플러그인은 Service ID와 백엔드 리다이렉트 URL로 초기화됩니다.
  2. OAuth Flow: 애플의 OAuth 페이지에서 브라우저/Chrome Custom Tab을 열어줍니다.
  3. 백엔드 콜백: 애플이 Supabase Edge Function으로 인증 code를 전달합니다.
  4. 토큰 교환: Edge Function이 애플의 토큰 엔드포인트를 사용하여 code를 토큰으로 교환합니다.
  5. 디프 링크 리다이렉트: Edge Function이 앱으로 돌아가서 identity 토큰을 전달합니다.
  6. Supabase 인증: 앱이 토큰을 수신하고 Supabase에 로그인합니다.

애플 로그인 플러그인은 애플의 native Android 지원이 Sign in with Apple에 대해 제공되지 않기 때문에 이 흐름이 필요합니다.

애플 로그인(Supabase Apple Login)에서 계속 진행

Section titled “Android에서 Supabase Apple 로그인 계속하기”

만약 당신이 사용 중이라면 Supabase Apple 로그인 on Android 인증 및 계정 흐름을 계획하고 연결하려면 @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric 두 단계 인증 두 단계 인증 구현에 대한 구체적인 정보