파이어베이스 통합 소개

개요

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

학습할 내용

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

필요한 것

Before you begin, make sure you have:

1. A Firebase Project

   • Create a project at Firebase Console
   • Authentication (Email/Password and Google Sign-In) 설정
   • Firebase configuration credentials를 가져오세요

2. Firebase JS SDK

   • 터미널 창

     npm install firebase

3. A Capacitor Project

   • 기존 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

A word about using the Firebase SDK on 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.

On the web platform, you would use the __CAPGO_KEEP_0__ function to get the Firebase Auth instance. getAuth Copy to clipboard

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

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

Capacitor __CAPGO_KEEP_1____CAPGO_KEEP_0__ initializeAuth __CAPGO_KEEP_1__

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-passkey @capgo/capacitor-passkey @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 구현 세부 정보는 @capgo/capacitor-native-biometric에서 찾을 수 있습니다. 두 단계 인증 구현 세부 정보는 두 단계 인증에서 찾을 수 있습니다.