Flutter – 使用 Firebase 设计电子邮件身份验证系统

在移动应用开发中，数据安全性是至关重要的。为了确保使用者数据的安全，开发者需要在应用程序中实现各种安全性措施，其中之一就是电子邮件身份验证系统。

在本文中，我们将探讨如何使用 Flutter 和 Firebase 创建和实现一个电子邮件身份验证系统。

简介

Firebase 是一个完整的应用程序开发平台，提供用于构建应用程序所需的多种工具和服务。Firebase Authentication 是其中之一，提供一种简单易用的方法来验证用户身份和访问控制。

Firebase Authentication 支持多种身份验证方式，例如电子邮件/密码，Google 帐户，Facebook，Twitter，GitHub 和自定义身份验证系统。

在本文中，我们将使用 Firebase Authentication 和电子邮件/密码身份验证方式来实现一个电子邮件身份验证系统。

步骤

步骤1：创建 Flutter 应用程序

首先，我们需要创建一个 Flutter 应用程序。我们可以使用以下命令在终端中创建 Flutter 应用程序：

flutter create my_app

步骤2：集成 Firebase

接下来，我们需要将 Firebase 集成到应用程序中。要做到这一点，我们需要跟随以下步骤：

1. 在 Firebase 控制台中创建一个新项目。

2. 在 "项目设置" 下载 GoogleService-Info.plist 文件或 google-services.json 文件。

3. 在 pubspec.yaml 文件中添加 Firebase 相关依赖项，包括以下依赖项：

   dependencies:
     flutter:
       sdk: flutter
     firebase_core: ^1.4.0
     firebase_auth: ^3.1.0
   

4. 在应用程序的 main.dart 文件中，添加以下代码以初始化 Firebase：

   import 'package:firebase_core/firebase_core.dart';
   
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp();
     runApp(MyApp());
   }
   

步骤3：创建身份验证系统

在本示例中，我们将使用 Firebase Authentication 实现电子邮件/密码身份验证系统。

要做到这一点，我们需要执行以下步骤：

1. 在应用程序的登录页面中，收集用户电子邮件地址和密码。

2. 使用收集到的电子邮件地址和密码来创建 FirebaseAuthenticationCredential 对象。

   import 'package:firebase_auth/firebase_auth.dart';
   
   final email = 'user@example.com';
   final password = 'password123';
   
   final credential = EmailAuthProvider.credential(
     email: email,
     password: password,
   );
   

3. 将 FirebaseAuthenticationCredential 对象传递给 Firebase Authentication 来验证用户身份。

   final auth = FirebaseAuth.instance;
   
   try {
     final userCredential = await auth.signInWithCredential(credential);
     final user = userCredential.user;
     // 登录成功，执行操作...
   } on FirebaseAuthException catch (e) {
     if (e.code == 'user-not-found') {
       // 用户不存在，发送错误消息...
     } else if (e.code == 'wrong-password') {
       // 密码不正确，发送错误消息...
     }
   }
   

4. 在用户成功登录后，可以使用 FirebaseAuth.currentUser 属性来访问用户信息。

   final user = FirebaseAuth.instance.currentUser;
   final displayName = user.displayName;
   final email = user.email;
   final photoUrl = user.photoURL;
   

步骤4：完整示例代码

以下是一个完整的示例代码，用于演示如何使用 Flutter 和 FirebaseAuthentication 创建一个电子邮件身份验证系统：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Authentication',
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isLoading = false;

  void _showErrorDialog(String message) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text('An error occurred!'),
        content: Text(message),
        actions: <Widget>[
          FlatButton(
            onPressed: () {
              Navigator.of(ctx).pop();
            },
            child: Text('Okay'),
          )
        ],
      ),
    );
  }

  void _submit() async {
    setState(() {
      _isLoading = true;
    });

    final email = _emailController.text;
    final password = _passwordController.text;

    if (_formKey.currentState.validate()) {
      try {
        final credential = EmailAuthProvider.credential(
          email: email,
          password: password,
        );

        final userCredential =
            await FirebaseAuth.instance.signInWithCredential(credential);
        if (userCredential != null && userCredential.user != null) {
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(
              builder: (ctx) => HomePage(
                user: userCredential.user,
              ),
            ),
          );
        }
      } catch (error) {
        var errorMessage = 'Authentication failed';

        switch (error.code) {
          case 'invalid-email':
            errorMessage = 'Invalid email address';
            break;
          case 'user-not-found':
            errorMessage = 'User not found';
            break;
          case 'wrong-password':
            errorMessage = 'Incorrect password';
            break;
        }

        _showErrorDialog(errorMessage);
      }
    }

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Center(
        child: Card(
          margin: EdgeInsets.all(10),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Form(
              key: _formKey,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  TextFormField(
                    controller: _emailController,
                    keyboardType: TextInputType.emailAddress,
                    decoration: InputDecoration(labelText: 'Email address'),
                    validator: (value) {
                      if (value.isEmpty || !value.contains('@')) {
                        return 'Invalid email address';
                      }

                      return null;
                    },
                  ),
                  TextFormField(
                    controller: _passwordController,
                    obscureText: true,
                    decoration: InputDecoration(labelText: 'Password'),
                    validator: (value) {
                      if (value.isEmpty || value.length < 6) {
                        return 'Password must be at least 6 characters long';
                      }

                      return null;
                    },
                  ),
                  SizedBox(height: 20),
                  _isLoading
                      ? CircularProgressIndicator()
                      : RaisedButton(
                          onPressed: _submit,
                          child: Text('Login'),
                          color: Theme.of(context).primaryColor,
                          textColor: Colors.white,
                        )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final User user;

  HomePage({Key key, @required this.user}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Firebase Authentication'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Welcome, ${user.displayName}!'),
              SizedBox(height: 20),
              CircleAvatar(
                radius: 100,
                backgroundImage: NetworkImage(user.photoURL),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  await FirebaseAuth.instance.signOut();
                  Navigator.of(context).pushReplacement(
                    MaterialPageRoute(
                      builder: (ctx) => LoginPage(),
                    ),
                  );
                },
                child: Text('Logout'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

结论

Firebase Authentication 提供了简单易用的身份验证解决方案，可以帮助开发者实现各种身份验证系统。在本文中，我们介绍了如何使用 Flutter 和 Firebase Authentication 创建和实现一个电子邮件身份验证系统，并提供了相应的代码示例。希望本文能对大家实现身份验证系统有所帮助。