使用 ASP.NET Core 后端和 React 前端的 Web 应用程序中的授权和身份验证？

Posted 2023-03-07

【中文标题】使用 ASP.NET Core 后端和 React 前端的 Web 应用程序中的授权和身份验证？

【英文标题】：Authorization and authentication in web application with ASP.NET Core backend and React frontend?

【发布时间】：2022-01-13 06:34:38

【问题描述】：

我有一个 Web 应用程序，其中前端使用 react.js 和 typescript 构建，后端使用 ASP.NET Core 3.1 构建并连接到 SQL Server。 SQL Server用于保存数据，我可以在前端输入。

现在我想实现一个自定义的身份验证系统，我可以在其中通过授权保护不同的端点。我知道有几种方法可以使用，但我不想使用服务/库，例如用户可以使用他的谷歌帐户登录。

在我看来，Jwt 似乎是一个很好的方式，但我真的不了解整个系统。

这篇文章已经帮助了我很多：Implementing authentication and authorization with React hooks, .NET Core Web API, and SQL Server。读完之后，我不明白登录和我的后端如何知道用户登录（为了保护我的端点）之间的关系。

当然，我已经阅读了很多关于 ASP.NET Core 的身份验证和授权的文章。我读过不同的服务，例如：

Auth0

（似乎不是一个好主意，因为您可以使用 google 等登录）

IdentityUI

（看起来不错，我看过一些 youtube 教程，但它们都使用另一种项目结构，其中前端和后端没有分开。所以他们使用像 Login.cshtml 这样的剃须刀页面，但我不想在后端渲染任何页面，只在前端）

为了在后端对我的控制器进行授权，我计划使用以下内容：

    [Authorize] // to protect endpoint
    [HttpGet]
    public async Task<IEnumerable<>> GetData()
    
        // some code
    

但正如我已经说过的：我不知道/不了解我的后端如何知道用户是否已登录（以及如何检查）。

谁能给我一个合适的教程或文章，在哪里解释，如何管理前端和后端的授权和身份验证？或者也许有人知道，如何将 IdentityUI 与带有 react + typescript 的前端构建和后端一起使用，它不应该呈现任何页面。

感谢您的关注:)

【问题讨论】：

JWT token 是一种用于访问资源或调用服务器提供的api的token。您的服务器需要解码 JWT 令牌并检查此令牌是否包含足够的权限来访问您的 api。令牌是在您的反应程序中生成的，它需要用户身份来生成令牌。基本上，解码令牌后，您可以获得用户信息、权限、令牌过期时间等......

【参考方案1】：

嗯...关于它们如何工作的详细流程，这里是 RFC 6749，这是一个漂亮的 comprehensive 与主题相关的知识集合，最简单的方法通常是 wiki 页面。

但为了简化流程，只需了解以下内容：

什么是 JWT

Jwt 只是一个由一些算法从公钥/私钥对生成的字符串（甚至不关心它是如何工作的，只需给它一个密钥对，每种语言的一些库都会完成剩下的工作）。此 JWT 通常包含指定用户是谁所需的所有信息（大字对吗？但实际上，对于简单的情况，userId 就足够了）。

它包含 3 个不同的部分 Header, Payload and Signature，并且字符串保证它不会被中断（或者只是按照我们的意愿修改它，验证过程会失败）。

更多详情here。

服务器端发生了什么？

最基本的流程是将用户、密码发送到服务器以验证我们是谁以及我们的帐户是否存在。然后，服务器端会从中获取一些必要的信息来生成 JWT 令牌。生成 JWT 令牌的服务器通常参考Identity Provider。

然后该令牌被发送回客户端，客户端将其保存在某个地方以备后用。

客户端使用令牌请求其他资源

通常，Identity Provider 会提供一个 .wellknow 端点，其中包含其他资源收集验证过程所需的所有必要信息。

现在，客户端使用 JWT 令牌向这些资源发送 http 请求。他们使用从.wellknow 端点收集的信息来验证 JWT 是否有效。如果是，我们就是我们声称的那个人，认证过程成功。

结束。

在您的具体情况下过度简化的流程想象

React 客户端 => 请求登录 => 身份提供者 => Jwt 令牌发回 => React 客户端将其保存在某处。

React Client => 使用 JWT 令牌通过 http 请求一些资源 => 资源服务器验证它（通过来自 .wellknow 端点的信息） => 身份验证成功或失败 => 正常过程 => 将响应发送回客户端。

【讨论】：

好的，非常感谢！所以基本上我需要一个库，它会在每次登录后生成一个 JWT 令牌——如果他成功登录，这个令牌将被发送回客户端，并且令牌将保存在前端的配置（例如）中。在此之后，我可以在后端的每个端点检查令牌是否已发送以及 .wellknow 值是否有效。

是的，我认为.Net 世界中Identity provider 的两个流行选择是IdentityServer4 和OpenIdDict（请注意IdentityServer，IdentityServer4 是最后一个开源和免费版本，仅最高兼容 .Net Core 3.1)。