Supabase 통합 소개

개요

이 튜토리얼은 Supabase 인증과 Capacitor 소셜 로그인 플러그인을 사용하여 설정하는 방법을 안내합니다. 이 통합은 모바일 플랫폼에서 네이티브 소셜 로그인 제공자 (Google, Apple, Facebook, Twitter)를 사용하면서 백엔드 인증과 PostgreSQL 데이터 저장을 위해 Supabase Auth를 사용할 수 있도록 합니다.

학습할 내용

• Supabase 인증을 구성하는 방법
• Capacitor Social Login 플러그인을 Supabase Auth와 통합하는 방법
• Android, iOS, Web 플랫폼에 대한 설정
• Supabase에 대한 nonce를 안전하게 처리하는 방법

필요한 것

시작하기 전에 확인해야 할 사항

1. Supabase 프로젝트

   • 프로젝트를 생성하려면 Supabase 대시보드
   • Google OAuth 제공자 활성화
   • Supabase 프로젝트 URL과 anon 키를 가져오세요

2. Supabase JS SDK

   • 프로젝트에 Supabase를 설치하세요:

     npm install @supabase/supabase-js

3. Capacitor 프로젝트

   • 이미 존재하는 Capacitor 애플리케이션
   • Capacitor Social Login 플러그인 설치:

     npm install @capgo/capacitor-social-login
     npx cap sync

4. 플랫폼별 Google 설정

   • Google 로그인 설정을 완료하세요.
     • Android용 Google 로그인 설정
     • iOS용 Google 로그인 설정
     • 웹용 Google 로그인 설정

예시 애플리케이션

작업 가능한 예시가 저장소에 있습니다.

Code 저장소: code 저장소에서 찾을 수 있습니다.

예시 앱은 다음을 보여줍니다.

• Supabase를 사용한 이메일/비밀번호 인증
• Google Sign-In 통합 (Android, iOS, Web)
• A simple key-value store using Supabase PostgreSQL tables
• 사용자별 데이터 저장소에 Row Level Security (RLS)를 사용합니다.

Key Implementation Details

Nonce Handling

보안을 위해 Supabase는 특별한 nonce 처리가 필요합니다. implementation은 React Native Google Sign In 문서를 따릅니다. Nonce를 생성하세요.:

• (URL-safe random string) rawNonce SHA-256으로 해시하세요.
• Pass nonceDigest
• __CAPGO_KEEP_0__ nonceDigest Google Sign-In으로 이동
• Pass rawNonce Supabase (내부적으로 비교를 위해 해시합니다.)로 이동

JWT Validation

예제 구현은 다음을 확인하기 위해 JWT 검증을 포함합니다.

• 구성된 Google Client ID와 일치하는 토큰 수신자
• 예상된 해시와 일치하는 nonce
• 검증 실패 시 자동 재시도 (iOS의 경우 특히 중요합니다.)

플랫폼별 고려 사항

• iOS: Token caching can cause nonce issues - __CAPGO_KEEP_0__ automatically 처리
• 웹: __CAPGO_KEEP_0__ 호출 isLoggedIn() 안드로이드
• : 표준 implementation with SHA-1 fingerprint configuration다음 단계

다음 단계 섹션

Supabase Google Login - 일반 설정

• - 개요 및 사전 조건 안드로이드 설정
• Continue with the setup guides: - 안드로이드 전용 설정
• iOS 설정 - iOS 전용 설정
• 웹 설정 - 웹 전용 설정

애플 로그인

• Supabase Apple Login - 일반 설정 - 개요 및 사전 조건
• iOS 설정 - iOS 전용 설정
• 안드로이드 설정 - 안드로이드 전용 설정

Keep going from Supabase Integration Introduction

If you are using Supabase Integration Introduction to plan authentication and account flows, connect it with Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-생체인증 implementation 세부사항은 @capgo/capacitor-native-생체인증에서 확인하실 수 있습니다. 두 단계 인증 두 단계 인증의 implementation 세부사항은