Maui Blazor中实现弹窗式Graph认证的方案咨询

MAUI的Windows平台支持使用WebView2实现弹窗式登录（底层基于WinUI 3的WebView2控件，无需依赖WPF资源），以下是具体实现步骤：

1. 创建Windows平台专属登录弹窗 #

在MAUI项目的Platforms/Windows目录下，添加WinUI窗口用于承载WebView2：

LoginWindow.xaml #

<Window
    x:Class="YourApp.Platforms.Windows.LoginWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wv2="using:Microsoft.Web.WebView2.WinUI"
    Title="Microsoft 登录" Width="600" Height="700">
    <Grid>
        <wv2:WebView2 x:Name="AuthWebView" />
    </Grid>
</Window>

LoginWindow.xaml.cs #

using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.WinUI;
using Windows.UI.Xaml;

namespace YourApp.Platforms.Windows
{
    public sealed partial class LoginWindow : Window
    {
        public event EventHandler<string>? AuthCodeReceived;

        public LoginWindow(string authUrl)
        {
            InitializeComponent();
            LoadAuthPage(authUrl);
        }

        private async void LoadAuthPage(string authUrl)
        {
            await AuthWebView.EnsureCoreWebView2Async();
            AuthWebView.CoreWebView2.Navigate(authUrl);
            AuthWebView.CoreWebView2.NavigationStarting += OnNavigationStarting;
        }

        private void OnNavigationStarting(CoreWebView2 sender, CoreWebView2NavigationStartingEventArgs args)
        {
            // 匹配Azure AD配置的redirect_uri，示例为自定义协议格式
            const string RedirectUri = "msalYOUR_CLIENT_ID://auth";
            if (args.Uri.StartsWith(RedirectUri))
            {
                var queryParams = new Uri(args.Uri).Query;
                var authCode = System.Web.HttpUtility.ParseQueryString(queryParams).Get("code");
                
                if (!string.IsNullOrEmpty(authCode))
                {
                    AuthCodeReceived?.Invoke(this, authCode);
                    Close();
                }
            }
        }
    }
}

2. 实现跨平台认证服务 #

在MAUI共享代码中创建认证服务，仅在Windows平台调用弹窗：

using YourApp.Platforms.Windows;
using Microsoft.Maui.Devices;

namespace YourApp.Services
{
    public class GraphAuthService
    {
        public Task<string> GetAuthorizationCodeAsync()
        {
            var tcs = new TaskCompletionSource<string>();
            var authUrl = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?" +
                          "client_id=YOUR_CLIENT_ID" +
                          "&response_type=code" +
                          "&redirect_uri=msalYOUR_CLIENT_ID://auth" +
                          "&scope=User.Read%20offline_access";

            if (DeviceInfo.Platform == DevicePlatform.Windows)
            {
                var loginWindow = new LoginWindow(authUrl);
                loginWindow.AuthCodeReceived += (_, code) => tcs.SetResult(code);
                loginWindow.Activate();
            }

            return tcs.Task;
        }
    }
}

3. 在Blazor组件中完成认证流程 #

注入认证服务，获取授权码后用Graph SDK交换令牌：

@inject GraphAuthService AuthService
@using Microsoft.Graph
@using Azure.Identity

<button @onclick="AuthenticateWithGraph" class="btn btn-primary">登录</button>

@if (CurrentUser != null)
{
    <p>欢迎, @CurrentUser.DisplayName!</p>
}

@code {
    private User? CurrentUser;

    private async Task AuthenticateWithGraph()
    {
        var authCode = await AuthService.GetAuthorizationCodeAsync();
        
        // 用授权码交换访问令牌
        var credential = new AuthorizationCodeCredential(
            tenantId: "common",
            clientId: "YOUR_CLIENT_ID",
            authorizationCode: authCode,
            redirectUri: new Uri("msalYOUR_CLIENT_ID://auth")
        );

        var graphClient = new GraphServiceClient(credential);
        CurrentUser = await graphClient.Me.GetAsync();
        StateHasChanged();
    }
}

关键配置与注意事项 #

• Azure AD应用注册：需在应用的"移动和桌面应用"平台中添加msalYOUR_CLIENT_ID://auth作为重定向URI。
• WebView2运行时：确保用户设备已安装WebView2运行时，或通过NuGet安装Microsoft.Web.WebView2包将运行时打包进应用。
• 权限范围：根据业务需求调整scope参数，比如添加Mail.Read等Graph权限。

内容的提问来源于stack exchange，提问作者Baxorr