将 Windows 身份验证添加到 React + ASP.Net 应用-解网

问：

嘿，伙计们，我只是想知道是否有人知道如何将用户身份验证添加到 react 应用程序？我在网上看到的所有资源要么已经过时，要么根本不起作用（至少在我迄今为止的研究中是这样）。我最接近它的工作是后端能够识别当前登录的用户。但是，我的 react 应用程序对后端进行的所有 API 调用都因未经授权而最终失败。任何帮助将不胜感激。

我尝试将iisSettings设置为进行Windows身份验证。在程序 .cs 文件中启用 CORS，并向提取请求添加模式、标头和凭据。

reactjs asp.net-core windows 身份验证

请注意，如果服务器未配置为允许匿名访问，则 CORS 必须在 Windows 身份验证之前运行。在本地，出于开发和测试目的，可以尝试启用匿名身份验证以允许匿名访问。在 IIS 端，需要为应用安装和配置 IIS CORS 模块。欲了解更多信息，请查看 learn.microsoft.com/en-us/aspnet/core/security/...

答：

1赞 Wise Chimpanzee 9/28/2023 #1

以下是实现此目的的步骤：

后端配置（ASP.NET）：

启用 Windows 身份验证：
- 在 Visual Studio 中打开 ASP.NET 项目。
- 在项目属性中，转到“调试”选项卡。
- 确保选中“启用 Windows 身份验证”选项。

设置 CORS（跨域资源共享）：

在 ASP.NET 项目中，打开该文件。Startup.cs
在该方法中，配置 CORS 以允许来自 React 前端的请求。您可以使用该方法执行此操作。ConfigureServicesAddCors

services.AddCors(options =>
{
    options.AddPolicy("ReactCorsPolicy",
        builder =>
        {
            builder.WithOrigins("http://localhost:3000") // Replace with your React app's URL
                   .AllowAnyHeader()
                   .AllowAnyMethod()
                   .AllowCredentials();
        });
});

在该方法中，将 CORS 中间件添加到您的应用程序：Configure

app.UseCors("ReactCorsPolicy");

授权 API 端点：
- 在控制器中，在需要身份验证的终结点或控制器上使用该属性。[Authorize]
用户信息检索：
- 若要检索用户信息，可以在控制器中访问该属性。这将允许您访问经过身份验证的用户的身份。HttpContext.User

前端配置（React）：

获取 API 请求：

从 React 应用向 ASP.NET 后端发出 API 请求时，请确保在请求中包含该选项。这允许 Cookie（用于 Windows 身份验证）与请求一起发送。credentials: 'include'fetch

fetch('https://your-api-endpoint.com/api/resource', {
    method: 'GET',
    credentials: 'include', // Include credentials (cookies)
})
.then(response => {
    // Handle the response
})
.catch(error => {
    // Handle errors
});

用于身份验证状态的 React 组件：
- 创建一个显示身份验证状态的 React 组件。您可以使用从后端收到的用户信息，根据用户的身份验证状态自定义 UI。

完成这些配置后，React 应用应该能够使用 Windows 身份验证对 ASP.NET 后端进行经过身份验证的 API 调用。确保您的 React 应用与 ASP.NET 应用在同一域上运行，或针对跨域请求相应地配置 CORS。

上一个：Microsoft Authenticator 不断向自身请求代码

下一个：具有 Windows 身份验证和用户名转发的 IIS 反向代理

将 Windows 身份验证添加到 React + ASP.Net 应用

Adding Windows Authentication to a React + ASP.Net App

评论