내용으로 건너뛰기

Supabase Apple 로그인 Android

GitHub

설치 전 필요 조건

설치 전 필요 조건

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

Step 1: 백엔드 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"
  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을 저장하세요

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

애플 개발자 포털 구성

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

  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을 사용합니다.

  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)

, then your deep link will be

Step 3: Supabase Edge Function 설정

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. __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__ 변수에 각 비밀 변수와 값을 추가하세요.

Step 4: 인증 도우미 사용

Step 4: 인증 도우미 사용

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

Implementation

Implementation

The complete implementation is available in the 예시 앱의 supabaseAuthUtils.ts 파일에 있습니다.

인증 Helper를 사용하는 경우

제목: “인증 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 함수를 사용할 때는 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,
    },
    });

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

  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에서 계속

Android에서 Supabase Apple 로그인에서 계속하기

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의 구현 세부 정보를 위해, 두 단계 인증 두 단계 인증의 구현 세부 정보를 위해.