__CAPGO_KEEP_0__

개요

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

학습할 내용

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

필요한 것

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

1. Firebase 프로젝트

   • Firebase Console에서 프로젝트를 생성하세요: Firebase Console
   • 이메일/패스워드 및 Google Sign-In 인증을 활성화하세요.
   • Firebase 구성 인증 정보를 가져오세요.

2. Firebase JS SDK

   • 프로젝트에 Firebase를 설치하세요:

     npm install firebase

3. Capacitor 프로젝트

   • Capacitor 애플리케이션
   • Capacitor 소셜 로그인 플러그인 설치:

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

예제 애플리케이션

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

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

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

• Firebase를 사용한 이메일/패스워드 인증
• Google Sign-In (Android, iOS, Web) 통합
• Firebase Firestore 컬렉션을 사용한 간단한 키-값 저장소
• Firestore 서브 컬렉션 내의 사용자 지정 데이터 저장

Firebase SDK를 Capacitor에서 사용하는 방법에 대해 말하려면

SDK JS를 Capacitor에서 사용할 때, 인증 방법을 사용할 때 Firebase Auth 인스턴스를 초기화하는 방법이 약간 다릅니다.

__CAPGO_KEEP_0__ 웹 플랫폼에서, Firebase Auth 인스턴스를 얻기 위해 사용하는 getAuth Firebase Auth 인스턴스를 얻기 위해 사용하는

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

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

Capacitor에서, 이 방법은 작동하지 않으며 Firebase 인증을 멈추게 합니다. __CAPGO_KEEP_0__ 블로그 게시물에서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_KEEP_0__/__CAPGO_KEEP_1__-social-login __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login capgo/capacitor-passkey capgo/capacitor-passkey capgo/capacitor-native-biometric capgo/capacitor-native-biometric capgo/capacitor-social-login capgo/capacitor-social-login capgo/capacitor-social-login capgo/capacitor-social-login 두 단계 인증 두 단계 인증 구현 세부 정보에 대한 설명