前言
随着各种 Web 应用的出现，对身份认证和授权的需求也变得越来越重要。Azure Active Directory (Azure AD) 是一种广泛使用的身份认证和授权解决方案。在前端开发中，使用 npm 包 adal-angular-custom 可以快速轻松地实现 Azure AD 的集成。
本篇文章将介绍如何使用 npm 包 adal-angular-custom，在深入学习该包的同时，也将指导您实现 Azure AD 在前端中的应用。
安装
使用 npm 包 adal-angular-custom，需要先安装 npm 和 Node.js。然后，您可以直接在命令行中运行以下命令：
npm install adal-angular-custom --save
该命令会将 npm 包 adal-angular-custom 安装到您的项目中，并将其添加到依赖项中。
使用
配置
在使用 npm 包 adal-angular-custom 前，先进行必要的配置。在 app.js 或 index.js 中，添加以下代码：
-- -------------------- ---- ------- --- ------------ - -------------------------------------- -- ---- ---- ------------------- --------- ------------------------------------- ------- ------ ------------------------- --------- ------ ------ ----- ------ ------ -------------- -------------- -- ---------------
其中，instance 表示 Azure AD 终结点，tenant 表示租户名，clientId 表示应用程序 ID，popUp 表示在新窗口中展示登录页面，cacheLocation 表示 token 的缓存位置。
集成
在需要进行身份认证和授权的页面或模块中，添加以下代码：
-- -------------------- ---- -------
----------------------- ----------------
------------------------- ------------------------------------ -------- --------------- ------------- -
-- - ---- ---- ------------ -------
-------------------
--------- -------------------------------------
------- ------ -------------------------
--------- ------ ------ -----
------ ------
-------------- --------------
-- ---------------
-- -------------
----------------------------- -
------------ ------ ----- ---- ------
----------- -----------------
---
-- -------------------
-------------------------- ----------- -------- ---
----在 controller 中，添加以下代码：
-- -------------------- ---- -------
-----------------------
------------------------------ ---------- ------------ ---------------------------- -------- -------- ---------- ------------ -
------------- - -------- -- -
--------------------
-
-------------- - -------- -- -
---------------------
-
-- --------------------------------------- -
--------------------
-
----在 view 中，添加以下代码：
-- -------------------- ---- -------
---- --------------------------------
---- ----------------------------------
------- ------------------------ -----------
------
---- ---------------------------------
--- -------------------------------------
------- ------------------------- ------------
------
------在以上代码中，signIn 表示登录函数，signOut 表示注销函数，userInfo.isAuthenticated 表示用户是否已经认证，userInfo.profile.name 表示用户名称。通过以上代码，可轻松实现 Azure AD 在前端中的集成。
示例代码
-- -------------------- ---- -------
--- ------------ - --------------------------------------
-- ---- ----
-------------------
--------- -------------------------------------
------- ------ -------------------------
--------- ------ ------ -----
------ ------
-------------- --------------
-- ---------------
----------------------- ----------------
------------------------- ------------------------------------ -------- --------------- ------------- -
-- - ---- ---- ------------ -------
-------------------
--------- -------------------------------------
------- ------ -------------------------
--------- ------ ------ -----
------ ------
-------------- --------------
-- ---------------
-- -------------
----------------------------- -
------------ ------ ----- ---- ------
----------- -----------------
---
-- -------------------
-------------------------- ----------- -------- ---
---
------------------------------ ---------- ------------ ---------------------------- -------- -------- ---------- ------------ -
------------- - -------- -- -
--------------------
-
-------------- - -------- -- -
---------------------
-
-- --------------------------------------- -
--------------------
-
------ -------------------- ---- -------
---- --------------------------------
---- ----------------------------------
------- ------------------------ -----------
------
---- ---------------------------------
--- -------------------------------------
------- ------------------------- ------------
------
------总结
npm 包 adal-angular-custom 是一种快速轻松实现 Azure AD 集成的工具。本文详细介绍了如何使用该工具，并通过示例代码进行了演示。希望本文能对您有所帮助，也希望您在实际开发中能够顺利进行身份认证和授权。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672503660cf7123b362a3