Firebase 集成简介

概览

本教程将指导你如何使用 Capacitor Social Login 插件配置 Firebase Authentication。通过此集成，你可以在移动端使用原生社交登录提供商（Google、Apple、Facebook、Twitter），同时利用 Firebase Auth 进行后端身份验证，并使用 Firestore 进行数据存储。

学习目标

• 如何配置 Firebase Authentication
• 如何将 Capacitor Social Login 插件与 Firebase Auth 集成
• Android、iOS 和 Web 的平台专属配置

准备工作

开始前，请确保你已准备好：

1. 一个 Firebase Project

   • 在以下地址创建项目： Firebase 控制台
   • 启用身份验证 (邮箱/密码及 Google 登录)
   • 获取您的 Firebase 配置凭据

2. Firebase JS SDK

   • 在项目中安装 Firebase：

     npm install firebase

3. 一个 Capacitor 项目

   • 一个现有的 Capacitor 应用
   • 已安装 Capacitor Social Login 插件：

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

示例应用

可以在仓库中找到完整的运行示例：

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

该示例应用演示了：

• 使用 Firebase 进行邮箱/密码身份验证
• Google Sign-In 集成 (Android, iOS 和 Web)
• 使用 Firebase Firestore collections 实现简单的键值存储
• 在 Firestore 子集合中存储用户特定数据

关于在 Capacitor 上使用 Firebase SDK 的说明

在 Capacitor 上使用 Firebase JS SDK 时，请注意在使用身份验证方法时，需要以略微不同的方式初始化 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 集成介绍继续

如果你正在使用 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 中的实现细节， 双因素认证 有关双重身份验证的实现细节。