介绍
ng4-adal 是一种对 Azure Active Directory (AAD) 认证与授权库的包装器。它可用于创建基于 Angular 4 的前端应用程序，以便使用 AAD 进行认证和授权。在本文中，我们将介绍 npm 包 ng4-adal 的使用方法，并提供一个示例代码来帮助您快速上手。
安装
要安装 ng4-adal，您需要使用 npm。在命令行中，输入以下命令即可：
npm install ng4-adal --save
安装完成后，您可以在项目中导入 module。
-- -------------------- ---- -------
------ - ---------- - ---- -----------
-----------
-------- -
-- ---
--------------------
------- -------------------
--------- ------------------------
------------ ---------------------- - ----
-------------- ---------------
---
-
--
------ ----- --------- - -配置项的详解
在上面的代码中，我们向 forRoot() 方法传递了几个参数，下面我们将逐一详解这些配置项：
tenant: 指您的租户 ID。在创建 Azure AD 应用程序时，您可以在控制台上看到此 ID。它是一串全局唯一的字母和数字组成的字符串。clientId: 指您应用程序的 ID。在创建应用程序后，您可以在应用程序的“概览”页面上找到此 ID。它也是一串全局唯一的字母和数字组成的字符串。redirectUri: 指您应用程序认证后将要重定向的地址，这里包括协议、域名以及端口号。cacheLocation: 指用于存储用户身份验证令牌的缓存位置。'localStorage' 为本地缓存。
使用 ng4-adal 进行认证与授权
ng4-adal 提供了一个适用于 Angular 4 的服务，名为 AdalService。它提供了一系列方法，可以帮助您管理与 AAD 的认证和授权。
在下面的示例中，我们将展示如何使用 AdalService 。
首先注入 AdalService
constructor(
private adalService: AdalService
) { }然后，在 ngOnInit 生命周期函数中初始化 AdalService。
-- -------------------- ---- -------
----------- ---- -
----------------------------------------
-- ----------------------------------------- -
-- -------------------------
---------------------------------------
- ---- -
-- ------------
-------------------------
-
-在执行 login() 方法后， ng4-adal 会自动将用户重定向到 Azure AD 认证页面。如果用户已经登录，并授予了应用程序访问权限，则将重定向到 redirectUri 地址。
请注意，AdalService 还提供了将用户注销功能：
this.adalService.logOut();
源码示例
下面是一个基于 ng4-adal 的实现示例，您可以将其导入到您的 Angular 4 项目中，即可实现 AAD 认证和授权。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------
------------
--------- -----------
--------- -
---- --------------------------------------------
------- ----------------------------------- ---- ----- -----------
------
---- -------------------------------------------
------------ -- --------------------------------- ---------
------- ----------------------------------------------
------
-
--
------ ----- ------------ ---------- ------ -
------------
------- ------------ -----------
- - -
----------- ---- -
----------------------------------------
-- ----------------------------------------- -
---------------------------------------
- ---- -
-------------------------
-
-
-结论
ng4-adal 包装了 Azure AD 认证与授权库，可以帮助您轻松地实现 AAD 验证和授权。在本文中，我们详细介绍了如何安装和配置 ng4-adal，以及如何使用 AdalService 进行认证和授权。希望此篇文章能够为前端工程师们提供有价值的学习和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663d81e8991b448e241a