Flutter简化登录流程插件flutter_login_simple的使用

flutter_login_simple 是一个用于简化基于电子邮件的 Firebase 身份验证登录流程的基本插件。它负责处理用户界面和后台的 Firebase 身份验证。如果用户已经登录，将会调用 success-login 回调函数。

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter_login_simple: ^版本号

然后运行 flutter pub get 来获取依赖项。

运行示例

示例目录包含一个完整的 Flutter 应用程序。在运行之前，请确保添加 Firebase 配置文件到 lib/firebase_options.dart 中。

确保在 Firebase 控制台中启用了电子邮件身份验证功能，这是常见的错误点。

基本用法

首先，初始化 Firebase 核心模块：

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_login_simple/main.dart';
import 'package:flutter_login_simple/usersessiondata.dart';
import 'package:flutter_login_simple_demo/firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

然后定义应用主体：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StartPage(),
    );
  }
}

接着，在 StartPage 类中配置登录界面：

class StartPage extends StatelessWidget {
  const StartPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 登录成功后的回调函数
    void onLoginSuccess(UserSessionData user) {
      Navigator.pushAndRemoveUntil(
          context,
          MaterialPageRoute(
              builder: (BuildContext context) => LoginSuccessPage(user)),
          ModalRoute.withName('/')
      );
    }

    // 用于显示的Logo
    Image logo = Image.network(
      'https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png',
    );

    // 显示的条款和条件
    String htmlToc = '<h1>条款和条件</h1>';

    // 显示的隐私政策
    String htmlPrivacy = '<h1>隐私政策</h1>';

    // 是否强制验证电子邮件
    bool requireEmailVerification = true;

    // 配置选项
    var config = FlutterLoginConfiguration(
      logo,
      onLoginSuccess,
      htmlToc,
      htmlPrivacy,
      requireEmailVerification,
    );

    return LoginStarter(config);
  }
}

配置选项

FlutterLoginConfiguration 类的配置选项如下：

class FlutterLoginConfiguration {
  Image logo;
  Function onLoginSuccess;
  String htmlToc;
  String htmlPrivacy;
  bool disableLogin;
  bool disableSignUp;
  bool disablePasswordReset;

  FlutterLoginConfiguration(
      this.logo, this.onLoginSuccess, this.htmlToc, this.htmlPrivacy,
      {this.disableLogin = false,
      this.disableSignUp = false,
      this.disablePasswordReset = false});
}

访问返回的 UserSessionData

登录成功后，可以访问返回的 UserSessionData 对象：

void onLoginSuccess(UserSessionData user) {
  print(user.uid);
  print(user.email ?? '未提供');
  print(user.displayName ?? '未提供');
  print(user.emailVerified.toString());
  print(user.isAnonymous.toString());
  print(user.phoneNumber ?? '未提供');
  print(user.photoURL ?? '未提供');

  // 注销用户
  user.logoutUser();

  // 删除用户
  bool isSuccess = user.deleteUser();

  // 获取原始的 Firebase 用户对象
  var firebaseUser = user.firebaseUser();
}

Bug 和请求

如果您遇到任何问题，请随时在 GitHub 上提交问题。Pull 请求也是受欢迎的。

许可证

该项目由 MIT 许可证授权。详细的许可证文件可以在 GitHub 上找到。

示例

完整的示例代码如下：

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_login_simple/main.dart';
import 'package:flutter_login_simple/usersessiondata.dart';
import 'package:flutter_login_simple_demo/firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StartPage(),
    );
  }
}

class StartPage extends StatelessWidget {
  const StartPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 登录成功后的回调函数
    void onLoginSuccess(UserSessionData user) {
      Navigator.pushAndRemoveUntil(
          context,
          MaterialPageRoute(
              builder: (BuildContext context) => LoginSuccessPage(user)),
          ModalRoute.withName('/')
      );
    }

    // 用于显示的Logo
    Image logo = Image.network(
      'https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png',
    );

    // 显示的条款和条件
    String htmlToc = '<h1>条款和条件</h1>';

    // 显示的隐私政策
    String htmlPrivacy = '<h1>隐私政策</h1>';

    // 是否强制验证电子邮件
    bool requireEmailVerification = true;

    // 配置选项
    var config = FlutterLoginConfiguration(
      logo,
      onLoginSuccess,
      htmlToc,
      htmlPrivacy,
      requireEmailVerification,
    );

    return LoginStarter(config);
  }
}

/// 显示返回的数据
class LoginSuccessPage extends StatelessWidget {
  final UserSessionData user;
  const LoginSuccessPage(this.user, {super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Text('登录成功！'),
        const SizedBox(height: 16),
        //
        // 显示用户数据
        //
        Text('uid - ${user.uid}'),
        Text('email -  ${user.email ?? '未提供'}'),
        Text('displayName - ${user.displayName ?? '未提供'}'),
        Text('emailVerified - ${user.emailVerified}'),
        Text('isAnonymous - ${user.isAnonymous}'),
        Text('phoneNumber - ${user.phoneNumber ?? '未提供'}'),
        Text('photoURL - ${user.photoURL ?? '未提供'}'),
        const SizedBox(height: 16),
        //
        // 注销用户和删除用户
        //
        ElevatedButton(
            onPressed: () async {
              await user.logoutUser();
              // 忽略：使用同步方式
              await _showDialog('用户已注销', context);
              // 忽略：使用同步方式
              _goHome(context);
            },
            child: const Text('注销')),
        const SizedBox(height: 16),
        ElevatedButton(
            onPressed: () async {
              if (await user.deleteUser()) {
                // 忽略：使用同步方式
                await _showDialog('用户已删除', context);
                // 忽略：使用同步方式
                _goHome(context);
              }
            },
            child: const Text('删除')),
      ],
    )));
  }

  // 辅助方法
  Future<void> _showDialog(String title, BuildContext context) {
    return showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(title: Text(title));
      },
    );
  }

  // 辅助方法
  _goHome(BuildContext context) {
    Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(builder: (context) => const StartPage()),
        // (Route<dynamic> route) => false
        ModalRoute.withName('/'));
  }
}