Angular应用中修改Azure AD B2C关联用户配置的方法咨询

首先明确：令牌中的Claims是只读快照，直接修改本地令牌无效，真正的用户数据存储在Azure AD B2C目录中。要实现应用内编辑，必须通过Microsoft Graph API修改目录中的用户数据，再刷新本地令牌同步更新。

步骤1：配置Azure AD B2C应用权限 #

在Azure门户的AD B2C控制台中，找到你的应用，添加Microsoft Graph的委托权限：

• 选择User.ReadWrite（允许用户修改自身数据，遵循权限最小化原则）
• 点击「授予管理员同意」（必须完成此步骤，否则用户无法调用API）

步骤2：获取Graph API访问令牌 #

你当前使用的MSAL（@azure/msal-angular）可直接获取调用Graph所需的令牌：

async getGraphAccessToken(): Promise<string> {
  const request = {
    scopes: ["https://graph.microsoft.com/User.ReadWrite"]
  };
  try {
    const response = await this.authService.instance.acquireTokenSilent(request);
    return response.accessToken;
  } catch (error) {
    // 静默获取失败，触发交互式登录
    const response = await this.authService.instance.acquireTokenPopup(request);
    return response.accessToken;
  }
}

步骤3：实现编辑与同步逻辑 #

1. 搭建编辑表单（绑定用户数据）：

<form (ngSubmit)="saveCompanyName()">
  <div>
    <label>公司名称</label>
    <input type="text" [(ngModel)]="companyName" name="companyName" required>
  </div>
  <button type="submit" [disabled]="!companyName">保存</button>
</form>

2. 提交时调用Graph API更新用户属性，再刷新本地令牌：

async saveCompanyName() {
  // 1. 获取Graph令牌
  const accessToken = await this.getGraphAccessToken();
  
  // 2. 替换为你的扩展属性完整名称（可在Azure AD B2C扩展属性页面查看）
  const fullExtensionName = "extension_<你的应用ID去掉横杠>_CompanyName";
  
  // 3. 调用Graph API更新用户数据
  const updateResponse = await fetch("https://graph.microsoft.com/v1.0/me", {
    method: "PATCH",
    headers: {
      "Authorization": `Bearer ${accessToken}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      [fullExtensionName]: this.companyName
    })
  });

  if (!updateResponse.ok) {
    const error = await updateResponse.json();
    alert(`更新失败: ${error.error.message}`);
    return;
  }

  // 4. 刷新本地ID令牌，同步Claims
  await this.authService.instance.acquireTokenSilent({
    scopes: [this.authService.instance.getActiveAccount().idTokenClaims['aud']]
  });

  // 5. 同步本地数据
  this.companyName = this.authService.instance.getActiveAccount().idTokenClaims[fullExtensionName];
}

关键注意事项 #

• 扩展属性名称：必须使用完整命名格式，即extension_<应用ID去掉横杠>_属性名，可在Azure AD B2C「用户属性」→「扩展属性」页面查看。
• 权限控制：避免使用User.ReadWrite.All这类过宽权限，User.ReadWrite足够支持用户修改自身数据。
• 异常处理：覆盖静默令牌获取失败、API调用失败等场景，给用户清晰的错误提示。

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