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

问题描述

我正在开发一个带有ReactJS前端和.NET Core 3.0后端的Web应用程序。要创建它，我几乎遵循了本教程：https://docs.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应用程序，但是我觉得我可以只更改几行代码，然后进行更改。有人吗？

解决方法

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

有两个步骤：

1。使用天蓝色广告保护您的webapi（服务器）。您可以参考此step（TodoListService）。

2。从react应用（客户端）获取访问令牌，然后使用该令牌访问webapi。您需要注册客户端Azure AD应用，并添加访问webapi应用的权限。参见此step（TodoListClient）。

没有直接使用的现成代码示例。但是您可以参考此tutorial和source code来了解如何将MSAL与React结合使用来调用Microsoft Graph。

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