如何在Azure AD B2C编辑资料用户流中获取/映射头像（.NET Core）

一、Azure AD B2C端配置 #

1. 创建自定义用户属性 #

登录Azure门户进入你的AD B2C租户，找到用户属性选项，新建自定义属性：

• 名称设为profilePicture
• 类型选择字符串（建议存储头像的云存储URL，而非二进制文件，避免B2C存储限制）

2. 更新编辑资料用户流 #

• 进入用户流页面，选中你的编辑资料流，点击用户属性，将profilePicture添加到收集的属性和返回的声明列表中
• 若需前端上传体验，用户流原生无文件上传控件，可先通过输入框收集URL，或结合自定义UI实现文件上传后再传递URL给B2C

二、.NET Core端实现 #

1. 配置Claim映射 #

在Startup.cs或Program.cs中，配置OpenID Connect事件来映射B2C返回的自定义头像声明：

services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(options =>
    {
        Configuration.Bind("AzureAdB2C", options);
        options.Events = new OpenIdConnectEvents
        {
            OnTokenValidated = context =>
            {
                var profilePicClaim = context.Principal.Claims.FirstOrDefault(c => c.Type == "extension_profilePicture");
                if (profilePicClaim != null)
                {
                    var identity = context.Principal.Identity as ClaimsIdentity;
                    identity.AddClaim(new Claim("ProfilePicture", profilePicClaim.Value));
                }
                return Task.CompletedTask;
            }
        };
    });

2. 读取并展示头像 #

在Controller或视图中，通过当前用户的Claim获取头像URL并展示：

@if (!string.IsNullOrEmpty(User.FindFirst("ProfilePicture")?.Value))
{
    <img src="@User.FindFirst("ProfilePicture").Value" alt="用户头像" class="avatar">
}
else
{
    <img src="/images/default-avatar.png" alt="默认头像" class="avatar">
}

3. 更新用户头像（推荐用Microsoft Graph API） #

权限配置

给你的应用注册添加Directory.AccessAsUser.All委托权限，并完成管理员同意。

代码实现

使用Microsoft Graph SDK更新用户扩展属性：

using Microsoft.Graph;
using System.Net.Http.Headers;

public async Task UpdateUserAvatar(string userId, string avatarUrl)
{
    var graphClient = new GraphServiceClient(new DelegateAuthenticationProvider(async (requestMsg) =>
    {
        var accessToken = await HttpContext.GetTokenAsync("access_token");
        requestMsg.Headers.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);
    }));

    var user = new User
    {
        AdditionalData = new Dictionary<string, object>
        {
            // 格式：extension_<去掉连字符的应用客户端ID>_<自定义属性名>
            { "extension_1234abcd5678efgh_profilePicture", avatarUrl }
        }
    };

    await graphClient.Users[userId]
        .Request()
        .UpdateAsync(user);
}

4. 前端上传与后端处理（可选） #

如果需要用户上传本地图片，先将图片上传至云存储（如Azure Blob Storage），再将URL传给后端更新：

<form asp-action="UploadAvatar" method="post" enctype="multipart/form-data">
    <input type="file" name="avatarFile" accept="image/*">
    <button type="submit">上传头像</button>
</form>

后端处理上传逻辑：

public async Task<IActionResult> UploadAvatar(IFormFile avatarFile)
{
    if (avatarFile == null || avatarFile.Length == 0) return View();

    // 上传到Azure Blob Storage
    var blobServiceClient = new BlobServiceClient(Configuration.GetConnectionString("AzureBlobStorage"));
    var containerClient = blobServiceClient.GetBlobContainerClient("user-avatars");
    await containerClient.CreateIfNotExistsAsync(PublicAccessType.Blob);
    
    var blobName = $"{User.FindFirst(ClaimTypes.NameIdentifier).Value}_{Guid.NewGuid()}{Path.GetExtension(avatarFile.FileName)}";
    var blobClient = containerClient.GetBlobClient(blobName);
    await blobClient.UploadAsync(avatarFile.OpenReadStream(), new BlobHttpHeaders { ContentType = avatarFile.ContentType });
    
    // 更新到B2C
    await UpdateUserAvatar(User.FindFirst(ClaimTypes.NameIdentifier).Value, blobClient.Uri.ToString());

    return RedirectToAction("Profile");
}

三、常见问题排查 #

• 确认自定义属性已添加到用户流的返回声明，否则B2C不会返回该字段
• 检查扩展属性名称格式是否正确：extension_<无连字符的应用客户端ID>_<属性名>
• 验证应用注册的Graph API权限已完成管理员同意
• 若使用用户流提交更新，确保页面布局中已添加该字段的输入控件

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