애플 로그인 - 일반 설정

GitHub

설치

붙여넣기

개요

준비 사항

준비 사항
시작하기 전에 다음을 확인하세요. Supabase 프로젝트를 생성했습니다. (Supabase 프로젝트를 생성했습니다.) Apple OAuth 인증 설정 가이드
대상 플랫폼에 맞는 플랫폼별 가이드를 따라 Apple OAuth 인증을 설정하세요:
Supabase 튜토리얼을 시작하기 전에, 사용할 플랫폼에 맞는 클라이언트 ID를 생성해야 합니다.
iOS의 경우 클라이언트 ID는 앱 ID와 동일합니다. Android 및 웹의 경우 클라이언트 ID는 서비스 ID와 동일합니다. 이 가이드의 7단계에서 사용하겠습니다.

Supabase에서 Apple OAuth 제공자를 활성화하는 방법

애플리케이션에 가서 Supabase 대시보드
프로젝트를 클릭하세요
다음으로 이동하세요 Authentication 메뉴
선택하세요 Providers 탭
Apple 제공자 Apple Apple 제공자
Apple 로그인 기능을 활성화하세요. Apple 제공자
클라이언트 ID 설정을 입력하세요:

iOS에서 Apple 로그인을 사용하는 경우, 클라이언트 ID는 앱 ID와 동일합니다. Android 또는 Web에서 Apple 로그인을 사용하는 경우, 클라이언트 ID는 서비스 ID와 동일합니다. 둘 다 사용하는 경우, 앱 ID와 서비스 ID를 모두 제공해야 합니다.
버튼을 클릭하세요. Save Supabase Apple 제공자 저장

당신은 설치할 필요가 없습니다 설정 Secret key (for OAuth)완료되었습니다

Voilà, 이제 Apple Sign-In을 Supabase 인증과 함께 활성화했습니다 🎉

인증 도우미를 사용하는 방법

인증 도우미 함수는 Apple Sign-In의 전체 흐름을 Supabase와 함께 처리합니다. authenticateWithAppleSupabase() Apple Sign-In을 플랫폼에 맞게 초기화합니다.

인증 흐름을 처리합니다 (iOS에서 네이티브, Android/Web에서 OAuth 리다이렉트)
설정
Apple ID 토큰을 추출합니다.
Supabase에 ID 토큰으로 로그인합니다.

기본 사용법

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

역할: Capgo Builder / 네이티브 클라우드 빌드 제품 페이지. 역할: 섹션 또는 페이지 제목. 메시지 키 `native_build_how_it_works_title` (네이티브 빌드 작동 방식 제목). | 페이지/영역: 홈 페이지 문제/해결 섹션. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. Seen in: 페이지 프리미엄-서포트.astro. 메시지 키 `ps_how_it_works` (PS 작동 방식). | 페이지/영역: 라이브 업데이트 제품 페이지. 역할: 섹션 또는 페이지 제목. Seen in: 페이지 라이브-업데이트.astro. 메시지 키 `live_update_how_it_works_title` (라이브 업데이트 작동 방식 제목).

플랫폼에 따라 자동으로 다루는 도우미 함수:

iOS: 네이티브 애플 로그인 사용 (리다이렉트 URL 필요하지 않음, 자동으로 번들 ID 사용)
Android: 백엔드 에지 함수를 사용하는 OAuth 리다이렉트 흐름 (Service ID 필요)
웹: OAuth 팝업 흐름 사용 (Service ID와 현재 페이지 URL을 리다이렉트로 필요)

Apple에서 반환하는 식별 토큰을 사용하여 Supabase와 인증합니다. supabase.auth.signInWithIdToken().

Supabase Apple 로그인 - 일반 설정을 사용하는 경우 Supabase Apple 로그인 - 일반 설정 인증 및 계정 흐름을 계획하고 연결하려면 Using @capgo/capacitor-social-login Using @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 Two-factor authentication Two-factor authentication