NPM包Angular5-ADAL使用教程

前言

随着互联网技术的飞速发展，越来越多的应用都被迁移至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

阅读全文

猜你喜欢

  • npm 包 generator-mytime-ng2component 使用教程

    随着前端技术的进步，我们需要使用越来越多的工具来保持代码的组织和可维护性。npm 是一个包管理器，它提供了许多功能来方便我们工作。generator-mytime-ng2component 是一个 n...

    3 年前
  • npm包json-server-plus使用教程

    在前端开发中，经常需要模拟后端的API来进行调试和测试。为了满足这个需求，有一些工具可以帮助我们快速地搭建一个模拟的API服务器。其中，json-server-plus就是一个非常好用的npm包。

    3 年前
  • npm包@shoesofprey/three-orbit-controls-es 使用教程

    介绍 @shoesofprey/three-orbit-controls-es 是一个 JavaScript 库，它为three.js提供了一种自由地控制相机的方式。

    3 年前
  • NPM 包: printname 使用教程

    介绍 在前端开发过程中，我们经常需要在控制台或者页面输出一些简单的提示或者信息。使用 console.log() 可以实现这个功能，但是当我们输出的信息比较复杂或者需要格式化的时候，就需要另一种更加高...

    3 年前
  • npm 包 react-native-swipeview-flat 使用教程

    React Native 是一种基于 JavaScript 的开源移动应用开发框架，它支持跨平台开发，可以使用一套代码同时创建 Android 和 iOS 应用。在开发中，我们经常需要实现类似左滑菜单...

    3 年前
  • npm 包 establishment-node-service-core 使用教程

    什么是 npm？ npm 是 Node.js 的默认包管理器，用于安装、共享和发布 Node.js 模块。npm 使开发者可以轻松地共享和重用代码，并便于构建更加强大的应用程序。

    3 年前
  • `npm` 包 `@ardentlabs/react-native-emoji` 使用教程

    在移动开发中，表情符号可以让用户更好地表达自己的情感和想法，因此在 React Native 中使用表情符号也是开发者需要考虑的一点。而 @ardentlabs/react-native-emoji ...

    3 年前
  • npm 包 establishment-node-service-emulator 使用教程

    在前端开发中，为了测试和调试接口，我们经常会需要使用一些模拟服务器。然而，手写模拟服务器的过程既费时又费力。因此，本文介绍了一个npm包—— establishment-node-service-em...

    3 年前
  • npm 包 establishment-nodews-meta 使用教程

    简介 npm 是 Node.js 的包管理工具，让工程师方便地下载并使用别人的代码。在前端开发中，有时需要使用一些依赖库，此时可以通过 npm 安装相应的包来实现。

    3 年前
  • npm 包 establishment-node-core 使用教程

    前言 Node.js 已经成为了前端开发中不可或缺的工具，而 NPM 则是管理 Node.js 包的重要途径。在这个庞大的 NPM 包世界中，最常用的是一些前端常用的库与框架。

    3 年前
  • npm包koa-simple-serve的使用教程

    简介 在前端开发中，调试静态资源是很常见的需求。而koa-simple-serve是一个提供简单静态资源服务的npm包，可以在开发过程中快速搭建本地静态资源服务器并且提供自动刷新功能。

    3 年前
  • npm 包 homematic-virtual-google-cast 使用教程

    homematic-virtual-google-cast 是一款前端功能强大的 npm 包，通过它我们可以实现使用 Google Cast 控制 Homematic 设备，并可在 Home-Assi...

    3 年前
  • npm 包 @shoesofprey/classnames 使用教程

    在前端开发中，我们通常需要给 HTML 元素添加多个 class，来完成不同的样式和功能。而使用 @shoesofprey/classnames 这个 npm 包，可以让我们更加简单和组织化地添加多个...

    3 年前
  • npm 包 generator-identity-code-api 使用教程

    在前端开发中，经常会用到身份证号码相关的验证和处理操作。这时候，可以使用一个 npm 包 generator-identity-code-api 来方便地生成身份证号码。

    3 年前
  • npm 包 neicon-tool 使用教程

    简介 neicon-tool 是一个基于 Node.js 的 npm 包，主要用于在前端开发中帮助使用者快速生成 Iconfont 图标库的字体文件。 使用 neicon-tool 可以避免手动下载字...

    3 年前
  • npm 包 node-red-contrib-sails 使用教程

    前言 Node-RED 是一个基于 Node.js 开发的数据流编程工具，旨在将物联网设备、API 和在线服务等不同的数据源整合在一起，方便用户进行数据处理和转换。

    3 年前
  • npm 包 mongodb-prebuilt-cross-2 使用教程

    介绍 mongodb-prebuilt-cross-2 是一个 Node.js 的 npm 包，用于在用户的设备上安装 MongoDB 数据库的预编译版本。它的安装和使用非常方便，可以帮助前端开发人员...

    3 年前
  • npm 包 promise-worker-node 使用教程

    如果您正在开发前端应用程序或需要一种简便的方式来在浏览器和 Node.js 中使用 worker，那么 npm 包 promise-worker-node 也许就是您需要的工具。

    3 年前
  • npm 包 redux-thunks 使用教程

    在前端开发中，管理应用程序状态的重要性不可忽视。Redux 是应用程序状态管理的一种流行方式，但它有时需要处理异步操作。这时，我们需要使用 redux-thunks。

    3 年前
  • npm 包 viz-controls 使用教程

    Viz-controls 是一个基于 Three.js 的 JavaScript 库，用于构建三维数据可视化场景。 它可以帮助你创建交互式的 3D 场景，并支持多种自定义选项。

    3 年前

相关推荐

    暂无文章