npm 包 ng2-adal-mo 使用教程

在前端开发中，我们经常会用到一些第三方库或工具来解决一些问题或进行快速开发。npm 是一个流行的 JavaScript 包管理器，其提供了大量的开源包供我们使用。在这篇文章中，我们将介绍如何使用一个基于 npm 的前端包 —— ng2-adal-mo。

什么是 ng2-adal-mo

ng2-adal-mo 是一个用于 Angular2 应用中集成 Azure Active Directory (AAD) 认证和授权的前端包。AAD 是微软提供的一种身份认证和授权解决方案，支持多种身份验证方式（例如用户名密码，SSO，OpenID Connect 等）。

具体来说，ng2-adal-mo 提供了以下功能：

• 与 AAD 的集成
• 自动获取和刷新 AAD token
• 保护路由，只允许已认证用户访问
• 提供获取当前用户信息的接口

如何使用 ng2-adal-mo

安装

ng2-adal-mo 可以通过 npm 安装：

npm install ng2-adal-mo --save

配置

配置 AAD 应用程序

在使用 ng2-adal-mo 之前，我们需要先配置 AAD 应用程序。具体步骤如下：

1. 登录到 Azure 门户。
2. 在左侧导航栏中选择“Azure Active Directory”。
3. 选择“应用注册”。
4. 点击“新注册”。
5. 填写名称和支持的帐户类型。
6. 在“重定向 URI”中添加应用程序要使用的 URI。
7. 点击“注册”。
8. 在应用程序页面左侧导航栏中选择“管理” -> “证书和密码”。
9. 点击“新密钥”。
10. 将密钥保存到安全的位置，并记住其值。该值只会在创建后显示一次。

在应用程序中配置

在你的 Angular2 项目中，你需要在 app.module.ts 中配置 ng2-adal-mo，具体步骤如下：

1. 导入 AdalService、AdalGuard 和 AdalInterceptor：

import { AdalService, AdalGuard, AdalInterceptor } from 'ng2-adal-mo';

1. 在 providers 数组中添加 AdalService：

providers: [
    AdalService,
    ...
],

1. 在 AdalService 中配置你的 AAD 应用程序设置。这些设置包括：

• tenant：你的租户名称。
• clientId：你的应用程序 ID。
• redirectUri：重定向 URI。
• postLogoutRedirectUri：注销之后重定向 URI。
• endpoints：用于对 AAD 中的资源进行保护的 API 终结点集合。

示例代码：

-- -------------------- ---- -------
------ ----- ----------- - -
  ----------- ------
  ----------- -
    ------- ----------------
    --------- -------------------
    ------------ ---------------------- - ----
    ---------------------- ---------------------- - ----
    ---------- -
      ------------------------------ ------------------------------
    --
  --
--

1. 在 AdalGuard 中配置需要保护的路由，可以使用以下代码：

-- -------------------- ---- -------
----- ------- ------ - -
  -
    ----- ---
    ---------- -------------
  --
  -
    ----- ------------
    ---------- -------------------
  --
  -
    ----- ----------
    ---------- -----------------
    ------------ -----------
  -
--

在 profile 路由中添加 AdalGuard，在用户未登录时，访问该路由将被重定向到登录页面。

1. 在 app.module.ts 中使用 HTTP_INTERCEPTORS 注册 AdalInterceptor，以便在 HTTP 请求中自动添加 AAD Token：

providers: [
  ...
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AdalInterceptor,
    multi: true
  }
],

使用

登录

在需要登录的组件中，使用 AdalService 的 login 方法即可。

constructor(private adalService: AdalService) {}

login(): void {
  this.adalService.login();
}

获取和使用 AAD token

使用 AdalService 的 acquireToken 方法获取 AAD token，然后将其添加到 HTTP 请求的 Authorization Header 中。例如：

-- -------------------- ---- -------
------------------- ------------ ------------ ------- ----- ----------- --

------------- ------------------- -
  ------ ------------------------------------------------------------
    --------------- -- -
      ----- ------- - --- -------------
        --------------------- ------- -----------

      ------ ------------------------------------------------------------- - ------- ---
    ---
-

获取当前用户信息

使用 AdalService 的 userInfo 属性获取当前用户信息。例如：

constructor(private adalService: AdalService) {}

getUserName(): string {
  return this.adalService.userInfo.userName;
}

至此，我们已经成功地使用 ng2-adal-mo 进行了多种 AAD 认证和授权操作。

总结

ng2-adal-mo 提供了一个非常方便的方式来集成 AAD 认证和授权功能。在本文中，我们介绍了如何安装和配置 ng2-adal-mo，并提供了一些示例代码来帮助您快速上手。

如果您正在寻找一种快速集成 AAD 的前端包，ng2-adal-mo 绝对是一个不错的选择，快来尝试吧！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab6736