__CAPGO_KEEP_0__

개요

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

학습할 내용

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

필요한 것

Firebase 프로젝트

1. 프로젝트를 생성하세요

   • protectedTokens 파이어베이스 콘솔
   • 이메일/패스워드 및 구글 로그인 활성화
   • 파이어베이스 구성 인증 정보 가져오기

2. 파이어베이스 JS SDK

   • 프로젝트에 파이어베이스 설치:

     npm install firebase

3. Capacitor 프로젝트

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

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

Example Application

완벽한 작동 예제는 저장소에 있습니다.

Code 저장소: code 저장소를 찾을 수 있습니다.

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

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

Firebase SDK를 Capacitor에서 사용하는 것에 대한 단서

SDK에서 Firebase JS Capacitor를 사용할 때, 인증 방법을 사용할 때 Firebase Auth 인스턴스를 초기화해야 하는 것을 기억해야 합니다.

웹 플랫폼에서, 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();

다음 단계

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

• __CAPGO_KEEP_0__ __CAPGO_KEEP_1__
• __CAPGO_KEEP_2__ __CAPGO_KEEP_3__
• __CAPGO_KEEP_4__ __CAPGO_KEEP_5__
• __CAPGO_KEEP_6__ __CAPGO_KEEP_7__

__CAPGO_KEEP_8__

__CAPGO_KEEP_10__ __CAPGO_KEEP_11__ __CAPGO_KEEP_0__와 __CAPGO_KEEP_1__을 연결하여 인증 및 계정 흐름을 계획하세요. Using @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의 구현 세부 사항을 사용하여 두 가지 인증 방법을 사용하고 두 단계 인증 두 단계 인증의 구현 세부 사항을 사용하여