Firebase Integration 介绍

概述

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

您将学到什么

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

您需要什么

一个 Firebase 项目

1. What You’ll Need

   • 在 firebase控制台
   • 开启身份验证（电子邮件/密码和Google Sign-In）
   • 获取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 子集合中存储用户特定数据

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

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 的实现细节。