跳过内容

Firebase Google Login on Web

GitHub

Capacitor 社交登录插件 不支持 Web 平台. For web applications, you should use Firebase’s built-in Google Sign-In directly, which provides a more reliable popup-based authentication flow.

为什么不在 Web 上使用该插件?

为什么不在 Web 上使用该插件?

Capacitor 社交登录插件是为 native 移动平台 (Android 和 iOS) 设计的,能够利用平台特定的身份验证流程。对于 Web,Firebase 的原生方法是: signInWithPopup ✅ 更可靠和更受支持

  • ✅ 自动处理浏览器会话存储
  • ✅ 更可靠和更受支持的身份验证流程
  • ✅ 提供更好的错误处理
  • ✅ 不需要任何额外的配置

设置步骤

设置步骤
  1. 配置 Firebase 项目

    确保您的 Firebase 项目已启用 Google Sign-In:

    • 前往 Firebase 控制台
    • 导航到身份验证 > 登录方法
    • 启用 Google Sign-In 提供程序
  2. 添加授权域名

    1. 前往您的项目概览 console.cloud.google.com Firebase 项目概述
    2. 打开 Authentication 菜单 Firebase 认证菜单
    3. 点击 Settings 按钮 Firebase 认证登录方式按钮
    4. 设置 Authorized domains Firebase 认证设置授权域名

查看 authUtils.ts 完整的实现示例请参见示例应用程序,它包括:

  • 使用 Firebase 的 signInWithPopup 适用于 Web 平台
  • 使用 Capacitor 社交登录插件(适用于 Android/iOS 平台)
  • 自动检测平台

示例演示如何在 Web 平台上使用 Firebase 内置方法,同时在 native 平台上使用插件

继续使用 Firebase Google Web 登录

继续使用 Firebase Google Web 登录

如果您正在使用 Firebase Google Web 登录 来规划身份验证和帐户流程,连接它到 使用 @capgo/capacitor 社交登录 为使用 @capgo/capacitor 社交登录的本地能力 使用 @capgo/capacitor 社交登录 为 @capgo/capacitor 社交登录的实现细节 @capgo/capacitor-passkey 为 @capgo/capacitor-passkey 的实现细节 @capgo/capacitor-native-biometric 为 @capgo/capacitor-native-biometric 的实现细节, 双因素认证 为双因素认证的实现细节。