파이어베이스 통합 소개

개요

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

학습할 내용

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

필요한 것

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

1. Firebase 프로젝트

   • 프로젝트를 생성하세요: Firebase Console
   • 인증 (이메일/비밀번호 및 Google Sign-In) 활성화
   • 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)
• A simple key-value store using Firebase Firestore collections
• User-specific data storage in Firestore subcollections

Firebase Firestore에 사용되는 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.

웹 플랫폼에서, Firebase Auth 인스턴스를 얻기 위해 getAuth 복사

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

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

Unfortunately, on Capacitor, this does not work and causes Firebase auth to hang. As stated in 을 참조하십시오.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 전용 구성
• 웹 설정 - 웹 전용 구성

파이어베이스 통합 소개에서 계속하기

파이어베이스를 사용 중이라면 파이어베이스 통합 소개 인증 및 계정 흐름을 계획하고 연결하기 위해 파이어베이스를 사용 중이라면 @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 for the implementation detail in @capgo/capacitor-native-biometric, and 두 단계 인증 for the implementation detail in Two-factor authentication.