Firebase 연동 소개

개요

이 튜토리얼에서는 Capacitor Social Login 플러그인을 사용하여 Firebase Authentication을 설정하는 방법을 안내합니다. 이 통합을 통해 모바일 플랫폼에서 네이티브 소셜 로그인(Google, Apple, Facebook, Twitter)을 사용하면서, 백엔드 인증에는 Firebase Auth를, 데이터 저장에는 Firestore를 활용할 수 있습니다.

배우게 될 내용

• Firebase Authentication 구성 방법
• Capacitor Social Login 플러그인과 Firebase Auth 통합 방법
• Android, iOS 및 Web 플랫폼별 설정

준비 사항

시작하기 전에 다음 사항을 준비하세요:

1. Firebase 프로젝트

   • 다음에서 프로젝트를 생성하세요: Firebase Console
   • 인증 활성화 (이메일/비밀번호 및 Google 로그인)
   • Firebase 설정 자격 증명 가져오기

2. Firebase JS SDK

   • 프로젝트에 Firebase 설치:

     npm install firebase

3. Capacitor 프로젝트

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

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

예제 애플리케이션

전체 동작 예제는 다음 저장소에서 확인할 수 있습니다:

Code 저장소: code 저장소는 여기에서 확인할 수 있습니다

예제 앱에서 보여주는 기능:

• Firebase를 이용한 이메일/비밀번호 인증
• Google Sign-In 연동 (Android, iOS, Web)
• Firebase Firestore 컬렉션을 활용한 간단한 Key-Value 저장소
• Firestore 서브컬렉션을 이용한 사용자별 데이터 저장

Capacitor에서 Firebase SDK 사용 시 주의사항

Capacitor에서 Firebase JS SDK를 사용할 때, 인증 메서드를 사용하려면 Firebase Auth 인스턴스를 조금 다르게 초기화해야 한다는 점에 유의하세요.

웹 플랫폼에서는 다음을 사용합니다: getAuth function을 통해 Firebase Auth 인스턴스를 가져옵니다.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

하지만 Capacitor에서는 이 방식이 작동하지 않아 Firebase 인증이 멈추는 현상이 발생합니다. 다음 블로그 포스트에 설명된 것처럼, Firebase Auth 인스턴스를 초기화하려면 initializeAuth function을 사용해야 합니다. 코드는 다음과 같습니다:

import { initializeApp } from 'firebase/app';
import { initializeAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);

function whichAuth() {
  let auth;
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    auth = getAuth(app);
  }
  return auth;
}

export const auth = whichAuth();

다음 단계

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

• Firebase 설정 - Firebase 프로젝트 설정
• Android 설정 - Android 전용 설정
• iOS 설정 - iOS 전용 설정
• Web 설정 - Web 전용 설정

Firebase Integration Introduction에서 계속하기

사용 중이라면 Firebase 연동 소개 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @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단계 인증의 구현 세부 사항에 대해서는