跳过内容
Capgo - 为 Capacitor 应用提供实时更新 Capgo

__CAPGO_KEEP_0__

概述

标题为“概述”

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

您将学到什么

标题为“您将学到什么”
  • 如何配置 Firebase 身份验证
  • 如何将 Capacitor 社交登录插件与 Firebase Auth 集成
  • Android、iOS 和 Web 平台的特定设置

您需要什么

标题为“您需要什么”

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

  1. 一个 Firebase 项目

  2. Firebase JS SDK

    • 终端窗口
      复制到剪贴板
      npm install firebase

  3. 一个现有的 Capacitor 应用程序

    • An existing Capacitor application
    • Capacitor 社会登录插件安装:
      终端窗口
      npm install @capgo/capacitor-social-login
      npx cap sync

示例应用

标题为“示例应用”的部分

完整的工作示例可在仓库中找到:

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

示例应用演示:

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

使用 Firebase SDK 在 Capacitor 上的一点说明

关于使用 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 Integration 介绍中进行

如果您正在使用 Firebase Integration 介绍 来规划身份验证和帐户流程，连接它到 使用 @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 中的实现细节 双重认证 双重认证的实现细节。