파이어베이스 통합 소개

__CAPGO_KEEP_0__

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

학습할 내용

• Firebase 인증을 구성하는 방법
• Capacitor Social Login 플러그인을 Firebase Auth와 통합하는 방법
• Android, iOS, Web 플랫폼에 대한 설정

필요한 것

Firebase 프로젝트

1. __CAPGO_KEEP_0__

   • 프로젝트를 생성하세요. 파이어베이스 콘솔
   • 이메일/패스워드 및 구글 로그인 인증 활성화
   • 파이어베이스 구성 인증 정보 가져오기

2. 파이어베이스 JS SDK

   • 프로젝트에 파이어베이스를 설치하세요:

     npm install firebase

3. Capacitor 프로젝트

   • 이미 존재하는 Capacitor 애플리케이션
   • Capacitor 소셜 로그인 플러그인 설치:

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

예제 애플리케이션

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

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

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

• Firebase를 사용한 이메일/암호 인증
• Android, iOS, Web에서 Google Sign-In 통합
• Firebase Firestore 컬렉션을 사용한 단순한 키-값 저장소
• Firestore 서브 컬렉션에서 사용자별 데이터 저장

Firebase SDK를 Capacitor에서 사용하는 방법에 대해 말해 보겠습니다

When using the Firebase JS SDK on Capacitor, you need to be aware that when using the authentication methods, you need to initialize the Firebase Auth instance a bit differently.

__CAPGO_KEEP_0__ 웹 플랫폼에서, Firebase Auth 인스턴스를 얻기 위해 getAuth 함수를 사용합니다.

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

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

Capacitor에서, 이 방법은 작동하지 않으며 Firebase 인증을 멈추게 합니다. 이 블로그 게시물에서 설명한 것과 같이, Firebase Auth 인스턴스를 초기화하기 위해 initializeAuth 함수를 사용해야 합니다. 이것은 다음과 같습니다.

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();

다음 단계

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

• 파이어베이스 설정 - 파이어베이스 프로젝트 구성
• 안드로이드 설정 - 안드로이드 전용 구성
• iOS 설정 - iOS 전용 구성
• 웹 설정 - 웹 전용 구성

파이어베이스 통합 소개에서 계속 진행하세요

파이어베이스를 사용 중이라면 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의 구현 세부 정보를 위해 두 가지 인증 방법을 사용하여 두 단계 인증 두 단계 인증의 구현 세부 정보를 위해