使用 ng4-adal 实现前端应用程序的认证授权-JavaScript中文网-JavaScript教程资源分享门户

使用 ng4-adal 实现前端应用程序的认证授权

介绍

ng4-adal 是一种对 Azure Active Directory (AAD) 认证与授权库的包装器。它可用于创建基于 Angular 4 的前端应用程序，以便使用 AAD 进行认证和授权。在本文中，我们将介绍 npm 包 ng4-adal 的使用方法，并提供一个示例代码来帮助您快速上手。

安装

要安装 ng4-adal，您需要使用 npm。在命令行中，输入以下命令即可：

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

安装完成后，您可以在项目中导入 module。

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

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

配置项的详解

在上面的代码中，我们向 forRoot() 方法传递了几个参数，下面我们将逐一详解这些配置项：

tenant: 指您的租户 ID。在创建 Azure AD 应用程序时，您可以在控制台上看到此 ID。它是一串全局唯一的字母和数字组成的字符串。
clientId: 指您应用程序的 ID。在创建应用程序后，您可以在应用程序的“概览”页面上找到此 ID。它也是一串全局唯一的字母和数字组成的字符串。
redirectUri: 指您应用程序认证后将要重定向的地址，这里包括协议、域名以及端口号。
cacheLocation: 指用于存储用户身份验证令牌的缓存位置。'localStorage' 为本地缓存。

使用 ng4-adal 进行认证与授权

ng4-adal 提供了一个适用于 Angular 4 的服务，名为 AdalService。它提供了一系列方法，可以帮助您管理与 AAD 的认证和授权。

在下面的示例中，我们将展示如何使用 AdalService 。

首先注入 AdalService

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

然后，在 ngOnInit 生命周期函数中初始化 AdalService。

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

在执行 login() 方法后， ng4-adal 会自动将用户重定向到 Azure AD 认证页面。如果用户已经登录，并授予了应用程序访问权限，则将重定向到 redirectUri 地址。

请注意，AdalService 还提供了将用户注销功能：

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

源码示例

下面是一个基于 ng4-adal 的实现示例，您可以将其导入到您的 Angular 4 项目中，即可实现 AAD 认证和授权。

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

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

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

结论

ng4-adal 包装了 Azure AD 认证与授权库，可以帮助您轻松地实现 AAD 验证和授权。在本文中，我们详细介绍了如何安装和配置 ng4-adal，以及如何使用 AdalService 进行认证和授权。希望此篇文章能够为前端工程师们提供有价值的学习和指导。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6005663d81e8991b448e241a