__CAPGO_KEEP_0__ 통합 소개

개요

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

학습할 내용

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

필요한 것

Firebase 프로젝트

1. Firebase 프로젝트

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

2. 파이어베이스 JS SDK

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

     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를 Capacitor에서 사용할 때, 인증 방법을 사용할 때 파이어베이스 인증 인스턴스를 초기화하는 방법이 약간 다릅니다.

__CAPGO_KEEP_0__ 플랫폼에서, 파이어베이스 인증 인스턴스를 얻기 위해 사용하는 함수입니다. getAuth 복사

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

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

Capacitor 블로그 게시물에서 설명한 것과 같이, 파이어베이스 인증 인스턴스를 초기화하기 위해 함수를 사용해야 합니다.복사 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__

Continue with the setup guides:

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

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

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