65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Azure AD 登录 Angular 应用程序（第 1 部分）

Christian Graus
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2019 年 4 月 15 日

CPOL

5分钟阅读

viewsIcon

28580

downloadIcon

669

关于在 Angular 应用程序中使用 Azure AD 的系列文章的第一篇

引言

我最近在工作中有一个具体的需求，需要在 React 中创建基于角色的 Azure AD 安全性。这起初看起来很简单，但后来发现更复杂。我的下一个项目要求我用 Angular JS 做同样的事情。Angular 的那个项目证明要简单得多，因为我们使用了 .Net Core，并且因为它那里存在的库。所以我将写一系列文章来构建解决方案，先是 Angular，然后是 React。希望这能为您节省一些时间。

背景

现在许多企业都使用 Azure AD，这使其成为完美的安全性解决方案，帐户已存在，并且可以将角色（组）分配给用户来管理谁可以在应用程序中执行什么操作。对于这第一篇文章，我们将仅创建一个 Angular 应用程序，并要求前端用户登录 Azure AD。文章假设您一边编写代码一边进行，但成品（已移除我的 Azure 详细信息）是随附的代码文件，如果您愿意。当然，我删除了我的 node_modules 来压缩它，所以您需要恢复它们。

我更喜欢使用 Webstorm 进行 Typescript 开发，即使代码位于 csproj 中。当然，您也可以使用您选择的工具。

配置 Azure AD

在您的 Azure 订阅中的“Azure Active Directory”下，有一个名为“应用注册”的选项，还有一个名为“应用注册（预览）”的选项。由于预览版是长期存在的，所以我正在使用它。选择添加新的应用注册会显示如下屏幕

 

这里的名称就是您将在门户中看到的名称。默认选项将应用程序限制在您的 Azure AD 中的人员（这似乎是明智的）。重定向 URL 是应用程序运行的 URL，当您登录时，您会重定向到 Azure，应用程序会告诉 Azure 重定向回哪里。您可以配置一组重定向 URL，但如果提供了一个不在列表中的 URL，它将根本不起作用。我使用的是 localhost:4200，因为这是 Webstorm 运行的地址。如果您在 Visual Studio 中运行，默认是 3000。我通常稍后会同时添加两者，以便两者都能正常工作。

创建应用程序后，您可以按如下方式查看详细信息

 

这里重要的详细信息是客户端 ID 和租户 ID。将它们记在记事本或其他工具中，稍后会用到。

 

启动应用程序

现在转到 Visual Studio 并创建一个新的 .Net Core 应用程序。在提示时，选择一个 Angular 应用程序。这将创建一个 .Net Core 项目，其中包含一个 Angular 应用程序，并在启动时知道运行它。

我们需要另一个库来使用 Azure AD，它叫做 microsoft-adal-angular6。所以，在您的控制台中输入这个命令

npm install microsoft-adal-angular6

这会将库添加到您的 package.json 并安装它。

当然，我们不希望硬编码配置数据。您的 Angular 包有一个名为“environments”的文件夹。现在转到那里，并使用以下变量编辑两个文件

 

tenant: <tenantid>,
clientId: <clientid>,
extraQueryParameter: 'nux=1', // This is optional
endpoints: {
  "https://:4200/api": <clientId> // Note, this is an object, you could add several things here
}

 

现在转到您的 app.module.ts 文件。首先，我们需要导入我们将要使用的文件

import { MsAdalAngular6Module,AuthenticationGuard } from 'microsoft-adal-angular6';
import { environment } from '../environments/environment';

现在我们可以配置 ADAL 以用于 Azure AD

imports: [
  MsAdalAngular6Module.forRoot({
    tenant: environment.tenant,
    clientId: environment.clientId,
    redirectUri: window.location.origin,
    endpoints: environment.endpoints,
    navigateToLoginRequestUrl: false,
    extraQueryParameter: environment.extraQueryParameter,
    cacheLocation: 'localStorage'
  }),

请注意，redirectUri 是动态的，始终是站点运行的位置。还请注意，“sessionStorage”是一个可行的“cacheLocation”，具有显而易见的结果。

这就是您的应用程序重定向到 Azure AD 并要求您登录与您的 Azure 关联的帐户（默认情况下，这是您的 Azure 登录）所需做的所有事情。

您可能已经注意到，我们也从库中导入了 ApplicationGuard。它用于保护路由。如果您内联创建它们或在其他文件中创建，语法是相同的

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'counter', component: CounterComponent },
  { path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthenticationGuard] },
]),

在这种情况下，“fetch-data”路由现在要求用户登录。

访问您的令牌

自然，当我们开始保护我们的 API 时，我们将需要访问从 Azure AD 返回的令牌。我们将在顶层 app.component.ts 文件中执行此操作。

首先，我们需要导入我们使用的库

import { MsAdalAngular6Service } from 'microsoft-adal-angular6';

现在我们可以将其注入到构造函数中并在那里进行处理。此代码将在用户登录后调用。

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

在这里，我们记录用户信息，这是一个包含用户名和配置文件的对象。访问用户名属性以显示用户是处理此对象的逻辑。family_name 和 given_name 也是 profile 对象的属性。

接下来，我们调用一个方法来获取令牌，该方法又调用一个处理令牌的方法。我们只是将其记录到控制台，但这就是您将有效令牌传递到某个服务中，然后该服务使用它来设置标头以使用受保护的 API 调用。

关注点

此时，我们的应用程序实际上并不安全。我们与 Azure AD 进行了集成，但除非返回敏感数据的 API 得到保护，否则我们所拥有的都只是装饰。尽管如此，ADAL 库确实使 Angular 和 Azure AD 之间的这种初始集成变得微不足道。

历史

1.0 - 初始代码

© . All rights reserved.