Firebase Integration Introduction

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

概述

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

您将学到什么

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

您需要什么

在开始之前，请确保您有：

一个 Firebase 项目
- 在 Firebase 控制台
- 启用身份验证 (电子邮件/密码和 Google 登录)
- 获取 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使用Firebase SDK在Capacitor时的一点说明

当使用Firebase JS SDK在Capacitor时，需要注意的是，当使用身份验证方法时，需要稍微不同地初始化Firebase Auth实例。

在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 集成介绍

If you are using 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的实现细节中，以及两因素身份验证 Capgo中两步验证的实现细节。