무료로 14일 동안 사용하세요. 카드가 필요하지 않습니다.

개요

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

학습할 내용

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

필요한 것

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

1. Firebase 프로젝트

   • 프로젝트를 생성하세요 Firebase 콘솔
   • 인증 (이메일/패스워드 및 구글 로그인) 활성화
   • Firebase 구성 파일을 가져오세요

2. Firebase JS SDK

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

     npm install firebase

3. A Capacitor Project

   • An existing Capacitor application
   • Capacitor 소셜 로그인 플러그인 설치:

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

예제 애플리케이션

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

Code 리포지토리: code 리포지토리를 여기서 찾을 수 있습니다

예제 앱은 다음과를 보여줍니다:

• 이메일/패스워드 인증을 위한 Firebase
• Google Sign-In 통합 (안드로이드, iOS, 웹)
• Firebase Firestore 컬렉션을 사용한 간단한 키-값 저장소
• __CAPGO_KEEP_0__

Firebase 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.

__CAPGO_KEEP_0__ getAuth __CAPGO_KEEP_1__

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

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

Capacitor에서 불행히도, 이 기능은 작동하지 않으며 Firebase 인증을 멈추게 합니다. 위의 __CAPGO_KEEP_0____CAPGO_KEEP_1__ initializeAuth __CAPGO_KEEP_0__

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 통합을 사용 중이라면 Firebase 통합 인증 및 계정 흐름을 계획하고 연결하려면 Capgo에서 @capgo/capacitor-social-login을 사용합니다. Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric Using @capgo/capacitor-social-login 두 단계 인증 두 단계 인증 구현에 대한 구체적인 정보입니다.