Flutter + Firebase 跨端：集成 Firebase Auth 实现 iOS/Android/Web 统一登录

通过此方案，用户可在 iOS/Android/Web 使用同一账号体系登录，Firebase Auth 自动处理平台差异，实现真正的跨端统一认证。

2501_93878564

365人浏览 · 2025-10-30 20:45:02

2501_93878564 · 2025-10-30 20:45:02 发布

Flutter + Firebase Auth 跨平台登录集成指南

1. 前置配置

Firebase 项目设置：

在 Firebase 控制台创建新项目
添加应用平台：
- Android：填写包名（如 com.example.app），下载 google-services.json
- iOS：填写 Bundle ID，下载 GoogleService-Info.plist
- Web：注册应用获取配置片段

Flutter 依赖：

dependencies:
  firebase_core: ^2.24.0
  firebase_auth: ^4.18.1
  google_sign_in: ^6.1.1  # 如需 Google 登录

2. 平台配置

Android：

将 google-services.json 放入 android/app/
android/build.gradle：

dependencies {
  classpath 'com.google.gms:google-services:4.3.15'
}

android/app/build.gradle：

apply plugin: 'com.google.gms.google-services'

iOS：

将 GoogleService-Info.plist 拖入 Xcode 工程
ios/Podfile：

target 'Runner' do
  use_frameworks!
  pod 'Firebase/Auth'
end

Web： web/index.html 的 <body> 中添加：

<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js"></script>
<script>
  const firebaseConfig = { /* 你的 web 配置 */ };
  firebase.initializeApp(firebaseConfig);
</script>

3. 核心登录实现

初始化 Firebase：

import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

邮箱密码登录：

Future<UserCredential> signInWithEmail(String email, String password) async {
  return await FirebaseAuth.instance.signInWithEmailAndPassword(
    email: email,
    password: password,
  );
}

Google 登录（跨平台）：

Future<UserCredential> signInWithGoogle() async {
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
  final GoogleSignInAuthentication? googleAuth = 
      await googleUser?.authentication;
  
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );
  
  return await FirebaseAuth.instance.signInWithCredential(credential);
}

4. 状态管理

监听认证状态：

FirebaseAuth.instance.authStateChanges().listen((User? user) {
  if (user == null) {
    print('用户未登录');
  } else {
    print('用户已登录: ${user.uid}');
  }
});

获取当前用户：

User? user = FirebaseAuth.instance.currentUser;
if (user != null) {
  print('用户ID: ${user.uid}');
  print('邮箱: ${user.email}');
}

5. 平台特定处理

iOS 额外配置：

在 Xcode 中开启 Keychain Sharing
添加 URL Scheme：GoogleService-Info.plist 中的 REVERSED_CLIENT_ID

Web 重定向处理：

// 在 web 平台初始化时设置
if (kIsWeb) {
  await FirebaseAuth.instance.setPersistence(Persistence.LOCAL);
}

6. 错误处理示例

try {
  await signInWithEmail(email, password);
} on FirebaseAuthException catch (e) {
  if (e.code == 'user-not-found') {
    print('用户不存在');
  } else if (e.code == 'wrong-password') {
    print('密码错误');
  }
}

7. 完整登录流程示例

import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  // 登录状态流
  Stream<User?> get user => _auth.authStateChanges();

  // 邮箱注册
  Future<User?> registerWithEmail(String email, String password) async {
    try {
      UserCredential result = await _auth.createUserWithEmailAndPassword(
        email: email,
        password: password,
      );
      return result.user;
    } catch (e) {
      print("注册失败: $e");
      return null;
    }
  }

  // 退出登录
  Future<void> signOut() async {
    await _auth.signOut();
  }
}

8. 验证部署

测试要点：

所有平台使用同一邮箱登录，检查 Firebase 控制台是否显示相同 UID
验证登录状态在各平台间保持同步
测试网络断开后的本地持久化登录状态

常见问题解决：

Web 登录失败：检查 Firebase 控制台已添加授权域
iOS 重定向失败：确认 URL Scheme 配置正确
Android SHA 指纹错误：在 Firebase 控制台添加调试/发布 SHA1

通过此方案，用户可在 iOS/Android/Web 使用同一账号体系登录，Firebase Auth 自动处理平台差异，实现真正的跨端统一认证。

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

【开源鸿蒙跨平台开发--KuiklyUI--02】华为云真机部署实战指南

在KuiklyUI华为云真机部署过程中重要的是证书与签名文件的准备，DevEco Studio 签名配置和构建HAP包。希望本文能帮助Windows平台的开发者顺利进入Kuikly OpenHarmony开发领域。欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net/

开源鸿蒙跨平台开发者社区

Flutter for OpenHarmony 实战：url_launcher 插件 — 跨应用跳转与系统集成

完美实现了“一行代码，跨层跳转”。在 Flutter for OpenHarmony 的实际开发中，它不仅赋予了 App 处理网页的能力，更是通向系统原生核心服务（电话、短消息）的桥梁。通过合理的权限预配置 () 和规范的mode选择，我们可以让鸿蒙用户享受到与系统应用一致的丝滑跳转体验。🌐欢迎加入开源鸿蒙跨平台社区开源鸿蒙跨平台开发者社区。