使用Flutter Web的Microsoft Azure身份验证

Question

我是新的扑动，我被困在一个点，我需要使用微软身份验证我的web应用程序。我没有找到任何与此相关的文件，flutter也没有这样做的软件包。我想我需要在本地平台编写代码，并将其连接到扑动。帮助! !

Answer 1

找到一个可以在您的Flutter代码中尝试导入的Flutter Microsoft认证包。

通过将其添加到pubsec中的依赖项列表中，将Flutter Microsoft Authentication包导入到您的Flutter应用程序中。yaml文件。

依赖性:

flutter_microsoft_authentication: ^0.1.0

参考:https://pub.dev/packages/flutter_microsoft_authentication

Answer 2

一年后，我遇到了同样的问题，尽管我搜索了，但没有找到任何明确和有效的解决方案。这就是我所做的。它可能会帮助一些人，直到一个干净简单的支持Flutter web的软件包发布。

这个概念很简单。为了不处理用户身份验证，我希望用户向身份提供者(IP): Azure Active Directory挑战他的凭据，并让Azure使用安全令牌将他重定向到我的应用程序。

客户端应用程序将用户重定向到Microsoft身份验证web应用程序，并传递一个"回调url"，一旦用户通过身份验证，Azure将使用该url重定向用户。通过重定向到客户端应用程序，Azure还传递一个访问令牌，最终给出有关此令牌接收者可能需要知道的角色或权限的一些信息。我们可以把代币放在某个地方。比如在一个全局变量中:

class Globals {
String azureAccessToken = "";
Globals._privateConstructor();
static final Globals _instance = Globals._privateConstructor();
static Globals get instance => _instance;
}

应用程序处理路由，如果知道令牌，则显示主应用程序小部件;如果还不知道令牌，则显示身份验证小部件

import 'package:flutter/material.dart';
import 'package:flutterweb_azuread_authentication/helpers/globals.dart';
import 'authenticate.dart';
import 'main_app.dart';
class FlutterAuthenticationApp extends StatefulWidget {
const FlutterAuthenticationApp({super.key});
@override
State<FlutterAuthenticationApp> createState() => _FlutterAuthenticationAppState();
}
class _FlutterAuthenticationAppState extends State<FlutterAuthenticationApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: 
{
"/":(context)=>Globals.instance.azureAccessToken==""?const Authenticate():const MainApp(),
}
)
;
}
}

MainApp将简单地显示一条消息，给出令牌

import 'package:flutter/material.dart';
import 'package:flutterweb_azuread_authentication/helpers/globals.dart';
class MainApp extends StatefulWidget {
const MainApp({super.key});
@override
State<MainApp> createState() => _MainAppState();
}
class _MainAppState extends State<MainApp> {
@override
Widget build(BuildContext context) {
return 
SelectableText("Seems you're authenticated. Your token is ${Globals.instance.azureAccessToken}");
}
}

Authenticate小部件显示一个登录按钮。当用户点击登录时，他应该被重定向到微软登录应用程序，然后重定向到该应用程序。

import 'package:flutter/material.dart';
import 'package:openid_client/openid_client_browser.dart' as open_id;
class Authenticate extends StatefulWidget {
const Authenticate({super.key});
@override
State<Authenticate> createState() => _AuthenticateState();
}
class _AuthenticateState extends State<Authenticate> {
@override
Widget build(BuildContext context) {
var tenantId = "<your tenant id>";
var clientId = "<your app registration id>";
var scope = "api://<your scope>";
return Scaffold(
appBar: AppBar(title: const Text("Authenticate with Azure AD")),
body: Center(
child: ElevatedButton(
child: const Text("Login"),
onPressed: null,
),
),
);
}
}

当用户点击登录时，我们需要将应用程序重定向到Azure AD身份验证，传递包括回调url在内的相关参数。此回调url必须获得Azure AD发送的令牌并完成流程。

寻找现有的软件包，我遇到了以下问题:

• aad_oauth:不知什么原因，这个包不能为我工作。我面临着许多依赖问题，我认为尽管宣布了什么，但它并不支持Flutter Web。
• flutter_aad_auth:不支持web
• azure_ad_authentication:不支持web

最后，我必须使用openid_client包获得我自己的解决方案，更准确地说是openid_client_browser。

此包处理流程，特别是将Flutter Web应用程序重定向到Microsoft Azure身份验证。

为了使用Azure AD，我们显然需要配置一个活动目录。我不会在这里描述它。注意，你需要你的tenandId、注册应用ID和一个作用域。我试图在本文中多解释一点。

现在让我们使用openid_client_browser重定向到Azure AD身份验证，并观察会发生什么…

import 'package:flutter/material.dart';
import 'package:openid_client/openid_client_browser.dart' as open_id;
class Authenticate extends StatefulWidget {
const Authenticate({super.key});
@override
State<Authenticate> createState() => _AuthenticateState();
}
class _AuthenticateState extends State<Authenticate> {
@override
Widget build(BuildContext context) {
var tenantId = "<your tenant id>";
var clientId = "<your app registration id>";
var scope = "api://<your scope>";
return Scaffold(
appBar: AppBar(title: const Text("Authenticate with Azure AD")),
body: Center(
child: ElevatedButton(
child: const Text("Login"),
onPressed: () {           authenticate(Uri.parse("https://login.microsoftonline.com/$tenantId/v2.0"), clientId, [scope]);
},
),
),
);
}
}
authenticate(Uri uri, String clientId, List<String> scopes) async {
var issuer = await open_id.Issuer.discover(uri);
var client = open_id.Client(issuer, clientId);
var authenticator = open_id.Authenticator(client, scopes: scopes);
await authenticator.credential;
authenticator.authorize();
}

当您点击登录按钮时，将显示Microsoft登录页面。一旦您输入凭据并完成登录过程，Azure将您的浏览器重定向到添加#access_token=xxx的Flutter Web应用程序的根目录有点奇怪的是，它没有使用常规的查询参数与?access_token，但我们将生存。现在我们必须在收到令牌后立即从URI中提取它。因此，在主入口点运行应用程序之前，

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutterweb_azuread_authentication/helpers/globals.dart';
import 'widget/flutter_authentication_app.dart';
void main() {
if (Uri.base.toString().contains("access_token=")) {
var idxStart = Uri.base.toString().indexOf("access_token=") + "access_token=".length;
var idxEnd = min(Uri.base.toString().length - 1, Uri.base.toString().indexOf("&token_type="));
var accessToken = Uri.base.toString().substring(idxStart, idxEnd);
Globals.instance.azureAccessToken = accessToken;
}
runApp(const FlutterAuthenticationApp());
}

由于我提取令牌的方式，它看起来不是很漂亮，但它完成了工作。

抱歉，如果这个答案有点长，但我想尽可能清楚。你可以在github

上找到代码