前言
在现代 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：
npm install --save 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