配置Entra External ID实现React(MSAL)与ASP.NET Core API多账号认证

场景背景 #

正尝试为使用MSAL库的React Web应用及ASP.NET Core Web API，基于Entra External ID（Azure AD B2C的新一代CIAM替代方案）搭建现代化认证流程。两个应用均已在Entra External ID租户中注册，支持的账号类型设置为：

• 任何组织目录中的账号（任意Microsoft Entra ID租户 - 多租户）和个人Microsoft账号（如Skype、Xbox）
  同时希望通过External ID配置启用社交身份（如Google、Facebook）。

当前配置信息 #

后端appsettings.Development.json

{
  "Frontend": {
    "AadClientId": "206b2071-c4ea-421a-81fc-000000"
  },
  "Authentication": {
    "AzureAd": {
      "TenantId": "992b716b-8f0e-48df-af83-000000",
      "Instance": "https://myexternalid.ciamlogin.com/",
      "Scopes": "access_as_user",
      "ClientId": "87480de7-9960-49b9-8cf7-000000",
      "Audience": "87480de7-9960-49b9-8cf7-000000"
    },
    "Type": "AzureAd"
  }
}

前端获取的authConfig

{
    "authType": "AzureAd",
    "aadAuthority": "https://myexternalid.ciamlogin.com/992b716b-8f0e-48df-af83-000000",
    "aadClientId": "206b2071-c4ea-421a-81fc-000000",
    "aadApiScope": "api://87480de7-9960-49b9-8cf7-000000/access_as_user"
}

前端MSAL配置代码

const getMsalConfig = (authConfig: AuthConfig): Configuration => ({
    auth: {
        clientId: authConfig.aadClientId,
        authority: authConfig.aadAuthority,
        redirectUri: window.origin,
    },
});

// 使用方式
msalInstance = new PublicClientApplication(AuthHelper.getMsalConfig(authConfig));
await msalInstance.initialize();

问题解答 #

1. Entra External ID租户端需做的设置修改 #

• 添加社交身份提供商：在租户的「身份提供商」管理页面，新增Google、Facebook等社交平台，完成对应平台的开发者凭证配置（如Google OAuth客户端ID/密钥、Facebook应用ID/密钥），并将这些提供商关联到你的登录用户流或自定义策略。
• 确认账号类型与身份提供商关联：确保两个应用注册的「支持的账号类型」已设置为「任何组织目录中的账号和个人Microsoft账号」；同时在用户流/自定义策略的配置中，勾选所有需要支持的身份类型：组织账号、个人Microsoft账号、已添加的社交身份提供商。
• 配置用户流/自定义策略：创建或更新登录用户流，在「身份提供商」步骤中启用所有目标身份类型；若使用自定义策略，需在策略XML文件中添加社交身份提供商的技术配置，并在用户旅程中添加对应的登录步骤。

2. 前端与API的配置变更 #

前端（React/MSAL）调整

• 更新Authority格式：
  • 若采用多租户+个人账号+社交身份的通用模式，将后端返回的aadAuthority修改为：

    https://myexternalid.ciamlogin.com/common/
    

  • 若使用用户流，需指定完整的用户流路径：

    https://myexternalid.ciamlogin.com/992b716b-8f0e-48df-af83-000000/B2C_1_signin/
    

• 添加已知权威域名：在MSAL配置中加入knownAuthorities，确保MSAL能正确识别Entra External ID的令牌发行域：

  const getMsalConfig = (authConfig: AuthConfig): Configuration => ({
      auth: {
          clientId: authConfig.aadClientId,
          authority: authConfig.aadAuthority,
          redirectUri: window.origin,
          knownAuthorities: ["myexternalid.ciamlogin.com"]
      },
  });
  

• 登录请求携带正确范围：调用登录方法时传入API访问范围，确保获取到有权限访问后端API的令牌：

  const loginRequest = { scopes: [authConfig.aadApiScope] };
  await msalInstance.loginRedirect(loginRequest);
  

ASP.NET Core API调整

• 更新认证配置：
  • 通用多租户模式下，修改appsettings.Development.json中的TenantId为common：

    "Authentication": {
      "AzureAd": {
        "TenantId": "common",
        "Instance": "https://myexternalid.ciamlogin.com/",
        "Scopes": "access_as_user",
        "ClientId": "87480de7-9960-49b9-8cf7-000000",
        "Audience": "api://87480de7-9960-49b9-8cf7-000000"
      },
      "Type": "AzureAd"
    }
    

  • 使用用户流时，直接配置完整的Authority路径：

    "Authentication": {
      "AzureAd": {
        "Authority": "https://myexternalid.ciamlogin.com/992b716b-8f0e-48df-af83-000000/B2C_1_signin/",
        "Scopes": "access_as_user",
        "ClientId": "87480de7-9960-49b9-8cf7-000000",
        "Audience": "api://87480de7-9960-49b9-8cf7-000000"
      },
      "Type": "AzureAd"
    }
    

• 令牌发行者验证：在API的认证服务配置中，确保允许来自Entra External ID多租户及社交身份的令牌发行者。可通过TokenValidationParameters配置多个有效发行者，或放宽发行者验证（仅在测试环境使用）。
• API权限确认：在Entra External ID的API应用注册中，确认前端应用已被授予access_as_user范围的权限，若为应用权限需完成管理员同意。

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