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

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

Supabase 프로젝트
- 프로젝트를 생성하세요. Supabase 대시보드
- Google OAuth 제공자 활성화
- Supabase 프로젝트 URL 및 anon 키 가져오기
Supabase JS SDK
- 프로젝트에 Supabase 설치:
  터미널 창
```
npm install @supabase/supabase-js
```
A Capacitor 프로젝트
- 기존 Capacitor 애플리케이션
- Capacitor Social Login 플러그인 설치:
  터미널 창
```
npm install @capgo/capacitor-social-login
npx cap sync
```
플랫폼별 Google 설정
- 대상 플랫폼에 맞게 Google Sign-In 설정을 완료하세요:

예제 애플리케이션

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

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

예제 앱은 다음과 같은 것을 보여줍니다:

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

Key Implementation Details

Nonce 처리

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

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

JWT Validation

예제 구현에는 다음을 확인하기 위해 JWT 검증이 포함됩니다.

구성된 Google Client ID와 일치하는 토큰 수신자
기대되는 해시와 일치하는 nonce
검증 실패 시 자동 재시도 (iOS의 경우 특히 중요)

플랫폼별 고려 사항

iOS: 토큰 캐싱이 비어난 문제를 일으킬 수 있으므로 implementation은 자동으로 처리합니다.
웹: 마운트 시 OAuth 리다이렉션을 처리하기 위해 호출해야 합니다. isLoggedIn() 안드로이드
: 표준 implementation과 SHA-1 finger print 구성다음 단계

설정 가이드를 계속 진행하세요:

설정 가이드를 계속 진행하세요: Supabase Google Login - General Setup

설정 가이드를 계속 진행하세요: Supabase Google Login - General Setup - 개요 및 사전 조건
안드로이드 설정 - 안드로이드 전용 설정
iOS 설정 - iOS 전용 설정
웹 설정 - 웹 전용 설정

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