Flutter认证管理插件auth_package的使用

Flutter认证管理插件auth_package的使用

Getting Started(开始使用)

本项目是一个新的Flutter插件包的起点,它是一个专门的包,包括针对Android和/或iOS平台的具体实现代码。

对于如何开始Flutter开发的帮助,请查看在线文档,其中提供了教程、示例、移动开发指南以及完整的API参考。


示例代码

以下是一个完整的示例,展示如何在Flutter项目中使用auth_package插件进行认证管理。

示例代码文件:example/lib/main.dart

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

import 'package:flutter/services.dart'; // 引入Flutter核心服务
import 'package:auth_package/auth_package.dart'; // 引入认证插件

void main() {
  runApp(const MyApp()); // 运行应用
}

class MyApp extends StatefulWidget {
  const MyApp({super.key}); // 构造函数

  @override
  State<MyApp> createState() => _MyAppState(); // 创建状态
}

class _MyAppState extends State<MyApp> {
  final _authPackagePlugin = AuthPackage(); // 初始化认证插件实例

  @override
  void initState() {
    super.initState();
  }

  // 登录方法
  signIn() async {
    // 调用插件的登录方法,并传入邮箱和密码
    var res = await _authPackagePlugin.signIn(
        emailController.text.trim(), passwordController.text.trim());
    print(res); // 打印登录结果
  }

  // 定义两个文本控制器用于输入邮箱和密码
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'), // 设置应用标题
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0), // 添加内边距
            child: Column(
              children: [
                // 邮箱输入框
                TextFormField(
                  controller: emailController,
                  decoration: InputDecoration(
                    hintText: "Email Address", // 提示文字
                  ),
                  keyboardType: TextInputType.emailAddress, // 键盘类型
                ),
                // 密码输入框
                TextFormField(
                  controller: passwordController,
                  obscureText: true, // 隐藏密码
                  decoration: InputDecoration(
                    hintText: "Password", // 提示文字
                  ),
                  keyboardType: TextInputType.visiblePassword, // 键盘类型
                ),
                // 登录按钮
                MaterialButton(
                  onPressed: signIn, // 点击事件绑定到signIn方法
                  child: Text("Submit"), // 按钮文字
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

使用说明

  1. 安装插件
    pubspec.yaml文件中添加依赖:
    dependencies:
      auth_package: ^1.0.0 # 替换为实际版本号
    

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

1 回复

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


auth_package 是一个用于 Flutter 应用的身份验证管理的插件,它简化了用户身份验证的流程,包括登录、注册、密码重置等功能。以下是如何在 Flutter 项目中使用 auth_package 的基本步骤。

1. 添加依赖

首先,在你的 pubspec.yaml 文件中添加 auth_package 依赖:

dependencies:
  flutter:
    sdk: flutter
  auth_package: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 初始化 AuthPackage

在你的 Flutter 应用的 main.dart 文件中,初始化 AuthPackage

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthPackage(
        child: HomeScreen(),
        authConfig: AuthConfig(
          apiKey: 'YOUR_API_KEY',
          authDomain: 'YOUR_AUTH_DOMAIN',
          projectId: 'YOUR_PROJECT_ID',
          storageBucket: 'YOUR_STORAGE_BUCKET',
          messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
          appId: 'YOUR_APP_ID',
        ),
      ),
    );
  }
}

AuthConfig 中的参数需要根据你的 Firebase 项目配置进行填写。

3. 使用 AuthPackage 进行身份验证

在你的应用中使用 AuthPackage 提供的功能进行身份验证。以下是一些常见的操作:

登录

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

class LoginScreen extends StatelessWidget {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      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: () async {
                try {
                  await AuthPackage.signInWithEmailAndPassword(
                    _emailController.text,
                    _passwordController.text,
                  );
                  Navigator.pushReplacementNamed(context, '/home');
                } catch (e) {
                  print('Login failed: $e');
                }
              },
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

注册

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

class RegisterScreen extends StatelessWidget {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Register'),
      ),
      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: () async {
                try {
                  await AuthPackage.createUserWithEmailAndPassword(
                    _emailController.text,
                    _passwordController.text,
                  );
                  Navigator.pushReplacementNamed(context, '/home');
                } catch (e) {
                  print('Registration failed: $e');
                }
              },
              child: Text('Register'),
            ),
          ],
        ),
      ),
    );
  }
}

密码重置

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

class ForgotPasswordScreen extends StatelessWidget {
  final _emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Forgot Password'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                try {
                  await AuthPackage.sendPasswordResetEmail(_emailController.text);
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Password reset email sent')),
                  );
                } catch (e) {
                  print('Password reset failed: $e');
                }
              },
              child: Text('Send Reset Email'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 监听用户状态

你可以在应用的任何地方监听用户的状态变化,例如用户登录或注销:

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: StreamBuilder<User?>(
          stream: AuthPackage.userStream,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasData) {
              return Text('Welcome, ${snapshot.data!.email}');
            } else {
              return Text('You are not logged in');
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await AuthPackage.signOut();
        },
        child: Icon(Icons.logout),
      ),
    );
  }
}

5. 处理用户注销

用户注销可以使用 AuthPackage.signOut() 方法:

await AuthPackage.signOut();
回到顶部