跳转到内容
Capgo

Firebase 集成介绍

概述

Section titled “概述”

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

您将学到什么

Section titled “您将学到什么”
  • 如何配置 Firebase 身份验证
  • 如何将 Capacitor Social Login 插件与 Firebase Auth 集成
  • Android、iOS 和 Web 的平台特定设置

您需要什么

Section titled “您需要什么”

在开始之前，请确保您已具备：

  1. Firebase 项目

    • 在 Firebase 控制台创建项目
    • 启用身份验证（电子邮件/密码和 Google 登录）
    • 获取您的 Firebase 配置凭据

  2. Firebase JS SDK

    • 在您的项目中安装 Firebase：
      Terminal window
      npm install firebase

  3. Capacitor 项目

    • 现有的 Capacitor 应用程序
    • 已安装 Capacitor Social Login 插件：
      Terminal window
      npm install @capgo/capacitor-social-login
      npx cap sync

示例应用程序

Section titled “示例应用程序”

代码仓库中提供了完整的工作示例：

代码仓库：您可以在此处找到代码仓库

示例应用演示了：

  • 使用 Firebase 的电子邮件/密码身份验证
  • Google 登录集成（Android、iOS 和 Web）
  • 使用 Firebase Firestore 集合的简单键值存储
  • Firestore 子集合中的用户特定数据存储

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

Section titled “关于在 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 auth 挂起。如这篇博客文章所述，您需要使用 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();

下一步

Section titled “下一步”

继续设置指南：