Firebase 整合简介

概述

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

您将学到什么

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

您需要什么

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

1. 一个 Firebase 项目

   • 在 Firebase 控制台中创建一个项目 Firebase 控制台
   • 在 Firebase 控制台中启用身份验证 (电子邮件/密码和 Google 登录)
   • 获取 Firebase 配置凭证

2. Firebase JS SDK

   • 在您的项目中安装 Firebase:

     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 子集合中存储用户特定数据

A使用 Firebase SDK 在 Capacitor

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

在 web 平台上，您将使用函数获取 Firebase Auth 实例。 getAuth 复制到剪贴板

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

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

Unfortunately, on Capacitor, 这种方法并不能正常工作，导致 Firebase 认证卡住。如同在 下一步下一步 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();

下一步

继续设置指南:

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

继续Firebase集成介绍

如果您正在使用 Firebase 整合介绍 连接它以规划身份验证和帐户流程 使用 @capgo/capacitor-social-login for the native capability in 使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-social-login for the implementation detail in 使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-passkey for the implementation detail in 使用 @capgo/capacitor-passkey 使用 @capgo/capacitor-native-biometric for the implementation detail in 使用 @capgo/capacitor-native-biometric, and 双因素认证 为两步验证的实现细节。