时间戳

首页 > 解决方案 > Dotnet core 3.1 和 Angular 9 的 AAD 注册

c# - Dotnet core 3.1 和 Angular 9 的 AAD 注册

问题描述

我需要使用 dotnet core 3.1 构建一个简单的 spa（角度 9）应用程序，并注册 Azure Active Directory。是否有文档或教程如何制作 dotnet core + angular + AAD auth 简单应用程序？

我发现文章AAD with angular, dotnet and MSAL，但今天似乎并不实际。

我注册了两个应用程序注册（如文章中所示），并从示例中获取客户端应用程序。

我的 app.module.ts 包含：

function MSALConfigFactory(): Configuration {
  return {
    auth: {
      clientId: '<client-id-of-frontend-app-registration>',
      authority: "https://login.microsoftonline.com/<tenant-id>",
      validateAuthority: true
      // redirectUri: "http://localhost:4200/",
      // postLogoutRedirectUri: "http://localhost:4200/",
      // navigateToLoginRequestUrl: true,
    },
    cache: {
      cacheLocation: "localStorage",
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
  };
}

之后，我通过以下方式创建了后端项目：

dotnet new webapi --client-id <client-id-of-backend-app-registration> --tenant-id <tenant-id> --domain microsoft.onmicrosoft.com --auth SingleOrg

并将 angular-app 添加到后端项目中，就像这样：

dotnet new angular

所以 appsettings.json 包含：

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/ ",
    "Domain": "microsoft.onmicrosoft.com",
    "TenantId": "<tenant-id>",
    "ClientId": "<client-id-of-backend-app-registration>"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

当我运行项目时，我单击“登录”，一切正常，之后通过注入的 HTTPClients 的所有请求都包含 Bearer 令牌。

但是当我调用任何标有 [Authorize] 的控制器时，它总是返回 401。

那么也许某些步骤包含错误？或者是否有文档或教程如何制作 dotnet core + angular + AAD auth 简单应用程序？至少对于其他版本的 dotnet 和 angular，但不是太旧。

谢谢你。

标签： c#angularazureazure-active-directoryasp.net-core-webapi

解决方案

您应该在 Angular 应用程序中获取访问令牌以访问您的 Web api 应用程序。

注册 web api 应用程序时，配置Expose an API和Add a Scopelike: api://<cliendID>/api-access，并在 .net core web 应用程序中，将 设置ClientId为api://<clientid>.

在 Angular 应用程序端，您可以设置consentScopes包括您的 web api 的范围：

consentScopes: [ "api://<clientid>/api-access" ]

  • consentScopes：允许客户表达应同意的所需范围。范围可以来自多个资源/端点。在此处传递范围只会同意它，并且在客户端实际调用 API 之前不会获取访问令牌

并设置protectedResourceMap为包含获取访问令牌的 api 范围：

  • protectedResourceMap: 将资源映射到范围 {" https://graph.microsoft.com/v1.0/me ", ["user.read", "mail.send"]}。由 MSAL 在内部用于在 webApi 调用中自动附加令牌。这仅对 CORS 调用是必需的。

例如 ：export const protectedResourceMap:[string, string[]][]=[['https://localhost:44388/api/values', ['api://59b02905-8b6b-4665-a702-321e97392416/api-access']] ];

您可以查看MSAL For Angular 文档以获取更多详细信息。此代码示例适用于 Angular 9 。您可以通过更新 app.module.ts 中的配置来修改代码示例。

更新 ：

/v2.0您正在使用 Azure AD V2.0 ，因此在 web api 中验证令牌时，当局应添加：

services.AddAuthentication(AzureADDefaults.JwtBearerAuthenticationScheme)
.AddAzureADBearer(options => Configuration.Bind("AzureAd", options));

services.Configure<JwtBearerOptions>(AzureADDefaults.JwtBearerAuthenticationScheme, options =>
{
    // This is a Microsoft identity platform web API.
    options.Authority += "/v2.0";

    // The web API accepts as audiences both the Client ID (options.Audience) and api://{ClientID}.
    options.TokenValidationParameters.ValidAudiences = new []
    {
     options.Audience,
     $"api://{options.Audience}"
    };


});

推荐阅读