__CAPGO_KEEP_0__

개요

Capacitor Social Login 플러그인을 사용하여 Supabase 인증과 통합하는 방법에 대한 이 튜토리얼을 따라서 Supabase 인증과 Capacitor Social Login 플러그인을 설정하는 방법을 배웁니다. 이 통합은 모바일 플랫폼에서 네이티브 소셜 로그인 제공자 (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 소셜 로그인 플러그인 설치:

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

4. 플랫폼별 구글 설정

   • 타겟 플랫폼에 대한 구글 로그인 설정을 완료하세요:
     • 구글 로그인 안드로이드 설정
     • 구글 로그인 iOS 설정
     • 구글 로그인 웹 설정

예제 애플리케이션

리포지토리에서 완전한 작동 예제가 제공됩니다:

Code 리포지토리: code 리포지토리를 찾으십시오

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

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

중요한 구현 세부 사항

Nonce 처리

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

• (URL-safe random string) rawNonce SHA-256으로 __CAPGO_KEEP_0__를 해시하여
• __CAPGO_KEEP_1__ nonceDigest
• Google Sign-In에 __CAPGO_KEEP_1__를 전달하세요 nonceDigest Supabase (Supabase 내부에서 __CAPGO_KEEP_0__와 비교하기 위해 해시합니다)
• JWT Validation rawNonce JWT 유효성 검증

Section titled “JWT Validation”

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

• 토큰 청중이 구성된 Google Client ID와 일치합니다
• 해시값이 예상되는 nonce와 일치합니다
• 유효성 검사 실패 시 자동으로 다시 시도합니다 (iOS의 경우 특히 중요합니다)

플랫폼별 고려 사항

• iOS: 토큰 캐싱이 nonce 문제를 일으킬 수 있으므로 구현은 자동으로 처리합니다
• Web: 마운트 시 OAuth 리다이렉션을 처리하기 위해 호출해야 합니다 isLoggedIn() Android
• Android: 표준 implementation에 SHA-1 fingerprint 구성

다음 단계

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

• Supabase Google Login - 일반 설정 - 개요 및 사전 조건
• Android 설정 - Android 전용 구성
• iOS 설정 - iOS 전용 구성
• 웹 설정 - 웹 전용 구성

애플 로그인

• Supabase Apple 로그인 - 일반 설정 - 개요 및 사전 조건
• iOS 설정 - iOS 전용 구성
• Android 설정 - Android 전용 구성

__CAPGO_KEEP_0__

Supabase 통합 소개에서 계속하기 섹션 Supabase를 사용 중이라면 인증 및 계정 흐름을 계획하고 연결하려면 @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의 구현 세부 정보를 사용하여 2단계 인증 2단계 인증의 구현 세부 정보를 사용하여