如何在Microsoft Azure中配置.NET Core WebApi与Angular跨应用认证授权

以下配置默认基于单租户场景实现，多租户场景仅需调整账户类型选项即可。

1. 注册API应用（可统一注册/分别注册） #

推荐优先统一注册便于权限管理，3个API分别注册逻辑一致：

• 进入Azure AD控制台→应用注册→新建注册，填写名称例如Demo_WebApis，受支持的账户类型选择「仅此组织目录中的账户」，无需填写重定向URI，完成注册
• 切换到「暴露API」页面，设置应用ID URI为默认格式api://<API应用客户端ID>
• 按需添加作用域：api://<API应用客户端ID>/access_api1、api://<API应用客户端ID>/access_api2、api://<API应用客户端ID>/access_api3，开放管理员和用户同意权限
• 打开应用清单，将accessTokenAcceptedVersion参数值修改为2，保存配置

2. 注册两个Angular前端应用 #

两个前端注册逻辑一致，仅替换对应站点参数即可：

• 新建应用注册，填写名称例如FE_1，受支持的账户类型和API应用保持一致，重定向URI类型选择「单页应用(SPA)」，填写对应前端的回调地址例如https://fe1.example.com/auth-callback，同时配置注销重定向地址，完成注册
• 切换到「API权限」页面，添加权限→我的API→选中刚才注册的Demo_WebApis，勾选所有3个access_api*权限，添加完成后点击「授予管理员同意」避免用户手动授权
• 同样的流程完成FE_2的注册，回调地址替换为FE_2的对应地址，同样授予所有API权限
• 两个前端应用的清单中同样将accessTokenAcceptedVersion参数值修改为2

如果需要对不同API做独立的权限管控，也可以为3个WebApi分别注册独立的Azure AD应用，仅需在两个前端的API权限配置中，添加所有3个API的对应scope并授予管理员同意即可，其余配置逻辑不变。

两个前端配置逻辑完全一致，仅替换对应站点参数即可，推荐使用官方msal-angular库实现认证：

• 安装依赖：

npm install @azure/msal-browser @azure/msal-angular

• 在app.module.ts中添加MSAL配置，示例如下：

import { PublicClientApplication, BrowserCacheLocation, IPublicClientApplication } from '@azure/msal-browser';
import { MsalInterceptor, MsalInterceptorConfiguration, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG } from '@azure/msal-angular';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '*<当前前端应用的客户端ID>*',
      authority: 'https://login.microsoftonline.com/*<你的Azure AD租户ID>*',
      redirectUri: '*<当前前端的回调地址>*',
      postLogoutRedirectUri: '*<当前前端的首页地址>*'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: false // IE浏览器需设置为true
    }
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  // 配置不同API对应的请求scope
  protectedResourceMap.set('*<API1的访问域名>/*', ['api://*<API应用客户端ID>*/access_api1']);
  protectedResourceMap.set('*<API2的访问域名>/*', ['api://*<API应用客户端ID>*/access_api2']);
  protectedResourceMap.set('*<API3的访问域名>/*', ['api://*<API应用客户端ID>*/access_api3']);
  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

@NgModule({
  // ...其他配置
  providers: [
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

完成上述配置后，单点登录能力将自动生效：用户在任意一个前端登录后，访问另一个前端时MSAL会自动读取Azure AD的共享会话，无需重复输入账号密码。

三个API的配置逻辑完全一致：

• 安装依赖NuGet包：

Install-Package Microsoft.Identity.Web

• 在appsettings.json中添加认证配置：

"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "TenantId": "*<你的Azure AD租户ID>*",
  "ClientId": "*<API应用客户端ID>*",
  "Audience": "api://*<API应用客户端ID>*"
}

• 在Program.cs中添加身份验证中间件配置：

// 服务注册阶段
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(builder.Configuration.GetSection("AzureAd"));

// 中间件注册阶段，注意顺序要在路由之后、授权之前
app.UseAuthentication();
app.UseAuthorization();

• 如需细粒度权限控制，可在对应接口上添加scope校验属性：

[RequiredScope("access_api1")]
[HttpGet]
public IActionResult GetApi1Data()
{
    // 业务逻辑
}

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