使用 Nest Js 和 React 进行 Azure AD 身份验证（第一部分）

这是使用 Azure AD 创建具有身份验证的应用程序的简要说明。我在后端使用了 Nest Js 和 Postgres，在前端使用了 React 应用程序。

Azure AD authentication using Nest Js and React

在开始解释之前，我建议大家先了解一下 Azure（Microsoft Identity Platform）、Nest JS 和 React 框架的基本概念。所以让我们开始吧伙计们。

在 Azure AD 中创建自己的目录

在本教程中，我们将使用免费许可证！所以大家可以注册门户网站.azure.com .

在 Azure 上，转到创建资源刀片并寻找 Azure 活动目录 ，在那里你将能够创建目录 .使用您喜欢的任何值填写表单，对于此示例，我创建了应用程序名称 饥饿的头脑 .

Creating a tenant

在此之后，您可以简单地创建一个新的应用程序注册，您可以简单地给出应用程序的名称。

Registration of the application

注册后，您将获得应用程序 ID 和租户 ID，它们将在我们的应用程序中用于与前端和后端的 Azure 广告进行通信。

这就是 Azure AD 应用程序设置的全部内容。现在我们将跳转到前端（React 应用程序）进行身份验证。

在 React 中使用 Azure AD 进行身份验证

首先，让我们使用模板 typescript 创建 react 应用程序：

 npx create-react-app 饥饿的头脑——模板打字稿

运行上述命令后，您的新应用程序将被有效地创建，无需启用特殊设置或下载包。所有本来应该是的文件 .js 文件现在 .ts 或者 .tsx .

之后，您可以使用以下命令简单地添加 MSAL 库。

 npm install @azure/msal-react @azure/msal-browser

仅供参考：用于 JavaScript 的 MSAL 库使客户端 JavaScript 应用程序能够使用 Azure AD 工作和学校帐户 (AAD)、Microsoft 个人帐户 (MSA) 和社交身份提供程序对用户进行身份验证

为了使用 MSAL，您需要实例化一个 公共客户端应用程序 目的。为此，我们现在需要客户端 ID 和租户 ID。让我们创建一个包含所需值的 env 文件。

client id and authority URL for MSAL

现在使用该变量，我们可以为 Azure AD 创建配置文件。默认情况下，MSAL 配置为 常见的 租户，用于多租户应用程序和允许个人帐户的应用程序（不是 B2C）。

configuration file

那么，上面的代码是怎么回事呢？让我们分解一下。

i) 我们正在使用 MSAL 浏览器中的配置 ( @azure/msal-react 是一个包装器 @azure/msal 浏览器 ）。它具有一些配置属性，例如授权 , 缓存 .

ii) 在 auth 中，我们需要配置什么是客户端 ID（我们从在 Azure 中注册的应用程序中获得）。如果您的应用程序使用单独的符合 OIDC 的授权，例如 “https://login.live.com” 或 IdentityServer，您需要在 已知权威 字段并设置您的 协议模式 至 “OIDC”。

此外，您可以配置重定向 URL 并发布注销重定向 URL。但请记住，它必须与您在 Azure AD 中的应用程序中保存的内容相匹配。

身份验证设置步骤：

在 Microsoft Azure 上，导航到 Azure Active Directory > 应用注册。
导航到您的应用程序。
在管理区域中，单击身份验证。
在重定向 URI 部分的类型中，选择 Web。
在重定向 URI 中，输入您从 Keycloak 复制的重定向 URI。
单击保存。

iii) 同样，我们可以配置缓存并在 cookie 中标记状态。

iv) 您还可以配置登录请求和图形配置，如图所示。更详细的可以参考这个关联 .

获取访问令牌

MSAL 使用缓存根据特定参数存储令牌，包括范围、资源和权限，并在需要时从缓存中检索令牌。它还可以在这些令牌过期时执行这些令牌的静默更新。 MSAL 通过 获取令牌沉默 方法。

最好的做法是尝试 获取令牌沉默 如果您已经登录，请在使用交互式 API 之前调用。这样可以防止不必要的用户交互。 获取令牌沉默 将在缓存中查找有效令牌，如果它即将过期或不存在，将自动尝试为您刷新它。你应该使用一个 登录XXXXXX 或者 获取令牌XXXXX （交互式）API 在此之前与服务器建立会话。

如果要重定向或想要弹出屏幕，您可以选择方法。