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

Question

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

• 根配置
• 导航栏 (React)
• 两个应用程序（两个 React）
• 样式指南模块
• 一个 API 模块，用于处理与一组 API 的通信

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

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

提前致谢。

Answer 1

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

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

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

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

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

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

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