Flutter桌面端Firebase认证插件firebase_auth_desktop的使用

Firebase Auth for Flutter Desktop

该软件包是为Linux和Windows平台实现的FlutterFire。

注意： 此软件包覆盖了FlutterFire在macOS平台上的现有实现，用于开发目的。

开始使用

首先，请确保通过安装firebase_core来初始化Firebase。

1. 在项目的根目录下运行以下命令：

dart pub add firebase_auth_desktop

1. 导入它：

import 'package:firebase_auth_desktop/firebase_auth_desktop.dart';

使用方法

该软件包是firebase_auth的平台实现，您可以查看官方指南中的完整使用文档。

桌面端电话认证

在桌面端，电话认证与Web类似。

1. 调用signInWithPhoneNumber方法，这将触发一个reCAPTCHA网页视图在单独的窗口中进行验证。完成后，用户会收到短信验证码。

FirebaseAuth auth = FirebaseAuth.instance;

// 等待用户完成reCAPTCHA并接收短信验证码
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');

1. 提示用户提供短信验证码，并确认它。

UserCredential userCredential = await confirmationResult.confirm('123456');

然而，目前有一个限制，用户接收到的短信包含您的应用名称，在Web上通常是您的认证域。但是，由于Firebase尚未完全支持桌面平台上的电话认证，当前实现会在消息中显示您的应用名称为127.0.0.1，即本地主机IP地址。

示例代码

以下是完整的示例代码，展示如何在Flutter桌面端使用firebase_auth_desktop插件。

// ignore_for_file: depend_on_referenced_packages, public_member_api_docs

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_sign_in_dartio/google_sign_in_dartio.dart';
import 'package:yaru/yaru.dart';

import 'auth.dart';
import 'profile.dart';

FirebaseOptions get firebaseOptionsDefault {
  if (defaultTargetPlatform == TargetPlatform.macOS) {
    // 在macOS上使用iOS配置。
    return const FirebaseOptions(
      apiKey: 'AIzaSyAgUhHU8wSJgO5MVNy95tMT07NEjzMOfz0',
      authDomain: 'react-native-firebase-testing.firebaseapp.com',
      databaseURL: 'https://react-native-firebase-testing.firebaseio.com',
      projectId: 'react-native-firebase-testing',
      messagingSenderId: '448618578101',
      appId: '1:448618578101:web:0b650370bb29e29cac3efc',
      measurementId: 'G-F79DJ0VFGS',
    );
  } else {
    // 在Linux、Windows和Web上使用Web配置。
    return const FirebaseOptions(
      apiKey: 'AIzaSyAgUhHU8wSJgO5MVNy95tMT07NEjzMOfz0',
      authDomain: 'react-native-firebase-testing.firebaseapp.com',
      databaseURL: 'https://react-native-firebase-testing.firebaseio.com',
      projectId: 'react-native-firebase-testing',
      messagingSenderId: '448618578101',
      appId: '1:448618578101:web:0b650370bb29e29cac3efc',
      measurementId: 'G-F79DJ0VFGS',
    );
  }
}

// 需要确保Firebase Auth模拟器正在本地运行，例如通过`melos run firebase:emulator`。
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(options: firebaseOptionsDefault);

  await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);

  await GoogleSignInDart.register(
    clientId: '448618578101-sg12d2qin42cpr00f8b0gehs5s7inm0v.apps.googleusercontent.com',
  );

  runApp(const AuthExampleApp());
}

/// 应用程序的入口点。
///
/// 返回一个[MaterialApp]。
class AuthExampleApp extends StatelessWidget {
  const AuthExampleApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Example App',
      darkTheme: yaruDark,
      theme: yaruLight,
      home: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) {
            return Row(
              children: [
                Visibility(
                  visible: constraints.maxWidth >= 1200,
                  child: Expanded(
                    child: Container(
                      height: double.infinity,
                      color: Theme.of(context).colorScheme.primary,
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              'Firebase Auth Desktop',
                              style: Theme.of(context).textTheme.headline4,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: StreamBuilder<User?>(
                    stream: FirebaseAuth.instance.authStateChanges(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return const ProfilePage();
                      }
                      return const AuthGate();
                    },
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}