Firebase Integration Introduction

复制一个包含安装步骤和本插件的完整 Markdown 指南的配置提示。

概述

本教程将指导您设置 Firebase 身份验证与 Capacitor 社交登录插件。该集成允许您在移动平台上使用本地社交登录提供者（Google、Apple、Facebook、Twitter），同时利用 Firebase Auth 进行后端身份验证和 Firestore 进行数据存储。

您将学到什么

如何配置 Firebase 身份验证
如何将 Capacitor 社交登录插件与 Firebase Auth 集成
Android、iOS 和 Web 平台的特定设置

您需要什么

一个 Firebase 项目

概述
- 在这里创建一个项目 Firebase 控制台
- 启用身份验证 (电子邮件/密码和 Google Sign-In)
- 获取 Firebase 配置凭证
Firebase JS SDK
- 在您的项目中安装 Firebase:
  终端窗口
```
npm install firebase
```
一个 Capacitor 项目
- 一个现有的 Capacitor 应用
- Capacitor 社交登录插件已安装:
  终端窗口
```
npm install @capgo/capacitor-social-login
npx cap sync
```

示例应用

您可以在仓库中找到完整的工作示例：

Code 仓库: 您可以在这里找到 code 仓库

示例应用演示了：

使用 Firebase 的电子邮件/密码认证
Google Sign-In 集成（Android、iOS 和 Web）
使用 Firebase Firestore 集合的简单键值存储
在 Firestore 子集合中存储用户特定数据

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.

在Web平台上，您将使用 getAuth 函数获取Firebase Auth实例

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

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

遗憾的是，在Capacitor上，这种方法不起作用，导致Firebase身份验证卡死。如本博客文章中所述，您需要使用 initializeAuth 函数初始化Firebase Auth实例。这看起来像这样：

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();

下一步

继续按照设置指南进行:

Firebase 设置 - 配置 Firebase 项目
Android 设置 - Android 特定配置
iOS 设置 - iOS 特定配置
Web 设置 - Web 特定配置

从 Firebase Integration 介绍继续

如果您正在使用 Firebase Integration Introduction 为计划身份验证和帐户流程，连接它使用 @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 的实现细节， Two-factor authentication Two-factor authentication 的实现细节.