Firebase 身份驗證未在 Flutter Web 上持續

Question

我在我的 Flutter Web 應用程序上使用 Firebase 身份驗證，但在刷新期間 Z21D6F40CFB515082E57ZE 沒有持續存在。

這是我正在使用的 package。

https://pub.dev/packages/firebase

這就是我使用 Firebase 進行身份驗證的方式

  static Future<User> handleSignInEmail(String email, String password) async {
    await init();

    final UserCredential userCredential =
        await auth().signInWithEmailAndPassword(email.trim(), password);

    assert(userCredential.user != null);
    assert(await userCredential.user.getIdToken() != null);

    final User currentUser = await userCredential.user;
    assert(userCredential.user.uid == currentUser.uid);

    print('signInEmail succeeded: $userCredential.user');

    return userCredential.user;
  }

如果我刷新頁面並調用以下方法，返回的用戶是null：

  static Future<User> getFirebaseUser() async {
    await init();
    return await auth().currentUser;
  }

使用 Flutter Mobile 的類似實現按預期工作。 我在 Flutter Web 實現中缺少什么？

Answer 1

登錄會自動發生，並由 Firebase 處理，但以異步方式進行。 更多細節可以在官方文檔中找到：

https://firebase.google.com/docs/auth/web/auth-state-persistence

訣竅很簡單。 您需要等待第一次狀態更改。

  static Future<User> getFirebaseUser() async {
    await init();
    //return await auth().currentUser;
    return await auth().onAuthStateChanged.first;
  }

如果沒有登錄用戶，則返回null ： https : //firebase.google.com/docs/reference/js/firebase.auth.Auth.html#onauthstatechanged

我的firebase版本：

firebase: 5.0.4 #https://pub.dartlang.org/packages/firebase

我寫了這個適用於移動和網絡的實現：

  static Future<FirebaseUser> getFirebaseUser() async {
    FirebaseUser firebaseUser = await FirebaseAuth.instance.currentUser();
    if (firebaseUser == null) {
      firebaseUser = await FirebaseAuth.instance.onAuthStateChanged.first;
    }
    return firebaseUser;
  }

Answer 2

Firebase Dart 包

導入此 pub 並在使用 auth 的任何地方檢查操作系統

import 'package:firebase/firebase.dart' as firebase;
import 'package:firebase_auth/firebase_auth.dart';

if(Platform.isIOS || Platform.isAndroid) {
    FirebaseAuth.instance.createUserWithEmailAndPassword(email: email, password: password).then(() {
        //do something
    });
} else {
    firebase.auth().createUserWithEmailAndPassword(email, password).then(() {
        //do something
    });
}

Answer 3

https://stackoverflow.com/a/58158636 的擴展

在新的庫版本中， onAuthStateChanged getter 不可用。 而不是使用authStateChanges() 。

User firebaseUser = await FirebaseAuth.instance.currentUser;
  if (firebaseUser == null) {
    firebaseUser = await FirebaseAuth.instance.authStateChanges().first;
  }

https://pub.dev/documentation/firebase_auth/latest/firebase_auth/FirebaseAuth/authStateChanges.html

Answer 4

我正在使用 Flutter 3.0.5 和 firebase_auth 3.6.4，這是我可以使它適用於 web（Chrome）的唯一方法：

class HomePage extends StatefulWidget {
  const HomePage();

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  User? currentUser;
  late StreamSubscription<User?> userSubscription;

  @override
  void initState() {
    super.initState();
    userSubscription = FirebaseAuth.instance.authStateChanges().listen((user) {
      if (user != null) {
        setState(() {
          currentUser = user;
        });
      }
    });
  }

  @override
  void dispose() {
    userSubscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return currentUser != null
        ? Text('User is logged in')
        : Text('User is not logged in');
  }
}

據我了解，您需要等到FirebaseAuth.instance.authStateChanges()返回非 null 值，但一開始它返回 null 因為有些東西仍在后台初始化。 FirebaseAuth.instance.currentUser也是如此，它將是 null 直到某個時候，所以如果你立即檢查它，你將被困在未經授權的 state 除非你以后以某種方式重新檢查它。