__CAPGO_KEEP_0__
이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 명령어를 복사하세요.
개요
개요 섹션Capacitor Social Login 플러그인을 사용하여 Supabase 인증을 설정하는 방법에 대한 이 튜토리얼을 따라하면 native social login 제공자 (Google, Apple, Facebook, Twitter)를 모바일 플랫폼에서 사용할 수 있으며 Supabase Auth를 사용하여 백엔드 인증 및 PostgreSQL를 사용하여 데이터 저장소를 사용할 수 있습니다.
학습할 내용
학습할 내용 섹션- Supabase 인증을 구성하는 방법
- Capacitor Social Login 플러그인을 Supabase Auth와 통합하는 방법
- Android, iOS, Web 플랫폼에 대한 설정
- Supabase 인증을 안전하게 처리하는 방법
필요한 것
시작하기 전에 다음을 확인하세요:Before you begin, make sure you have:__CAPGO_KEEP_0__
-
A Supabase Project
- __CAPGO_KEEP_0__을 생성하세요. Supabase 대시보드
- Google OAuth 제공자를 활성화하세요.
- Supabase 프로젝트 URL과 anon 키를 가져오세요.
-
Supabase JS SDK
- __CAPGO_KEEP_0__을 프로젝트에 설치하세요.
터미널 창 npm install @supabase/supabase-js
- __CAPGO_KEEP_0__을 프로젝트에 설치하세요.
-
Capacitor 프로젝트
- 기존 Capacitor 애플리케이션
- Capacitor 소셜 로그인 플러그인 설치:
터미널 창 npm install @capgo/capacitor-social-loginnpx cap sync
-
플랫폼별 구글 설정
- 대상 플랫폼에 맞는 구글 로그인 설정을 완료하세요:
예제 애플리케이션
예제 애플리케이션 섹션작업 가능한 예제가 저장소에 있습니다:
Code 저장소: code 저장소를 여기서 찾을 수 있습니다.
예시 앱은 다음을 보여줍니다:
- Supabase를 사용한 이메일/암호 인증
- Android, iOS, 및 Web에서 Google Sign-In 통합
- Supabase PostgreSQL 테이블을 사용한 간단한 키-값 저장소
- Row Level Security (RLS)를 사용한 사용자별 데이터 저장
구현 세부 사항
구현 세부 사항Nonce 처리
Nonce 처리보안을 위해 특별한 nonce 처리가 필요합니다. implementation은 React Native Google Sign In 문서를 따릅니다. Generate a:
- __CAPGO_KEEP_0__
rawNonce(URL-safe random string) - __CAPGO_KEEP_0__을 SHA-256로 해시하여 얻습니다.
nonceDigest - Pass
nonceDigestGoogle Sign-In으로 전달 - Google Sign-In으로 전달
rawNonceSupabase로 전달 (Supabase는 내부적으로 해시하여 비교합니다.)
JWT Validation
JWT Validation예제 구현에는 JWT 검증을 포함하여 다음을 확인합니다:
- 구독자 토큰이 구성된 Google Client ID와 일치합니다.
- 해시된 비어있는 문자열이 예상된 해시와 일치합니다.
- 검증 실패 시 자동 재시도 (iOS의 경우 특히 중요합니다.)
플랫폼별 고려 사항
플랫폼별 고려 사항 섹션- iOS: 토큰 캐싱이 nonce 문제를 일으킬 수 있으므로 implementation은 자동으로 이를 처리합니다.
- Web: 마운트 시 OAuth 리다이렉션을 처리하기 위해 호출해야 합니다.
isLoggedIn()Android - : 표준 implementation과 SHA-1 fingerprint configuration을 사용합니다.다음 단계
다음 단계 섹션
설정 가이드를 계속 진행하세요:__CAPGO_KEEP_0__
- Supabase Google 로그인 - 일반 설정 - Google 로그인에 대한 개요 및 사전 조건
- Android 설정 - Android 전용 설정
- iOS 설정 - iOS 전용 설정
- 웹 설정 - 웹 전용 설정
Apple Sign-In
Apple Sign-In- Supabase Apple 로그인 - 일반 설정 - Apple 로그인에 대한 개요 및 사전 조건
- iOS 설정 - iOS 전용 설정
- Android 설정 - Android 전용 설정