npm 包 omelek-adal-angular 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前置知识

本文假定你已经熟悉以下知识：

Node.js 和 npm 的基本使用
Angular 的基本使用
Azure Active Directory 和 Azure AD Authentication Library (ADAL) 的基本概念及使用方法

什么是 omelek-adal-angular

omelek-adal-angular 是一个 Angular 实现的封装了 ADAL.js 的库，可用于实现 Azure AD 验证。其最大的好处是，可以避免开发人员手动管理和注入 ADAL.js 提供的各种对象及方法，使用起来非常方便。

安装

使用 npm 安装即可：

npm install omelek-adal-angular --save

使用方法

引入 omelek-adal-angular

在 AppModule 中引入 omelek-adal-angular：

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

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

其中：

tenant：Azure AD 租户 ID 或名称
clientId：应用程序注册的客户端 ID
redirectUri：成功登录后 ADAL.js 跳转的 URL
endpoints：提供给 ADAL.js 识别 API 地址的字典
cacheLocation：缓存 token 的位置

使用 AdalGuard

AdalGuard 可以在路由导航前拦截请求，判断用户是否已经登录，并缓存 token。

在 AppRoutingModule 中使用 AdalGuard：

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

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

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

使用 AdalService

AdalService 提供了一些 API，使得在代码中进行 token 的管理或者调用受保护的后端 API 变得更加容易。

例如，在一个组件中调用受保护的后端 API：

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

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

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

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

使用 token

在组件中，您可以通过AdalService获取到当前缓存的 token，并将其作为 Authorization header 发送给具体的后端 API。

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

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

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

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

总结

本文介绍了使用 omelek-adal-angular 库来实现 Azure AD 验证的方法。本库可以让您在 Angular 中更加轻松地管理和调用 Azure AD 相关的 API。使用 omelek-adal-angular 很容易，但前置知识要求稍高，在使用前请确保您已经具备一定的 Node.js、npm、Angular 和 Azure AD/ADAL 等技术基础。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005672681e8991b448e3a27