Azure AD 和 Angular（第二部分）：保护后端

• 下载源文件 - 1 MB

引言

这是我第一篇文章的延续，所以如果你想继续学习，请下载并为你的 Azure AD 实例配置该代码作为起点。

背景

创建了一个需要用户使用 Azure AD 登录的 Angular 站点后，现在我们想要保护我们的后端 API，以便它们忽略不包含 Azure AD 生成的令牌的调用。 在我们这样做之前，我们的网站并不是真正安全的，任何人都可以访问我们的终结点并访问敏感数据。

在 Azure AD 中设置

为了编写我们需要的代码，我们需要首先从 Azure AD 获取密钥。 转到 Azure AD 中的应用程序，然后单击“证书和密钥”（目前，我们单击“预览”项，它最终将取代今天的主项）。

如果单击“新建客户端密钥”，系统会提示你为其命名并确定其持续时间。 你可以使其在 1 或 2 年内自动过期，或者使其持续到你选择删除它为止。 当你单击“添加”时，你将看到你的密钥，如下所示

小心！！！ 如果你刷新此屏幕，则永远无法再次看到此密钥。 单击右侧的图标以将你的密钥复制到剪贴板，然后将其存储在安全的地方。

开始编码

我们需要做的第一件事是配置设置。 转到你的 *appsettings.json* 并添加此对象

"AzureAd": {
    // Coordinates of the Azure AD Tenant
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "<yourdomain>",
    "TenantId": "<yourtenantid>",

    // Coordinates of the app
    "ClientId": "<yourclientid>",
    "CallbackPath": "/signin-oidc",
    "ClientSecret": "<yourclientsecret>" 
  },

我发现找到你的域的最简单方法是单击“公开 API”，默认添加的范围包含你的域 URL。 只需删除末尾的 GUID 并将其复制到此处。

值得一提的是，此时，你正在两次配置你的 Azure 实例，一次用于 .NET Core，一次用于 Angular。 如果你没有将它们配置为相同，则它将不起作用。

现在，如果你正在继续，你需要下载本文的示例代码并创建一个文件夹并添加两个类文件，如下所示

这不是我写的代码，它是我在 Microsoft 网站上找到的代码。 我认为它将在某个时候成为库的一部分。

完成后，你可以将 AzureAD 身份验证添加到 Startup 文件中的 ConfigureServices，如下所示

 services.AddAuthentication(sharedOptions =>
            {
                sharedOptions.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
            })
          .AddAzureAdBearer(options => Configuration.Bind("AzureAd", options));

Intellisense 将帮助你添加你需要的 namespace，你就可以开始了。

我已经不止一次忘记了这一点，但你还需要在 Configure 方法中启用身份验证

            app.UseAuthentication();

在 Azure 中还有一些事情要做。 如果你想使用令牌进行验证，你需要在此处选中“ID 令牌”并保存。

稍后，当我们使用组来扮演角色时，我们需要授予应用程序对 Graph API 的一些权限。 目前，“授予管理员同意”，这将意味着你已代表你的用户表示同意。

保护 API

此时，我们已经配置了身份验证，但我们没有使用它。 Visual Studio 生成的示例应用程序有一个控制器。 在顶层添加一个 [Authorize] 属性。

该网站将不再起作用。 你可以从控制台获取令牌并将其与 Postman 一起使用以确认授权正在工作，但让我们使其在代码中工作。

首先，我们将扩展 FetchDataComponent 以使用身份验证令牌。 首先，添加一个属性来存储令牌

public static token: string;

现在，更改 get 方法以使用它

const headerDict = {
  'Authorization': 'bearer ' + FetchDataComponent.token
}

const requestOptions = {
  headers: new HttpHeaders(headerDict),
};

http.get<WeatherForecast[]>(baseUrl + 
     'api/SampleData/WeatherForecasts', requestOptions).subscribe(result => {
  this.forecasts = result;
}, error => console.error(error));

这有点粗糙，但这正是你在生产中想要做的基本想法，将令牌存储在某个地方并在你的所有调用中使用它。

现在我们需要存储令牌，所以返回到我们的 *app.component.ts*。

import {FetchDataComponent} from './fetch-data/fetch-data.component'

和

constructor(private adalSvc: MsAdalAngular6Service) {
  console.log(this.adalSvc.userInfo);
  this.adalSvc.acquireToken('https://graph.microsoft.com').subscribe((token: string) => {
    FetchDataComponent.token = token;
    console.log(token);
  });
}

就是这样！！！ 你的 Angular 代码知道如何存储你的令牌并在你的请求中将其用作身份验证标头。 该页面现在将再次工作，显示一系列天气预报。 我们拥有构建 Angular 应用程序所需的一切，并可以使用 Azure AD 保护我们的所有 API 以及对我们的前端页面的访问。

关注点

这里要记住的主要事情是，确保你将前端和后端注册到同一个 Azure AD 应用程序，并且你正在调用 app.UseAuthorization 以及服务调用。

历史

• V1.0