前言
ng2-adal-popup-fork 是一个基于 ng2-adal 和 AdalJS 的 Angular2 封装库，用于管理 Microsoft Azure Active Directory (AD) 认证和授权。它可以帮助开发者轻松地处理认证和授权流程，并提供了一个在弹出窗口中进行登录和注销的界面。在本文中，我们将介绍如何使用 ng2-adal-popup-fork 来实现 Azure AD 认证和授权。
安装
在使用 ng2-adal-popup-fork 之前，我们需要先安装它。我们可以使用 npm 来完成安装，可以使用以下命令：
npm install ng2-adal-popup-fork --save
引入
完成安装后，我们需要在我们的 Angular2 应用程序中引入它。我们可以添加以下代码到 app.module.ts 文件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- ----------------------
-----------
-------- -
-- ---
--
---------- --------------
------------- -
-- ---
--
---------- -----
--
------ ----- --------- - -配置
接下来，我们需要配置我们的 Azure AD。我们需要提供一些必需的信息，如租户 ID、应用程序 ID、重定向 URL 等。我们可以创建一个配置文件，在其中添加以下代码：
export const adalConfig = {
tenant: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
clientId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
redirectUri: window.location.origin,
postLogoutRedirectUri: window.location.origin,
cacheLocation: 'localStorage'
};我们需要替换 tenant 和 clientId 为我们的 Azure AD 中的租户 ID 和应用程序 ID。
现在，我们将使用这个配置来初始化 ng2-adal-popup-fork。我们可以使用以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ----------------------
------ - ---------- - ---- ---------------- -- ---------
------------
--------- ------
--------- - ------------------------------- -
--
------ ----- ------------ -
------------------- ------------ ------------ -
----------------------------------
-
-认证和授权
现在，我们已经成功地引入和配置了 ng2-adal-popup-fork。接下来，我们可以使用它来实现 Azure AD 认证和授权。我们可以使用以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ----------------------
------------
-- ---
--
------ ----- -------------- -
------------------- ------------ ------------ - -
------- -
-------------------------
-
-------- -
--------------------------
-
---------- -
-------------------------------------------------------------------------- -- -
-------------------
---
-
-我们可以在 login 方法中调用 adalService.login() 来打开一个弹出窗口进行登录。同样，我们可以在 logout 方法中调用 adalService.logOut() 来进行注销。
要获得令牌，我们可以使用 acquireToken 方法。在这个例子中，我们将获得一个名为 http://webapi.contoso.com 的 Web API 的访问令牌。
示例代码
最后，这里是一个完整的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ----------------------
------ - ---------- - ---- ----------------
------------
--------- ------
--------- -
------ ----- -------
------- ----------------- -------------------------- -----------
------- ------------------ ------------------------- ------------
------- -------------------- ------------------------- --------------
-
--
------ ----- ------------ -
----- - ------ -- -------------- ---- ---------------------
------------- - ------
------------------- ------------ ------------ -
----------------------------------
------------------ - ----------------------------------------
-
------- -
-------------------------
-
-------- -
--------------------------
-
---------- -
-------------------------------------------------------------------------- -- -
-------------------
---
-
-结论
在本文中，我们介绍了如何使用 ng2-adal-popup-fork 来实现 Azure AD 认证和授权。我们不仅介绍了如何安装和引入它，还介绍了如何配置 Azure AD 和如何处理认证和授权流程。最后，我们提供了一个完整的示例代码。通过这篇文章，我们希望您了解如何使用 ng2-adal-popup-fork 来简化 Azure AD 的身份验证与授权。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005566981e8991b448d33d7