时间戳

首页 > 解决方案 > 使用 OAuth2 和 single-spa 登录/身份验证

reactjs - 使用 OAuth2 和 single-spa 登录/身份验证

问题描述

我已经开始为具有单水疗中心的前端层构建原型。布局与https://github.com/react-microfrontends非常相似，这意味着：

我设法让一个基本原型运行，但我现在需要实现一些基于 OAuth2/OpenID 的身份验证，我不知道从哪里开始。如果未通过身份验证或没有有效的 JWT，我需要将用户重定向到单独的 URL（Auth0 样式），然后每当身份验证令牌过期时，我需要一种令牌刷新机制。除了关于最佳实践、现有示例等的任何一般性建议之外，我还有一些我无法完全解决的具体问题。

  1. 未经身份验证时，如何将用户重定向到不同的 URL？哪个模块/组件应该负责它？
  2. 是否有开箱即用的实现 OAuth2 的库？特别是，我对某种自动令牌刷新感兴趣。
  3. 确保未经身份验证/未经授权的用户无法访问应用程序包的最佳方法是什么？

提前致谢。

标签： reactjsoauth-2.0openid-connectmicro-frontendsingle-spa

解决方案

典型的方法是设置一个 Auth 微前端，它将：

  • 登录时处理凭证检索。无论是通过密码流还是 OAuth（在您的情况下）。由于您使用的是 React，因此您的 OAuth 提供者应该有一个库，您可以在 Auth MFE 中使用它来与之交互。如果是 keycloak，React Keycloak 就很合适。这里没有经验法则。

  • 通过浏览器存储或共享状态将凭据传递给您的两个 React 应用程序（微前端）和 API 模块。这样做，API 模块将在 API 调用中设置凭据。并且两个 react 应用程序会在继续执行其内部逻辑之前检查凭据是否存在。

  • 在到期时刷新凭据或注销用户（取决于您的逻辑）。例如，记录用户意味着从浏览器存储中删除凭据。

  • 登录后重定向到您的反应应用程序之一。这意味着 Auth MFE 路由应始终在根配置中处于活动状态。

我希望它有所帮助。在这里，我总结了流程。

身份验证流单水疗中心

更多内容在我的 github 帐户https://github.com/exaucae/single-spa-patterns/blob/master/AUTHENTICATION.md

推荐阅读