NPM包Angular5-ADAL使用教程

阅读时长 9 分钟读完

前言

随着互联网技术的飞速发展,越来越多的应用都被迁移至Web端。而Web应用的开发中,前端技术作为其中至关重要的环节,受到了越来越多的关注。Angular5作为目前最受欢迎的前端框架之一,其优秀的性能和开发体验,使得它在前端技术中拥有很高的市场占有率。而本文将会讲解一个 npm 包,它将会与 Angular5 框架良好的结合,让我们可以更加方便地实现一个安全的单页Web应用。

前置知识

  1. 了解 Angular5
  2. 熟悉 TypeScript
  3. 了解 Azure AD

npm 包 Angular5-ADAL 简介

Angular5-ADAL 是一个基于Azure Active Directory实现的认证流程的前端库,它内建在 Angular5 中,提供了一个针对 Angular5 、Active Directory 的认证体验。Angular5-ADAL 所提供的认证方式适用于所有仅运行于安全网络内的应用,它基于 OAuth 2.0 协议,支持多种认证场景。

npm 包 Angular5-ADAL 安装

  1. 第一步是安装 npm 包。使用以下命令:

npm install angular5-adal --save

  1. 接下来,你需要在 app.module.ts 中引入 AdalService , 并在 providers 数组中注入 AdalService 。具体如下:
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- ----------------
-----
-----------
    -----
    ---------- --------------
    -----
--
------ ----- --------- --
  1. 在 @NgModule 中使用 forRoot() 函数:
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ --------------- - ---- ----------------
------ - ----------------- - ---- -----------------------
------ - ---------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- -----------------------

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

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

//注意,请替换上面的 YOUR_CLIENT_ID和 YOUR_TENANT 内容为你的 Azure AD 的应用程序客户端ID 和租户。

npm 包 Angular5-ADAL 使用

Angular5 的 AdalService 提供了一些常用的 API,以实现整个认证流程,包括登录、注销、检测用户是否认证、获取用户信息等等。可以通过注入 AdalService 来调用 API。具体如下:

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

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

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

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

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

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

其中,handleWindowCallback() 和 getUser() 分别用于处理 JWT 和获取登录用户的信息。getUser() 函数返回用户的信息,如下:

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

示例

以一个简单的应用为例,说明如何使用 Angular5-ADAL。在应用中,我们需要实现认证、显示用户信息、执行 API 请求等功能。以下是一个示例:

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

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

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

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

  ---------- -

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

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

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

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

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

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

----

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

------- ----------- - ---- --------
  • 若要启用 API 保护,可以通过 AdalService 的 http 对象进行对 api 请求的拦截:
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ----------------
------ - ---------- - ---- -----------------------

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

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

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

总结

Angular5-ADAL 是一个适用于 Angular5 应用程序的基于 Azure AD 的认证库,它从认证的角度出发,提供了一些常用的认证 API,让我们可以更加方便地实现一个安全的单页 Web 应用。总得来说,npm 包 Angular5-ADAL 使用起来比较方便,你只需认真阅读和理解上述使用方法,请结合自己的应用场景,去使用它,相信它能为你的 Web 应用增添新的功能和安全性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005713181e8991b448e816d

纠错
反馈