Flutter身份验证插件auth_with_firebase的使用

Flutter身份验证插件auth_with_firebase的使用

auth_with_firebase

适用于个人项目,但您可以自由使用。

通过电子邮件和密码使用Firebase实现Flutter登录、注册、忘记密码等功能。


开始使用

步骤 1: 设置Firebase项目

在您的项目中按照常规方式设置Firebase。如果您尚未设置Firebase项目,请参考官方文档进行配置。

步骤 2: 添加插件

在您的pubspec.yaml文件中添加以下依赖:

dependencies:
  auth_with_firebase: ^版本号

然后运行以下命令安装插件:

flutter pub get

步骤 3: 查看示例代码

查看完整的示例代码,请访问GitHub仓库


示例代码

以下是一个完整的示例代码,展示了如何使用auth_with_firebase插件实现登录、注册和忘记密码功能。

示例代码:main.dart

import 'package:auth_with_firebase/auth_with_firebase.dart'; // 引入插件
import 'package:firebase_auth/firebase_auth.dart'; // 引入Firebase认证模块
import 'package:flutter/material.dart'; // 引入Flutter核心库
import 'package:firebase_core/firebase_core.dart'; // 引入Firebase核心模块

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 确保Flutter绑定初始化
  final FirebaseApp _firebaseApp = await Firebase.initializeApp(); // 初始化Firebase应用
  runApp(MyApp(firebaseApp: _firebaseApp)); // 启动应用
}

class MyApp extends StatelessWidget {
  final FirebaseApp firebaseApp;

  MyApp({required this.firebaseApp});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Example', // 应用标题
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色调
        primaryColor: Colors.black, // 主背景色
      ),
      home: Builder( // 使用Builder构建上下文
        builder: (context) => SignInPage( // 登录页面
          firebaseAuth: FirebaseAuth.instance, // 初始化Firebase认证实例
          onSignIn: ({required User user}) { // 登录成功回调
            print('Signed in ${user.email}'); // 打印登录用户信息
            Navigator.push( // 跳转到主页
              context,
              MaterialPageRoute(
                builder: (context) => MyHomePage(title: 'Sign in from package complete'),
              ),
            );
          },
          onSignUp: ({required User user, required String phone}) async { // 注册成功回调
            print('User signup, email is ${user.email} -- phone number is ${phone}');
          },
          onRequested: () { // 忘记密码请求回调
            print('User forgot, requested');
          },
          onContinueAsGuest: () { // 作为访客继续回调
            print('continue as guest');
          },
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

代码说明

  1. 初始化Firebase

    final FirebaseApp _firebaseApp = await Firebase.initializeApp();
    

    使用Firebase.initializeApp()初始化Firebase应用。

  2. 登录页面

    SignInPage(
      firebaseAuth: FirebaseAuth.instance,
      onSignIn: ({required User user}) { ... },
      onSignUp: ({required User user, required String phone}) { ... },
      onRequested: () { ... },
      onContinueAsGuest: () { ... },
    )
    

    SignInPage提供了登录、注册、忘记密码和作为访客继续的功能。

  3. 登录成功回调

    onSignIn: ({required User user}) {
      print('Signed in ${user.email}');
      Navigator.push(...);
    }
    

    当用户成功登录时,打印用户邮箱并跳转到主页。

  4. 主页

    class MyHomePage extends StatefulWidget {
      ...
    }
    

更多关于Flutter身份验证插件auth_with_firebase的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter身份验证插件auth_with_firebase的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


auth_with_firebase 是一个用于在 Flutter 应用中简化 Firebase 身份验证流程的插件。它提供了一套简洁的 API,帮助开发者快速集成 Firebase 身份验证功能。以下是如何使用 auth_with_firebase 插件的详细步骤。

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 auth_with_firebase 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  auth_with_firebase: ^1.0.0  # 请使用最新版本
  firebase_core: ^2.0.0       # Firebase Core 插件
  firebase_auth: ^4.0.0       # Firebase Auth 插件

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

2. 初始化 Firebase

在使用 Firebase 服务之前,你需要在 Flutter 应用中初始化 Firebase。通常在 main.dart 文件中进行初始化:

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

3. 使用 auth_with_firebase 插件

接下来,你可以在你的应用中使用 auth_with_firebase 插件来处理身份验证逻辑。

3.1 导入插件

import 'package:auth_with_firebase/auth_with_firebase.dart';

3.2 实现身份验证逻辑

以下是一些常见的身份验证操作示例:

  • 用户注册
void registerUser(String email, String password) async {
  final result = await AuthWithFirebase.registerWithEmailAndPassword(email, password);
  if (result.isSuccess) {
    print('User registered successfully!');
  } else {
    print('Registration failed: ${result.errorMessage}');
  }
}
  • 用户登录
void loginUser(String email, String password) async {
  final result = await AuthWithFirebase.signInWithEmailAndPassword(email, password);
  if (result.isSuccess) {
    print('User logged in successfully!');
  } else {
    print('Login failed: ${result.errorMessage}');
  }
}
  • 用户登出
void logoutUser() async {
  await AuthWithFirebase.signOut();
  print('User logged out');
}
  • 获取当前用户
void getCurrentUser() {
  final user = AuthWithFirebase.currentUser;
  if (user != null) {
    print('Current user: ${user.email}');
  } else {
    print('No user is currently logged in');
  }
}

3.3 监听身份验证状态

你可以使用 AuthWithFirebase.authStateChanges() 来监听用户的身份验证状态:

StreamSubscription? _authSubscription;

void listenToAuthState() {
  _authSubscription = AuthWithFirebase.authStateChanges().listen((user) {
    if (user != null) {
      print('User is logged in: ${user.email}');
    } else {
      print('User is logged out');
    }
  });
}

[@override](/user/override)
void dispose() {
  _authSubscription?.cancel();
  super.dispose();
}

4. 完整示例

以下是一个完整的示例,展示了如何使用 auth_with_firebase 插件实现用户注册、登录和登出功能:

import 'package:flutter/material.dart';
import 'package:auth_with_firebase/auth_with_firebase.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  [@override](/user/override)
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  void _register() async {
    final result = await AuthWithFirebase.registerWithEmailAndPassword(
      _emailController.text,
      _passwordController.text,
    );
    if (result.isSuccess) {
      print('User registered successfully!');
    } else {
      print('Registration failed: ${result.errorMessage}');
    }
  }

  void _login() async {
    final result = await AuthWithFirebase.signInWithEmailAndPassword(
      _emailController.text,
      _passwordController.text,
    );
    if (result.isSuccess) {
      print('User logged in successfully!');
    } else {
      print('Login failed: ${result.errorMessage}');
    }
  }

  void _logout() async {
    await AuthWithFirebase.signOut();
    print('User logged out');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firebase Auth Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _register,
              child: Text('Register'),
            ),
            ElevatedButton(
              onPressed: _login,
              child: Text('Login'),
            ),
            ElevatedButton(
              onPressed: _logout,
              child: Text('Logout'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部