React SPA 和 REST 的 PCKE 实现 API

PCKE implementation for React SPA and REST API

我需要实现一个系统,其中前端是一个用 React 制作的纯 SPA(我的意思是它只是作为一堆静态文件托管)和一个用 express 制作的 nodejs REST API。 我不能使用任何第 3 方身份验证提供程序,例如 Auth0 等,所以一切都必须在本地工作。

应用程序必须具有身份验证,并且必须或多或少符合现代标准。我希望使用短期 JWT 身份验证令牌和长期刷新令牌来实现 PKCE 流程。

有一件事我很困惑。 PKCE 流程上的每个指南总是提到在身份验证流程中从一个 URL 重定向到另一个。然而,在我的设置中,重定向是非常不受欢迎的。

我想检查一下是否可以使用纯 XHR 请求实现 PKCE 流程以在 SPA 和 API 之间进行通信。这样做合适吗?与带有重定向的设置相比有哪些主要风险?

编辑:为了使这个问题更具体,如果您只能使用 SPA 和 XHR(并且必须避免重定向),PKCE 身份验证流程应该是什么?

There is one thing I am confused about. Every guide on PKCE flow always mentions redirects from one URL to another during the auth flow. In my setup, however, redirects are highly unwelcome.

OAuth 2.0 的重点是 委托(重定向)到 ID 提供者,这样用户总是将他的密码发送给 ID 提供者,而不是将密码发送到每个应用程序。因此,您将始终需要 重定向 用户登录 - 但希望用户已经登录,以便他立即被重定向回您的应用程序。有一些技术可以检查用户是否 signed-in 使用 XHR,可以​​在他需要登录之前使用。

what should be the PKCE authentication flow if you can only use SPA and XHR (and must avoid redirects)?

授权码流程中,客户端通常会向ID提供者发出两个请求。 授权端点的请求通常是通过重定向完成的(例如,如果用户需要进行身份验证),但第二个请求是令牌端点 通常可以使用 XHR 在后台完成,或者 fetch 使用适当的 CORS 配置。