npm 包 wfw-ngx-adal-observable 使用教程

前言

在现代 web 开发中，前端开发人员经常需要管理身份验证和授权。针对这一需求，Microsoft Azure Active Directory (AD) 是一种很好的解决方案。Angular 开发人员可以使用 @azure/msal-angular npm 包集成 Azure AD。不过 msal-angular 对于某些场景而言还需要进行一些额外处理。这时候可以考虑使用 wfw-ngx-adal-observable 这个 Angular 服务。

wfw-ngx-adal-observable 的好处在于，它是基于 adal.js 构建的，提供了一个简单易用的方式来集成 Azure AD 以及在应用程序请求中包含授权令牌。除此之外，它还支持以被观察的模式来操作，并提供了一些额外的功能。

在本文中，我们将介绍 wfw-ngx-adal-observable 的详细用法。

环境要求

在使用 wfw-ngx-adal-observable 之前，需要先满足以下条件：

  • Angular CLI: 11.0.0 或以上
  • Angular: 11.0.0 或以上
  • adal.js: 1.0.17 或以上

安装

首先，需要使用 npm 安装 wfw-ngx-adal-observable：

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

配置

导入 ngx-adal-observable

在 AppModule 中导入 AdalService 和 HttpClientModule：

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

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

在 Angular 项目中配置 Azure AD

在 src/environments/environment.ts 中，添加以下配置：

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

设置拦截器

使用拦截器将 access_token 添加到请求头中：

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

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

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

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

使用 HTTP_INTERCEPTORS 将拦截器添加到 AppModule 中：

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

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

使用示例

登录

在组件中注入 AdalService 并调用 login 方法以进行 Azure AD 登录：

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

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

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

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

获取用户信息

注入 AdalService 并通过 user 属性获取当前用户信息：

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

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

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

获取授权令牌

注入 AdalService 并通过 acquireToken 方法获取授权令牌：

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

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

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

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

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

结论

通过 wfw-ngx-adal-observable，我们可以方便地集成 Azure AD 并管理身份验证和授权。它提供了易于使用的接口，支持被观察的模式，让授权令牌的获取变得更为简单。

希望这篇文章对你在实际开发中有所帮助！

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

阅读全文

