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

Question

我正在开发一个带有 ReactJS 前端和 .NET Core 3.0 后端的 Web 应用程序。为了创建它，我几乎遵循了本教程:https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.0 .

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

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

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

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

Answer 1

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

有两个步骤:

1.使用 azure 广告保护您的 webapi(服务器)。可以引用这个step (TodoListService)。

2.从你的react应用程序(客户端)获取访问 token ，然后使用该 token 访问webapi。您需要注册客户端 Azure AD 应用程序并添加访问 webapi 应用程序的权限。看这个step (TodoListClient)。

没有现成的代码示例可供您直接使用。不过你可以引用这个tutorial和 source code了解如何将 MSAL 与 React 结合使用来调用 Microsoft Graph。

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