[Angular] 将用户认证委托给Azure AD或Microsoft帐户

3 年 ago

新, 韵

2 minutes

2021/3/24 追記：
使用oidc-client和ngrx的ng-oidc-client似乎是最好的选择。

然而，Azure似乎有其特殊规格，不能直接使用它。
它可以用于最初的身份验证。然而，获取连接到资源服务器所需的访问令牌存在问题。
针对Azure，需要为每个资源指定范围以获取访问令牌。因此，访问令牌的管理需要我们自行处理。
所获取的访问令牌可能是v1.0版本的。我们正在调查如何转换为v2.0版本。

追加于2021年3月19日。

可能更容易理解OIDC-Client。另外，Angular-OAuth2-OIDC也可以。

2021年3月18日追加内容

使用angular-auth-oidc-client比起@azure/msal-angular更加简单且优秀。

2021/2/25更新
@azure/msal-angular 的新版本2.x已经发布。
本文内容仅适用于旧版本1.x时代。

我会粘贴一个从1.x到2.x的迁移指南供参考。
https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/1.x-2.x-upgrade-guide.md

首先

通过Angular应用程序访问受Azure AD或Microsoft帐户保护的资源。

因此，首先进行用户认证。

准备。

(1) 在Azure AD中注册应用程序

将应用程序注册到Azure AD。

点击新注册。
输入以下项目并点击注册。

入力項目内容Nameアプリケーションの名前です。お好みの名前をつけます。Supported account typeアプリケーションを使用できるユーザアカウント種別を選択します。任意のAzure ADテナントとMicrosoftアカウントから使用できるようにする場合は Accounts in any organizational directory (Any Azure AD directory – Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox) を選択します。Redirect URI入力しないでOKです（後で設定します）。

当您创建完毕后，将会显示生成的应用程序（客户端）ID，请记下。

(2) 将平台注册到Azure AD应用程序

将创建的Azure AD应用程序注册到平台上。

入力項目内容Redirect URIs開発時なので http://localhost:4200/ にします。Front-channel logout URL空でOKです。Access tokensチェックします。ID tokensチェックします。

步骤(1)：准备Angular应用程序。

是否使用现有的内容，还是创建新的内容。
启用路由设置。

步骤(2)：添加包裹

我会在包裹中添加两个项目。

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

虽然 @azure/msal-angular 官方只支持 Angular 9，但其实也可以在 Angular 11 上运行。
（希望能尽快更新啊。。。）

步骤（3）：环境设置。

為了在开发/生产环境中能够更换设置，我们需要将其添加到 src/environments/environment.ts 文件中。

import { Configuration } from 'msal';

export const msalConfiguration: Configuration = {
  auth: {
    clientId: 'Azure ADアプリケーションのApplication ID',
    authority: 'https://login.microsoftonline.com/common',
    redirectUri: 'http://localhost:4200/',
  },
  cache: {
    cacheLocation: 'localStorage',
  },
};

客户端ID显示在Azure AD应用程序概述页面上。
权限（Authority）会根据所选的“支持的帐户类型”在应用程序创建时进行更改（在第3步的中间部分会有说明）。

Supported account typeauthoritySingle tenanthttps://login.microsoftonline.com/テナントIDまたはテナント名Multitenanthttps://login.microsoftonline.com/organizationsMultitenant and MSAhttps://login.microsoftonline.com/commonMSAhttps://login.microsoftonline.com/consumers

加载MSAL模块的步骤(4)

请编辑src/app/app.module.ts文件。

这是有关MSAL模块的设置。

import { MsalAngularConfiguration } from '@azure/msal-angular';

const msalAngularConfig: MsalAngularConfiguration = {
  popUp: false,
};

在@NgModule的imports和providers中添加内容。

import { MsalInterceptor, MsalModule } from '@azure/msal-angular';
import { msalConfiguration } from '../environments/environment';

@NgModule({
  imports: [
    MsalModule.forRoot(msalConfiguration, msalAngularConfig),
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true },
  ]
})

步骤（5）：设置根守护。

请在 src/app/app-routing.module.ts 文件中编辑，在您想要保护的URL上设置路由守卫。

import { MsalGuard } from '@azure/msal-angular';

const routes: Routes = [
  {
    path: '',
    component: TopPageComponent,
    pathMatch: 'full',
    canActivate: [MsalGuard],
  },
];

这里写的TopPageComponent是之前另外创建的。

执行

以平常方式運行npm run start來啟動服務器並訪問http://localhost:4200/。
將重定向到https://login.microsoftonline.com。
登錄後，返回http://localhost:4200/並顯示與我們設置的路由對應的組件。

整个源码

我在GitHub上放置了全部源代码。