如何在 Flutter 中利用 Microsoft MFA 实现基于电子邮件输入的条件导航？

Question

我正在开发一个 Flutter 应用程序，需要将 Microsoft 登录与多重身份验证 (MFA) 集成。我希望通过在后续登录时记住用户的电子邮件并根据电子邮件输入有条件地引导流程来增强用户体验。这是我要实现的具体流程：

1. 初始登录：用户使用 Microsoft 登录名登录。用户输入电子邮件和密码（如果之前登录过，则无需重新输入电子邮件），然后通过 Microsoft Authenticator 应用完成 MFA。

电子邮件从此发送至

之后

2. 应用程序重新启动：重新打开应用程序后，打开登录屏幕，用户在其中输入以前使用的电子邮件，他们应直接导航到 MFA 屏幕。成功进行 MFA 验证后，他们应该导航至成功屏幕。对于新电子邮件，标准登录流程应适用于导航到 Microsoft 登录。

这是我的代码：

import 'package:flutter/material.dart';
import 'package:aad_oauth/aad_oauth.dart';
import 'package:aad_oauth/model/config.dart';
import '../../provider/sign_in_provider.dart';   
import '../SuccessScreen.dart';   

class LoginScreen extends StatefulWidget {
  static final navigatorKey = GlobalKey<NavigatorState>();

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

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController _emailController = TextEditingController();
  late final AadOAuth oauth;

  @override
  void initState() {
    super.initState();
    final config = Config(
      tenant: '2f5964b2-44fc-420d-8974-7afab2XXXX',
      clientId: 'ed4c80e3-847b-4b0a-85a9-c96862096XX',
      scope: 'openid profile email',
      redirectUri: 'https://dasundola.b2clogin.com/oauth2/nativeclient',
      navigatorKey: SignInProvider.navigatorKey, 
    );
    oauth = AadOAuth(config);
  }

  void _login() async {
    try {
      await oauth.login();
      final accessToken = await oauth.getAccessToken();
      if (accessToken != null) {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => SuccessScreen()),
        );
      }
    } catch (e) {
      _showLoginError(e.toString());
    }
  }

  void _showLoginError(String message) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Login Error'),
        content: Text(message),
        actions: [
          TextButton(
            child: Text('OK'),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            SizedBox(height: 20),
            Text(
              'Sign in',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(
                labelText: 'Email, phone, or Skype',
                border: OutlineInputBorder(),
                filled: true,
                fillColor: Colors.white,
              ),
              keyboardType: TextInputType.emailAddress,
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _login,
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: 12),
                child: Text(
                  'Next',
                  style: TextStyle(fontSize: 16),
                ),
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue[700], // Background color
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(4),
                ),
              ),
            ),
            SizedBox(height: 16),
           
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _emailController.dispose();
    super.dispose();
  }
}

如何在 Flutter 中有效地实现基于用户电子邮件输入的条件导航？是否有最佳实践或特定的 Flutter 包可以促进用户会话和 MFA 交互的管理，尤其是与 Microsoft Azure 的身份验证服务一起使用？

任何关于如何在 Flutter 中实现这一目标的见解或指导将不胜感激！

Answer 1

首先，添加 flutter_secure_storage 来安全地存储用户的电子邮件。 创建一个方法来检查用户之前是否登录过。 实现条件导航： 欲了解更多信息请告诉我