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

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

simpler_login

simpler_login 是一个用于简化 Flutter 应用中登录流程的插件。它支持多种登录方式，包括电子邮件/密码登录、手机号码验证码登录等。

开始使用

项目结构

本项目是一个 Flutter 插件包，包含 Android 和 iOS 平台的具体实现代码。

前提条件

在使用 simpler_login 插件之前，确保你已经正确配置了 Firebase（用于支持电子邮件/密码登录和手机号码验证码登录）。以下是具体步骤：

  1. 在 Firebase 控制台 中创建一个新项目。
  2. 启用电子邮件/密码登录和电话号码认证功能。
  3. 下载 google-services.json（Android）或 GoogleService-Info.plist（iOS），并将其添加到你的 Flutter 项目中。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 simpler_login 插件实现登录流程。

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

// 主程序入口
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 确保 Flutter 框架已初始化
  await Firebase.initializeApp(); // 初始化 Firebase
  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  var simplerLogin = SimplerLogin.instance; // 获取 simpler_login 实例
  var emailController = TextEditingController();
  var passwordController = TextEditingController();
  var phonrController = TextEditingController();
  var otpController = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: StreamBuilder<User?>(
          stream: simplerLogin.userStream, // 监听用户状态流
          builder: (context, snapshot) {
            return snapshot.data != null
                ? Container(
                    margin: EdgeInsets.symmetric(vertical: 48),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Text('Logged In'), // 显示已登录状态
                          TextButton(
                            onPressed: () async {
                              await simplerLogin.auth.signOut(); // 登出
                            },
                            child: Text('Log Out'), // 登出按钮
                          ),
                        ],
                      ),
                    ),
                  )
                : Container(
                    margin: EdgeInsets.symmetric(horizontal: 16),
                    child: Column(
                      children: [
                        // 错误提示
                        StreamBuilder<String?>(
                          stream: simplerLogin.errorStream,
                          builder: (context, snapshot) {
                            return Text(snapshot.data ?? ''); // 显示错误信息
                          },
                        ),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              // 输入邮箱和密码
                              CustTFF(
                                controller: emailController,
                                hint: 'Email',
                              ),
                              CustTFF(
                                obscureText: true,
                                controller: passwordController,
                                hint: 'Password',
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                children: [
                                  TextButton(
                                    onPressed: () async {
                                      // 使用邮箱和密码登录
                                      await simplerLogin.signInWithEmailAndPassword(
                                        email: emailController.text.trim(),
                                        password: passwordController.text.trim(),
                                      );
                                    },
                                    child: Text('SignIn'),
                                  ),
                                  TextButton(
                                    onPressed: () async {
                                      // 创建新账户
                                      await simplerLogin.createUserWithEmailAndPassword(
                                        email: emailController.text.trim(),
                                        password: passwordController.text.trim(),
                                      );
                                    },
                                    child: Text('Create Account'),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: StreamBuilder<bool>(
                            stream: simplerLogin.otpSent, // 是否已发送验证码
                            builder: (context, snapshot) {
                              bool otpSent = snapshot.data ?? false;
                              return Column(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                children: [
                                  // 输入手机号码
                                  CustTFF(
                                    prefixText: '+91 ',
                                    readOnly: otpSent,
                                    controller: phonrController,
                                    hint: 'PhoneNumber',
                                  ),
                                  // 如果已发送验证码，则输入验证码
                                  Visibility(
                                    visible: otpSent,
                                    child: CustTFF(
                                      controller: otpController,
                                      hint: 'OTP',
                                    ),
                                  ),
                                  // 发送验证码或验证验证码按钮
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                    children: [
                                      TextButton(
                                        onPressed: () async {
                                          if (otpSent) {
                                            // 验证验证码
                                            await simplerLogin.verifyOtp(
                                              smsCode: otpController.text,
                                            );
                                          } else {
                                            // 请求发送验证码
                                            simplerLogin.verifyPhoneNumber(
                                              phoneNumber: '+91${phonrController.text}',
                                            );
                                          }
                                        },
                                        child: Text(
                                          otpSent ? 'Verify OTP' : 'Send OTP',
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              );
                            },
                          ),
                        ),
                      ],
                    ),
                  );
          },
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    simplerLogin.dispose(); // 释放资源
  }
}

// 自定义文本框组件
class CustTFF extends StatelessWidget {
  const CustTFF({
    Key? key,
    this.hint,
    required this.controller,
    this.readOnly = false,
    this.prefixText,
    this.obscureText = false,
  }) : super(key: key);

  final String? hint, prefixText;
  final TextEditingController controller;
  final bool readOnly, obscureText;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return TextFormField(
      obscureText: obscureText, // 是否隐藏密码
      readOnly: readOnly, // 是否只读
      controller: controller, // 绑定控制器
      decoration: InputDecoration(
        prefixText: prefixText, // 前缀文本
        border: OutlineInputBorder(), // 边框样式
        labelText: hint, // 提示文本
        floatingLabelBehavior: FloatingLabelBehavior.always, // 浮动标签行为
      ),
    );
  }
}

更多关于Flutter简化登录流程插件simpler_login的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter简化登录流程插件simpler_login的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


simpler_login 是一个 Flutter 插件，旨在简化登录流程，特别是与 Firebase 的集成。它提供了一个简单的 API，使开发者能够轻松地处理用户登录、注册和密码重置等操作。以下是使用 simpler_login 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 simpler_login 插件的依赖：

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

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

2. 配置 Firebase

如果你使用的是 Firebase，确保你已经按照 Flutter 官方文档配置了 Firebase。你需要在 android/app 和 ios/Runner 目录下添加 google-services.json 和 GoogleService-Info.plist 文件。

3. 初始化 SimplerLogin

在你的 Flutter 应用中初始化 SimplerLogin。通常，你可以在 main.dart 中进行初始化：

import 'package:simpler_login/simpler_login.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SimplerLogin.initialize(
    firebaseOptions: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

4. 使用 SimplerLogin 进行登录

在你的应用中，你可以使用 SimplerLogin 提供的方法来处理登录、注册和密码重置等操作。

登录

import 'package:simpler_login/simpler_login.dart';

Future<void> login() async {
  try {
    final user = await SimplerLogin.signInWithEmailAndPassword(
      email: 'user@example.com',
      password: 'password123',
    );
    print('User logged in: ${user.uid}');
  } catch (e) {
    print('Failed to login: $e');
  }
}

注册

Future<void> register() async {
  try {
    final user = await SimplerLogin.createUserWithEmailAndPassword(
      email: 'user@example.com',
      password: 'password123',
    );
    print('User registered: ${user.uid}');
  } catch (e) {
    print('Failed to register: $e');
  }
}

密码重置

Future<void> resetPassword() async {
  try {
    await SimplerLogin.sendPasswordResetEmail(email: 'user@example.com');
    print('Password reset email sent');
  } catch (e) {
    print('Failed to send password reset email: $e');
  }
}

5. 监听用户状态

你还可以使用 SimplerLogin 来监听用户的登录状态：

SimplerLogin.authStateChanges.listen((user) {
  if (user != null) {
    print('User is logged in: ${user.uid}');
  } else {
    print('User is logged out');
  }
});

6. 注销

注销用户也非常简单：

Future<void> logout() async {
  await SimplerLogin.signOut();
  print('User logged out');
}

7. 处理错误

simpler_login 会抛出异常来处理各种错误情况。你可以使用 try-catch 块来捕获并处理这些错误。

8. 自定义 UI

simpler_login 主要处理逻辑部分，你可以根据自己的需求自定义 UI。你可以使用 Flutter 的 TextFormField、ElevatedButton 等组件来构建登录表单。

示例代码

以下是一个完整的示例，展示了如何使用 simpler_login 进行登录和注册：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SimplerLogin.initialize(
    firebaseOptions: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginScreen(),
    );
  }
}

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

class _LoginScreenState extends State<LoginScreen> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  Future<void> _login() async {
    try {
      final user = await SimplerLogin.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      print('User logged in: ${user.uid}');
    } catch (e) {
      print('Failed to login: $e');
    }
  }

  Future<void> _register() async {
    try {
      final user = await SimplerLogin.createUserWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      print('User registered: ${user.uid}');
    } catch (e) {
      print('Failed to register: $e');
    }
  }

  [@override](/user/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: _login,
              child: Text('Login'),
            ),
            ElevatedButton(
              onPressed: _register,
              child: Text('Register'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部