前言
ng2-adal-ccs 是一个 npm 包，用于在 Angular 应用程序中集成 Azure AD。通过使用该包，开发人员可以实现 Azure AD 的身份验证和授权，确保应用程序的安全性和可靠性。本文将介绍如何使用 ng2-adal-ccs 包在 Angular 应用程序中实现 Azure AD 集成。
准备工作
在开始之前，需要先完成以下准备工作：
- 一台安装有 Node.js 的开发机器。
- Angular CLI 工具。
- 一个 Azure AD 租户和应用程序。
- ng2-adal-ccs 包。
安装 Angular CLI
Angular CLI 可以通过 npm 包管理器来安装，执行以下命令：
npm install -g @angular/cli
创建 Angular 应用程序
使用 Angular CLI 工具创建一个新的应用程序。执行以下命令：
ng new azure-ad-app
安装 ng2-adal-ccs 包
使用以下命令安装 ng2-adal-ccs 包：
npm install ng2-adal-ccs --save
集成 Azure AD
在开始之前，请确保已经成功创建了 Azure AD 租户和应用程序，并且已经获取到了应用程序的客户端 ID 和秘钥。
配置 Azure AD 应用程序
在 Azure 门户中配置应用程序。
- 在“Azure Active Directory”中，选择“应用注册”。
- 单击“新注册”，输入应用程序的名称，选择“账户类型”，然后单击“注册”。
- 在“快速入门”页面上，复制“应用程序(客户端) ID”并保存，它是应用程序集成 Azure AD 所需的唯一标识符。
- 在“管理” > “证书和密码”中创建应用程序密码，并将其保存在安全位置，在代码中需要使用它来获取访问令牌。
- 打开“API 权限”菜单，单击“添加权限”，选择“Microsoft Graph”，单击“应用程序权限”，选择“Directory.Read.All”和“User.Read”，单击“添加权限”。
- 单击“API 权限”下的“授权”菜单，点击“Default Directory”并选择“Directory.Read.All”，单击“授权”。
之后，你需要记录下你的目录 ID，它在 Azure Active Directory 中列出。
配置 Angular 应用程序
添加配置文件
在项目的 assets 文件夹中创建一个名为“config.json”的文件，该文件将保存与应用程序集成有关的配置信息。编辑 config.json 文件，添加以下内容：
-- -------------------- ---- -------
-
----------- -----------------
----------- -----------------
-------------- -------------------------
------------------------ -------------------------
------------ -
-------------- ------------------------------
------------ --
-
-导入和配置 ng2-adal-ccs
在 app.module.ts 文件中导入和配置 ng2-adal-ccs 包：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- ---------------
------ - ------ - ---- -----------
-----------
------------- ---------------
-------- ----------------
---------- -
-
-------- -------------
--------- -
--------- ----------------
------- ----------------
------------ -----------------------
---------------------- -----------------------
--
--
------------
--
---------- ---------------
--
------ ----- --------- --添加拦截器，并设置请求头
创建一个名为 auth.interceptor.ts 的文件，该文件用于拦截所有发出的请求并将 access token 放入请求头中。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------
------------
----------------
------------
- ---- -----------------------
------ - ---------- - ---- -------
------ - ----------- - ---- ---------------
-------------
------ ----- --------------- ---------- --------------- -
------------------- ------------ ------------ --
----------
---- -----------------
----- -----------
-- -------------------------- -
----- ------- - -----------
-------- ----------------
----------------
------- - - --------------------------------
-------------------------------------
-
--
---
------ ---------------------
-
-在 app.module.ts 文件中导入 AuthInterceptor 文件，添加拦截器：
-- -------------------- ---- -------
------ - ------------------ ---------------- - ---- -----------------------
------ - --------------- - ---- ---------------------
-----------
------------- ---------------
-------- --------------- ------------------
---------- -
----
-
-------- ------------------
--------- ----------------
------ -----
--
--
---------- ---------------
--
------ ----- --------- --调用 Microsoft Graph 测试
使用 HttpClient 发送请求到 Microsoft Graph 测试接口，并验证是否成功拿到数据。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
-----------------
------ ----- ------------ -
----- - ---------------
------------------- ----- ----------- -
---------
-------------------------------------------
----------------- -- ------------------ --- --------- -- -------
-
-结语
Angular 应用程序集成 Azure AD 可以为应用程序添加一层安全保障，然而 ng2-adal-ccs 包只是其中的一种解决方案，阅读本文后，请自行选择适合自己的方案。
完整代码请查看 https://github.com/YourName/azure-ad-integration。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668481e8991b448e2b16