Blazor Server应用（Windows身份验证）如何获取登录用户头像？

下面提供几种实用的实现方案，你可以根据自身环境选择：

方案1：从Active Directory（AD）获取用户头像 #

如果你的Windows身份验证基于域环境，可以直接读取AD中存储的用户缩略图头像：

步骤1：添加AD操作依赖 #

在项目中安装System.DirectoryServices.AccountManagement NuGet包。

步骤2：创建AD用户服务类 #

新建AdUserService.cs文件：

using System.DirectoryServices.AccountManagement;

public class AdUserService
{
    public byte[]? GetUserAvatar(string username)
    {
        try
        {
            // 连接到当前域
            using var context = new PrincipalContext(ContextType.Domain);
            var user = UserPrincipal.FindByIdentity(context, username);
            
            // 返回AD中存储的用户缩略图
            return user?.ThumbnailPhoto;
        }
        catch
        {
            // 处理域连接失败、用户不存在等异常
            return null;
        }
    }
}

步骤3：注册服务 #

在Program.cs中注册该服务：

builder.Services.AddScoped<AdUserService>();

步骤4：修改LoginDisplay.razor #

@inject AdUserService AdUserService

<AuthorizeView>
    <div class="user-profile">
        @if (_avatarBytes != null)
        {
            <!-- 将字节数组转为Base64格式展示图片 -->
            <img src="data:image/png;base64,@Convert.ToBase64String(_avatarBytes)" 
                 alt="@context.User.Identity.Name" 
                 class="avatar-img" />
        }
        else
        {
            <!-- 头像获取失败时显示默认头像 -->
            <img src="/avatars/default.png" alt="默认头像" class="avatar-img" />
        }
        <span>Hello, @context.User.Identity.Name!</span>
    </div>
</AuthorizeView>

@code {
    private byte[]? _avatarBytes;

    protected override void OnInitialized()
    {
        var fullUsername = context?.User?.Identity?.Name;
        if (!string.IsNullOrEmpty(fullUsername))
        {
            // 移除域前缀（比如DOMAIN\John -> John）
            var shortUsername = fullUsername.Split('\\').LastOrDefault() ?? fullUsername;
            _avatarBytes = AdUserService.GetUserAvatar(shortUsername);
        }
    }
}

方案2：使用本地存储的头像文件 #

如果没有域环境，或者不想依赖AD，可以直接在项目中存储用户头像：

步骤1：准备头像文件 #

在项目的wwwroot文件夹下创建avatars目录，放入：

• 每个用户的头像（文件名用短用户名，比如John.png）
• 一张default.png作为默认头像

步骤2：修改LoginDisplay.razor #

<AuthorizeView>
    <div class="user-profile">
        @{
            var fullUsername = context.User.Identity.Name;
            var shortUsername = fullUsername.Split('\\').LastOrDefault() ?? fullUsername;
            var avatarPath = $"/avatars/{shortUsername}.png";
        }
        <!-- 加载用户头像，不存在则自动切换到默认头像 -->
        <img src="@avatarPath" 
             alt="@context.User.Identity.Name" 
             class="avatar-img"
             onerror="this.src='/avatars/default.png'" />
        <span>Hello, @context.User.Identity.Name!</span>
    </div>
</AuthorizeView>

通用样式优化 #

在wwwroot/css/site.css中添加头像样式，让展示更美观：

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.avatar-img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
}

内容的提问来源于stack exchange，提问作者Jim G.