如何为我的 React/.NET Core 3.0 SPA web 应用程序添加 Microsoft Identity/Azure AD 登录功能

Question

我正在开发一个 web 应用程序，其前端为 ReactJS ，后端为 .NET Core 3.0。 为了创建它，我几乎遵循了这个教程： https://learn.microsoft.com/en-us/as.net/core/security/authentication/identity-api-authorization?view=as.netcore-3.0 。

目前我将用户存储在 Azure 云中托管的数据库中。 在 Startup class 后端代码的 ConfigureServices() 方法中，我像这样连接到我的数据库：

services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

现在，管理层希望进行更改，以便用户不存储在我们自己的数据库中，而是存储在 Microsoft Identity（以前称为 Azure Active Directory (Azure AD)）中。 这是因为许多公司已经在那里拥有用户帐户，他们不必创建新用户。

有人能告诉我如何从现在的位置过渡到那个目的地吗？ 我看到一些教程，其中我从头开始创建了一个 web 应用程序，但我觉得我可以只更改几行我已经拥有的代码并进行此更改。 任何人？

Answer 1

我不确定您是否只需要更改几行代码，但根据您的要求，您正在寻找一种方法将 Azure AD 身份验证集成到您的 ReactJS 应用程序中，以调用受 Azure 保护的后端 API 应用程序广告。

有两个步骤：

1.使用 azure 广告保护您的 webapi（服务器）。 这个步骤可以参考（TodoListService）。

2.从您的反应应用程序（客户端）获取访问令牌，然后使用令牌访问webapi。 您需要注册客户端 Azure AD 应用程序并添加访问 webapi 应用程序的权限。 请参阅此步骤(TodoListClient)。

没有现成的代码示例供您直接使用。 但您可以参考本教程和源代码，了解如何使用 MSAL 和 React 调用 Microsoft Graph。

您唯一需要修改的是调用您自己的 API 而不是在此处调用 Microsoft Graph。