随着越来越多的企业使用Azure AD作为其安全解决方案，利用现有的账户和角色（组）来管理应用程序中的权限变得尤为重要。本文将介绍如何在Angular和React应用程序中实现基于Azure AD的角色安全。
Azure AD提供了一种完美的安全解决方案，因为它允许企业利用现有的账户，并为用户分配角色来管理他们在应用程序中的权限。本文首先将创建一个Angular应用程序，并要求前端用户必须通过Azure AD登录。假设在编写代码的同时进行阅读，但如果更喜欢，也可以下载附带的代码文件（已移除Azure详细信息）。当然，已经删除了node_modules并将其打包，所以需要恢复它们。
在Azure订阅中的“Azure Active Directory”下，有一个名为“应用注册”的选项，还有一个名为“应用注册（预览）”的选项。由于预览版将是长期存在的版本，将使用它。选择添加新的应用注册将出现如下屏幕：
这里的名称是将在门户中看到的名称。默认选项将应用程序限制在Azure AD中的人（这似乎是合理的）。重定向URL是应用程序运行时的URL，当登录时，会重定向到Azure，应用程序告诉Azure重定向回哪里。可以配置一系列重定向URL，但如果提供了不在列表中的URL，它将不起作用。使用的是localhost:4200，因为这是Webstorm运行时使用的。默认情况下，如果在Visual Studio中运行，它是3000。通常稍后添加两者，以便两者都能工作。
现在转到Visual Studio并创建一个新的.Net Core应用程序。当提示时，选择Angular应用程序。这将创建一个包含Angular应用程序的.Net Core项目，并知道在启动时运行它。
需要一个额外的库来使用Azure AD，它叫做microsoft-adal-angular6。因此，在控制台中输入以下命令：
npm install microsoft-adal-angular6
这将把库添加到package.json并安装它。
当然，不想硬编码配置数据。Angular包有一个名为'environments'的文件夹。现在去那里并编辑两个文件，使用以下变量：
tenant: <tenantid>,
clientId: <clientid>,
extraQueryParameter: 'nux=1',
endpoints: {
"http://localhost:4200/api": <clientId>
}
现在转到app.module.ts文件。首先，需要导入将要使用的文件：
import { MsAdalAngular6Module, AuthenticationGuard } from 'microsoft-adal-angular6';
import { environment } from '../environments/environment';
现在可以为Azure AD配置ADAL：
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也是配置文件对象的属性。
接下来，调用一个获取令牌的方法，然后调用一个接受令牌的方法。只是将其记录在控制台中，但这就是将有效令牌传递给服务的地方，然后使用它来设置头以使用受保护的API调用。