如何使用 microsoft for web 进行 flutter 身份验证

Question

我想使用 flutter 在 microsoft 的 web 应用程序中进行身份验证。我开始使用这个包：https://pub.dev/packages/aad_oauth

对于我的移动平台，它就像一个魅力，但在我的网络应用程序重定向流程中有些东西不起作用。它打开微软页面，经过身份验证后，我成功重定向到我的应用程序。但是返回时，登录后的代码不会被执行。这是我的代码

Future<String?> loginUserWithMicrosoft(User user, String adminID) async {
  final Config config = Config(
    tenant: "common",
    clientId: "xxx",
    scope:
        "https://graph.microsoft.com/User.Read https://graph.microsoft.com/Calendars.ReadWrite offline_access",
    redirectUri: "xxx",
    navigatorKey: navigatorKey,
  );

  try {
    final AadOAuth oauth = AadOAuth(config);
    print("Initiating Login");

    final result = await oauth.login();
    print("Login Result: $result");

    return result.fold(
      (l) {
        print("Login Failed: $l");
        return null;
      },
      (r) {
        print("Login Successful: $r");
        if (r.refreshToken != null) {
          updateUserRefreshToken(adminID, user.userID, r.refreshToken!);
        }
        if (r.accessToken != null) {
          updateUserAccessToken(adminID, user.userID, r.accessToken!);
        }
        return r.accessToken;
      },
    );
  } catch (e) {
    print("Error during login: $e");
    return null;
  }
}

代码：

print("Login Result: $result");

不再被调用。它只是打印出登录命令之前的所有内容。之后的代码不执行。因此我也没有收到任何令牌。在文档中，它说您需要再次调用登录。不确定以什么方式，因为第一次登录后的代码被丢弃..

Answer 1

我成功验证了 Flutter 应用程序并使用 Web 应用程序中的

aad_oauth

包获取了访问令牌。

main.dart：

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

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Azure AD Login',
      navigatorKey: navigatorKey,
      home: LoginPage(navigatorKey: navigatorKey), 
    );
  }
}

login_page.dart：

import 'package:flutter/material.dart';
import 'package:aad_oauth/aad_oauth.dart';
import 'package:aad_oauth/model/config.dart';
import 'home_page.dart';

class LoginPage extends StatelessWidget {
  final GlobalKey<NavigatorState> navigatorKey;
  late final AadOAuth oauth;
  LoginPage({Key? key, required this.navigatorKey}) : super(key: key) {
    final config = Config(
      tenant: "<TenantID>",
      clientId: "<ClientID>",
      scope: "https://graph.microsoft.com/User.Read https://graph.microsoft.com/Calendars.ReadWrite offline_access",
      redirectUri: "http://localhost:8000/",
      webUseRedirect: true,
      navigatorKey: navigatorKey,
    );
    oauth = AadOAuth(config);
  }
  Future<String?> loginUserWithMicrosoft() async {
    try {
      final result = await oauth.login();
      return result.fold(
            (l) {
          print("Login Failed: $l");
          return null;
        },
            (r) {
          print("Login Successful: $r");
          return r.accessToken; 
        },
      );
    } catch (e) {
      print("Error during login: $e");
      return null;
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final accessToken = await loginUserWithMicrosoft();
            if (accessToken != null) {
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(
                  builder: (context) => HomePage(token: accessToken, oauth: oauth), 
                ),
              );
            } else {
              showError("Login failed or access token is null");
            }
          },
          child: Text('Login with Azure AD'),
        ),
      ),
    );
  }
  void showError(String message) {
    print(message);
  }
}

home_page.dart：

import 'package:flutter/material.dart';
import 'package:aad_oauth/aad_oauth.dart';
import 'login_page.dart';

class HomePage extends StatelessWidget {
  final String token;
  final AadOAuth oauth;
  const HomePage({Key? key, required this.token, required this.oauth}) : super(key: key);
  void logout(BuildContext context) async {
    await oauth.logout();
    print("Logged out");
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => LoginPage(navigatorKey: GlobalKey<NavigatorState>())),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Logged in successfully!\nYour access token: $token'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => logout(context),
              child: Text('Logout'),
            ),
          ],
        ),
      ),
    );
  }
}

index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flutter AAD OAuth</title>
  <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.13.1/js/msal-browser.min.js" integrity="sha384-2Vr9MyareT7qv+wLp1zBt78ZWB4aljfCTMUrml3/cxm0W81ahmDOC6uyNmmn0Vrc" crossorigin="anonymous"></script>
  <script src="assets/packages/aad_oauth/assets/msalv2.js"></script>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

我已将以下 URL 作为 Web 添加到 AD 应用程序的重定向 URI 中，如下所示。