ADAL(Azure Active Directory Authentication Library) Angular是一个为AngularJS应用程序提供Azure Active Directory(AAD)验证功能的Javascript库。@types/adal-angular是一个npm包，它是ADAL Angular的TypeScript类型限定符。在本教程中，我们将深入研究如何使用@types/adal-angular实现AAD验证。
安装和设置
为了使用@types/adal-angular，我们需要满足以下要求：
- Node.js
- TypeScript
安装完成后，我们可以使用以下命令安装@types/adal-angular：
npm install @types/adal-angular --save-dev
在开始使用@types/adal-angular之前，我们需要在Angular应用程序中设置AAD。为此，我们需要配置一个OAuth2客户端，并且我们需要在Azure门户中注册一个应用程序。接下来，我们需要收集以下详细信息：
- 租户ID
- 客户端ID
- redirectUri
- 应用程序ID URI
我们需要把这些详细信息存储在Azure门户中，并将其用作我们的OAuth2客户端凭据。
另外，我们还需要使用Angular配置$httpProvider和$locationProvider：
-- -------------------- ---- -------
----------------------- ----------- ---------------
-------------------------- ---------------- ------------------------------------ -------------------- ------------------------ ------------------------ -------------- -----------------
---------------------------------- ---- ------------------ --------------------- -
--------------
-------------- -
------------ ------------
----------- -----------------
--------------- ---- ----- ---- -------- -- --- ---- -- ----- --- ---- -- ------------
--
--------------- -
------------ -------------
----------- -----------------
--
------------ ----------- ------- ---
----------------------------------------
------- ------ ------ --- ---- --------------------------
--------- ------ ------ -----
------------ ---------------------- - ----
------------ ------------- -- --- -- ---- ------- ------
------ ----
-- -------------- -------------------
----以上是Angular的配置代码，接下来我们将使用@types/adal-angular完成我们的AAD验证。
开始使用@types/adal-angular
为了使用@types/adal-angular，在我们的Angular应用程序中，我们需要引入Adal和AdalAngular作为缩写，我们需要在TypeScript中导入这两个包的声明。
import { AdalAngular } from '@types/adal-angular';
import * as Adal from 'adal-angular';当我们完成导入时，我们需要在Angular应用程序中初始化针对API的请求，我们可以通过以下方式实现：
-- -------------------- ---- -------
-----------------------
--------------------------- ---------- -------- ----------------------------
---------------- ---------- ------ ---------------- -------------------------- ------------ -
---------------------- -
------------------ ------------------------------------------
--
----------------------- ---- ------- ------- -
------------- - -------
----------- - -----
--
---------------------- ------- ------- ------- -
------------- - -------
----------- - ----- -- -------- --------
---
----接下来，我们需要管理用户的登录和注销状态。我们可以使用以下代码实现：
module.login = function() {
adalAuthenticationService.login();
};
module.logout = function() {
adalAuthenticationService.logOut();
};以上代码将登出用户。
最后，我们还需要管理用户的查询字符串，并确保它们正确地传递给我们的应用程序。我们可以使用以下函数来解析查询字符串：
-- -------------------- ---- -------
--- ---------------- - ------------- ------- -
--- ------ - --- ----------- - -----------------
----- - -------------------- --
----- -- - ------------------------ -
-------------------------------- - -------------------------
-
------ -------
--结论
在本教程中，我们已经学习了如何使用@types/adal-angular来实现Azure Active Directory验证。我们已经学习了使用Angular在Azure门户中配置OAuth2客户端，并使用@types/adal-angular实现了我们的AAD验证。此外，我们还深入研究了如何处理用户登录和注销状态以及查询字符串。现在你可以开始使用@types/adal-angular，实现你的Azure Active Directory验证。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/types-adal-presents