Supabase 통합 소개

개요

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

What You’ll Learn

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

What You’ll Need

시작하기 전에 다음을 확인하세요:

1. Supabase 프로젝트

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

2. Supabase JS SDK

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

     npm install @supabase/supabase-js

3. A Capacitor 프로젝트

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

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

4. 플랫폼별 Google 설정

   • Google Sign-In 설정을 완료하여 대상 플랫폼에 대한 설정을 완료하세요:
     • Google 로그인 Android 설정
     • Google 로그인 iOS 설정
     • Google 로그인 웹 설정

예제 애플리케이션

리포지토리에 완전한 작동 예제가 있습니다:

Code 리포지토리: code 리포지토리를 찾으려면 여기를 클릭하세요

예제 앱은:

• Supabase 이메일/패스워드 인증
• Google Sign-In (Android, iOS, Web) 통합
• Supabase PostgreSQL 테이블을 사용하는 간단한 키-값 저장소
• Row Level Security (RLS) 를 사용한 사용자별 데이터 저장소

구현 세부 사항

비밀번호 처리

보안을 위해 Supabase 에서 특별한 비밀번호 처리가 필요합니다. 구현은 React Native Google Sign In 문서를 따릅니다. 생성:

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

JWT Validation

예시 구현에는 JWT 검증을 포함하여 보장합니다.

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

플랫폼별 고려 사항

• iOS: 토큰 캐싱이 비번 문제를 일으킬 수 있으므로 implementation은 자동으로 이를 처리합니다.
• Web: 마운트 시에 OAuth 리다이렉션을 처리하기 위해 호출해야 합니다. isLoggedIn() Android
• : 표준 implementation에 SHA-1 finger print 설정다음 단계

다음 단계

Supabase Google 로그인 - 일반 설정

• 다음 단계 - 개요 및 사전 조건
• 안드로이드 설정 - 안드로이드 전용 설정
• iOS 설정 - iOS 전용 설정
• 웹 설정 - 웹 전용 설정

애플 로그인

• Supabase Apple 로그인 - 일반 설정 - 개요 및 사전 조건
• iOS 설정 - iOS-specific configuration
• 안드로이드 설정 - 안드로이드-specific configuration

Supabase 통합 소개에서 계속

Supabase 통합을 사용하여 Supabase 통합 소개 인증 및 계정 흐름을 계획하고 연결하려면 Using @capgo/capacitor-social-login Using @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, 그리고 두 단계 인증 구현 세부 정보에 대해 두 단계 인증.