为 Blazor Web App 配置 Azure Entra External ID 身份验证

抱歉，我需要您提供要翻译的完整文本（除代码块和 URL 之外的内容），才能为您进行翻译。请把文章的正文粘贴在这里，我会保持原有的格式、Markdown 语法以及技术术语，只翻译文字部分。谢谢！

概述

本指南说明如何为 Blazor Web 应用程序配置 Azure Entra External ID（Azure AD B2C 的继任者）。虽然主要面向 Blazor Server 应用，但同样适用于 WebAssembly。使用的 .NET 版本为 .NET 10（最新 LTS）。

前置条件

1. Azure Entra 中的默认 Workforce 租户。
2. Azure Entra 管理员访问权限。
3. 已安装 .NET 10 SDK。

创建 Blazor Web 应用

dotnet new blazorserver -o MyBlazorApp

将 Interactive Render Mode 设置为 Server（如果需要，也可以选择 WebAssembly）。

添加所需的 NuGet 包

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

Source: …

配置 Azure Entra

1. 登录 Azure Entra 管理中心

确保您位于默认的 Workforce 租户（概览 → 管理租户）。

2. 外部身份

导航至 External Identities → External Identity Providers，确认已启用所需的提供程序（默认设置通常已足够）。

3. 用户流

创建一个新的 User Flow 用于注册/登录，并选择所需的用户属性。

4. （可选）自定义域名

如果您拥有自定义域名，请在 Domain names 下添加并完成验证。

5. 应用注册

1. 前往 App registrations → New registration。
2. 选择 允许个人账户 的选项。
3. （可选）在 Branding & Properties 中设置您的徽标、服务条款和自定义域名。
4. （可选）在 Owners 中将自己添加为应用所有者。

6. 身份验证

添加一个 Web redirect URI：

https:///signin-oidc

示例：

• http://localhost:5171/signin-oidc
• https://localhost:7215/signin-oidc

7. 证书与机密

创建一个新的 client secret，并复制其值以备后用。

将设置添加到 appsettings.json

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "consumers",               // external users authentication
    "ClientId": "your_app_registration_client_id",
    "ClientSecret": "the_secret_you_generated_earlier", // use Key Vault in production
    "CallbackPath": "/signin-oidc"
  },
  "DownstreamApi": {
    "BaseUrl": "https://graph.microsoft.com/v1.0/",
    "RelativePath": "me",
    "Scopes": [
      "user.read"
    ]
  }
}

在 Program.cs 中配置服务

using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;

var builder = WebApplication.CreateBuilder(args);
var configuration = builder.Configuration;

// Add authentication services
builder.Services
    .AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(configuration)
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddInMemoryTokenCaches();

builder.Services.AddCascadingAuthenticationState();

var app = builder.Build();

// Middleware
app.UseAuthentication();
app.UseAuthorization();

app.MapRazorComponents()
   .AddInteractiveServerRenderMode();

app.Run();

更新 _Imports.razor

@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization

在页面或组件上要求身份验证

在 Razor 组件或页面的顶部添加 Authorize 属性：

@attribute [Authorize]

您还可以指定角色，例如 [Authorize(Roles = "Admin")]。

使用 AuthorizeView

AuthorizeView 允许您为已认证和未认证的用户显示不同的 UI，例如登录/注销按钮或隐藏敏感部分。

<AuthorizeView>
    <Authorized>
        <button @onclick="Logout">Logout</button>
    </Authorized>
    <NotAuthorized>
        <button @onclick="Login">Login</button>
    </NotAuthorized>
</AuthorizeView>

Reference Implementation

一个完整的示例项目，演示 Azure Entra External ID 集成，可在 Inventory Management System 仓库中获取（链接由作者提供）。