从多外部租户Azure B2C登录用户获取头像的最优方案及实现

直接在Azure B2C自定义策略里配置，让用户登录时从外部身份提供商（比如Google、微软账号）拉取头像URL，通过ID Token返回给Nuxt前端，前端再把这个URL传给ASP.NET Core API存储。之后所有场景优先用API存的头像，要是API里没存再 fallback 到B2C返回的链接，同时支持用户在API端上传新头像覆盖存储。这样既能拿到外部IDP的头像，又能通过API实现自定义的头像管理。

一、Azure B2C自定义策略配置：拉取外部IDP头像字段 #

不同外部IDP的头像字段不一样，比如Google是picture，微软是photo，得在自定义策略里把这些字段映射成B2C的声明，再返回给客户端。

1. 在自定义策略的ClaimsSchema中定义头像声明：

<ClaimsSchema>
  <!-- 定义头像声明，适配不同外部IDP的字段 -->
  <ClaimType Id="userAvatar">
    <DisplayName>User Avatar URL</DisplayName>
    <DataType>string</DataType>
    <DefaultPartnerClaimTypes>
      <Protocol Name="OAuth2" PartnerClaimType="picture" /> <!-- Google -->
      <Protocol Name="OpenIdConnect" PartnerClaimType="photo" /> <!-- 微软 -->
      <Protocol Name="OAuth2" PartnerClaimType="picture" /> <!-- Facebook -->
    </DefaultPartnerClaimTypes>
  </ClaimType>
</ClaimsSchema>

2. 在对应技术配置文件中添加输出声明：
   不管是本地账号登录还是外部IDP登录的TechnicalProfile，都要加这个输出声明，确保头像字段被包含进来：

<OutputClaim ClaimTypeReferenceId="userAvatar" />

3. 在RelyingParty里指定返回头像声明：
   确保ID Token里携带这个字段，让前端能拿到：

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <TechnicalProfile Id="PolicyProfile">
    <DisplayName>PolicyProfile</DisplayName>
    <Protocol Name="OpenIdConnect" />
    <OutputClaims>
      <!-- 保留原有声明，新增头像字段 -->
      <OutputClaim ClaimTypeReferenceId="userAvatar" />
    </OutputClaims>
    <SubjectNamingInfo ClaimType="sub" />
  </TechnicalProfile>
</RelyingParty>

二、Nuxt前端：获取头像并同步到API #

登录成功后，从ID Token里解析出头像URL，在用户首次进入系统时，把这个URL传给API存储。

1. 解析ID Token获取头像：
   用base64解码ID Token的payload部分，取出头像字段：

// 假设登录后拿到了idToken
const payload = JSON.parse(atob(idToken.split('.')[1]))
const userAvatar = payload.userAvatar // 对应自定义策略里的声明ID
const userId = payload.sub // 用户唯一标识

2. 调用API同步头像：
   在页面初始化或登录回调后，调用API的头像存储接口：

async function syncUserAvatar() {
  const avatarUrl = this.$auth.user.userAvatar
  const userId = this.$auth.user.sub
  if (avatarUrl) {
    await this.$axios.post('/api/user/avatar', {
      userId,
      avatarUrl
    })
  }
}

三、ASP.NET Core 6 API：存储与优先返回头像 #

API端要实现头像的存储逻辑，后续请求优先返回本地存储的头像，没有的话再用B2C的链接。

1. 用户实体添加头像字段：
   在你的用户模型里加一个AvatarUrl字段，用来存储API端的头像路径或优先使用的URL：

public class AppUser
{
    public string Id { get; set; }
    public string AvatarUrl { get; set; } // 存储本地头像路径或优先URL
    // 其他用户属性
}

2. 实现头像同步接口：
   创建接口接收前端传来的头像URL，仅当用户无本地头像时存储（也可以根据需求允许覆盖）：

[ApiController]
[Route("api/user")]
public class UserController : ControllerBase
{
    private readonly AppDbContext _dbContext;

    public UserController(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    [HttpPost("avatar")]
    public async Task<IActionResult> SyncAvatar([FromBody] SyncAvatarRequest request)
    {
        var user = await _dbContext.Users.FindAsync(request.UserId);
        if (user == null)
        {
            return NotFound("用户不存在");
        }

        // 仅当用户无本地头像时存储，可根据需求改为强制覆盖
        if (string.IsNullOrEmpty(user.AvatarUrl))
        {
            user.AvatarUrl = request.AvatarUrl;
            await _dbContext.SaveChangesAsync();
        }

        return Ok();
    }

    public class SyncAvatarRequest
    {
        public string UserId { get; set; }
        public string AvatarUrl { get; set; }
    }
}

3. 优先返回本地头像：
   在获取用户信息的接口里，优先返回API存储的头像，没有的话再用B2C Token里的头像：

[HttpGet("profile")]
public async Task<IActionResult> GetUserProfile()
{
    var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
    var user = await _dbContext.Users.FindAsync(userId);
    if (user == null)
    {
        return NotFound();
    }

    // 从Token里获取B2C返回的头像
    var b2cAvatar = User.FindFirstValue("userAvatar");

    return Ok(new
    {
        Id = user.Id,
        AvatarUrl = !string.IsNullOrEmpty(user.AvatarUrl) ? user.AvatarUrl : b2cAvatar,
        // 其他用户信息
    });
}

四、边缘场景优化 #

• 自定义头像上传：新增API接口允许用户上传本地图片，存储到服务器或云存储（比如Azure Blob），然后更新AppUser的AvatarUrl为本地存储路径。
• 外部头像同步：如果需要同步外部IDP的头像更新，可以定期调用Azure B2C Graph API拉取用户最新头像，再更新API存储（注意控制调用频率，避免过度请求）。
• 头像缓存：把API存储的头像URL做缓存，或者直接下载外部头像到本地存储，避免依赖外部链接失效。

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