猜你喜欢

  • npm 包 t-notify 使用教程

    简介 t-notify 是一个基于 WebNotification API 封装的 npm 包，提供了简单易用的方式来创建浏览器端的通知。本文将介绍 t-notify 的使用教程，包括如何安装和使用。

    3 年前
  • npm 包 t-property 使用教程

    在前端开发的过程中，我们常常需要操作属性（property），例如获取、设置、删除等等。T-Property 就是一个非常有用的 npm 包，它提供了一种更加简便易用的方式来操作属性。

    3 年前
  • npm 包 ngx-library-k2018 使用教程

    介绍 ngx-library-k2018 是一款基于 Angular 的前端 UI 组件库，提供了丰富的 UI 组件，以及配套的样式文件及文档。它可以帮助前端开发人员快速构建美观、高效的网页和应用程序...

    3 年前
  • npm 包 nodegit-lfs 使用教程

    简介 在前端开发中，版本控制是一个非常重要的环节。而 Git 则是广为使用的版本控制系统之一。随着项目规模的增大，代码库也会随之变得庞大。此时，对于大文件的管理便成了一个问题。

    3 年前
  • npm 包 t-log-client 使用教程

    在前端开发中，日志记录是一项非常重要的任务。它可以帮助我们及时了解应用程序中发生的问题，进而快速定位和修复错误。在这个过程中，t-log-client 是一款非常有用的 npm 包，它可以方便地记录前...

    3 年前
  • npm 包 @nju33/clify 使用教程

    随着前端项目的逐渐复杂化，我们需要更多的工具来帮助我们简化开发流程。其中，命令行工具是不可或缺的一部分。@nju33/clify 就是其中的一款优秀的命令行工具。 什么是 @nju33/clify @...

    3 年前
  • npm 包 @jay./react-gsap-enhancer 使用教程

    前言： 本文主要介绍 @jay./react-gsap-enhancer JavaScript 库的使用教程和相关注意点，可用于 React/Gatsby 的动画制作。

    3 年前
  • npm 包 divide-rec 使用教程

    简介 divide-rec 是一个用于实现整数的递归短除法的 npm 包。它可以将一个整数通过整除和取余的操作，分裂成多个数。 安装 要使用 divide-rec 包，你需要先安装 Node.js 运...

    3 年前
  • npm 包 wikiquote-api 使用教程

    简介 wikiquote-api 是一款基于 Node.js 开发的 npm 包，可以用来在终端中获取 Wikiquote 上的名言警句。Wikiquote 是一个允许用户自由编辑文本的在线协作计划，...

    3 年前
  • npm包yeedriver-corxdriver使用教程

    介绍 yeedriver-corxdriver是一款被广泛使用的JavaScript包，它提供了一种简单、快捷的方式来实现在Windows上运行Selenium测试用例。

    3 年前
  • npm 包 util-i 使用教程

    简介 如果你是一位前端开发者，那么你一定会用到 Node.js 的 util 模块来协助开发。然而，util 模块的文档过于简洁，不易理解，而 util-i 就是一个专门为开发者量身定制的 npm 包...

    3 年前
  • npm 包 gulp-resolve-url 使用教程

    随着前端开发技术的不断发展，工具库的使用也变得越来越广泛。其中，npm 是前端工具库中最流行的一种包管理工具。在这里，我们将介绍一款名为 gulp-resolve-url 的 npm 包的使用方法。

    3 年前
  • npm 包 mdb-parse 使用教程

    简介 mdb-parse 是一个用于解析 Microsoft Access 数据库（.mdb 文件）的 npm 包。该工具使用 JavaScript 代码编写，可以在前端应用中进行数据处理。

    3 年前
  • npm 包 @dudes/lumly.uml.viewer 使用教程

    前言 在前端开发中，我们常常需要用到绘制类 UML 图表的工具。而 @dudes/lumly.uml.viewer 则是一款优秀的 npm 工具库，它能够快速地帮助我们绘制 UML 图表。

    3 年前
  • npm 包 express-deeptrace 使用教程

    前言 在前端开发中，我们常常需要对接后端服务器，而 Node.js 的出现使得前后端都可以用 JavaScript 进行编程，让前端开发更加贴近服务器端后台的开发细节。

    3 年前
  • npm 包 pagerouterjs 使用教程

    前言 在前端开发中，路由是一个非常重要的概念。它可以帮助我们实现页面间的跳转及切换，还能维持应用的状态。本文介绍使用 npm 包 pagerouterjs 来实现路由功能。

    3 年前
  • npm 包 react-overdrive-motion 使用教程

    在前端开发中，我们经常需要用到动画来增强用户体验。而在 React 中，有一个非常好用的动画库叫做 react-overdrive-motion。它不仅可以方便地实现常规的动画效果，还可以实现一些比较...

    3 年前
  • npm 包 claudiajs-dynamodb 使用教程

    前言 在 Web 开发中，前后端分离已经成为主流，前端负责交互与页面展示，而后端则负责业务逻辑和数据处理。然而，在实际开发中经常需要使用服务器端的资源，例如数据库等。

    3 年前
  • npm 包 stitching-react 使用教程

    介绍 npm 包 stitching-react 是一个用于前端 React 应用的轻量级组件库，其能够帮助开发者快速构建出具有高度可复用性和易用性的组件。stitching-react 已经被广泛使...

    3 年前
  • npm 包 react-overdrive-me 使用教程

    近年来，前端应用程序的数量和复杂性迅速增长。因此，我们需要一些工具来简化并减轻负担。NPM 是一种流行的 JavaScript 包管理器，而 react-overdrive-me 是一个基于 Reac...

    3 年前

相关推荐

    暂无文章