Supabase 통합 소개

개요

이 튜토리얼은 Capacitor Social Login 플러그인과 Supabase 인증을 설정하는 방법을 안내합니다. 이 통합은 native social login 제공자 (Google, Apple, Facebook, Twitter)를 모바일 플랫폼에서 사용하고 Supabase Auth를 백엔드 인증 및 PostgreSQL를 데이터 저장소로 사용할 수 있습니다.

학습할 내용

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

필요한 것

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

1. Supabase 프로젝트

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

2. Supabase JS SDK

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

     npm install @supabase/supabase-js

3. Capacitor 프로젝트

   • 기존 Capacitor 애플리케이션
   • Capacitor Social Login 플러그인 설치:

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

4. 플랫폼별 구글 설정

   • __CAPGO_KEEP_0__ 프로젝트의 대상 플랫폼에 대한 구글 시그니인 설정을 완료하세요:
     • 구글 로그인 안드로이드 설정
     • 구글 로그인 iOS 설정
     • 구글 로그인 웹 설정

예시 애플리케이션

작동하는 예시가 저장소에 있습니다:

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

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

• Supabase를 사용한 이메일/암호 인증
• 구글 Sign-In 통합 (안드로이드, iOS, 웹)
• Supabase PostgreSQL 테이블을 사용한 간단한 키-값 저장소
• 사용자 고유 데이터 저장소에 Row Level Security (RLS)가 적용되어 있습니다.

Key Implementation Details

Nonce Handling

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

• Generate a rawNonce __CAPGO_KEEP_0__ URL-safe random string
• __CAPGO_KEEP_0__를 SHA-256로 해시하여 nonceDigest
• __CAPGO_KEEP_1__를 Google Sign-In에 전달합니다. nonceDigest __CAPGO_KEEP_1__
• Pass rawNonce Supabase로 전달하여 (Supabase는 내부적으로 비교를 위해 해시합니다)

JWT Validation

The example implementation includes JWT validation to ensure:

• 구글 클라이언트 ID와 일치하는 토큰 대상이 구성되었습니다
• 기대되는 해시와 일치하는 nonce
• 유효성 검사 실패 시 자동 재시도 (iOS의 경우 특히 중요합니다)

Platform-Specific Considerations

• iOS토큰 캐싱이 nonce 문제를 일으킬 수 있으므로 implementation은 자동으로 처리합니다
• 웹: 인증 리다이렉트를 처리하기 위해 OAuth Redirects를 호출해야 합니다. isLoggedIn() 안드로이드
• : SHA-1 지문 구성과 함께 표준 implementation다음 단계

Next Steps 섹션

Supabase Google Login - 일반 설정

• - 개요 및 사전 요구 사항 안드로이드 설정
• - 안드로이드 전용 구성 Continue with the setup guides:__CAPGO_KEEP_0__
• iOS 설정 - iOS에 특화된 구성
• 웹 설정 - 웹에 특화된 구성

애플 로그인

• Supabase Apple 로그인 - 일반 설정 - 개요 및 사전 조건
• iOS 설정 - iOS에 특화된 구성
• 안드로이드 설정 - 안드로이드에 특화된 구성

Supabase 통합에서 계속 진행하기

__CAPGO_KEEP_0__을 사용 중이라면 Supabase 통합에서 계속 진행하기 인증 및 계정 흐름을 계획하고 있다면 __CAPGO_KEEP_0__을 연결하세요. 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 에서 찾을 수 있습니다. 두 단계 인증 구현 세부 정보는 두 단계 인증 에서 찾을 수 있습니다.