是否可以使用 IDP 独立代码在 ReactJS 中实现 open id connect SSO？

Posted 2023-03-27

【中文标题】是否可以使用 IDP 独立代码在 ReactJS 中实现 open id connect SSO？

【英文标题】：Is it possible to implement open id connect SSO in ReactJS with IDP independent code?

【发布时间】：2021-11-26 12:55:59

【问题描述】：

我在 Open id connect 中创建了一个 SSO，使用 Okta 作为 ReactJS 和 .NET 5 应用程序中的主要身份提供者。问题是，对于使用 Azure Active Directory 等其他身份提供程序，应该通过在 Okta 门户中进行配置来完成。我想以这样一种方式实现它，即应用程序可以连接到任何身份提供者，而不会被束缚到一个特定的身份提供者。这可能吗？如果可能，请告诉我应该如何进行？非常感谢任何帮助。

请注意，我不希望同时连接到不同的身份提供者。

【参考方案1】：

标准模式是使用授权服务器（在您的情况下为 Okta），然后确保您的应用使用基于标准的 OpenID Connect 消息连接到它。然后，AS 会为您管理与其他提供商的连接，例如：

Azure AD 社交登录 SAML 系统

您的应用只能使用来自 AS 的令牌，并且您可以完全控制 API 中的声明和 UI 客户端中的会话行为。

您的应用程序保持简单，您只需配置 AS 即可更改身份验证的工作方式，代码更改为零。

您还应该将代码保留在您的应用程序标准中，这样您就可以在需要时切换 AS。我倾向于通过使用开源库而不是供应商特定库来做到这一点。

图书馆

几年前，oidc-client 是 SPA 的首选开源库：

SPA with Okta SPA with Azure AD

最近，浏览器限制意味着有趋势向Back end for front end 方向发展。如果您正在构建新的东西，我建议您使用它。不幸的是，SPA 安全性很难：

React SPA with Token Handler

【讨论】：

您能告诉我您使用哪些开源库吗？

在上面添加了一些信息

感谢您的编辑。我对如何在 .网络核心 API。

【参考方案2】：

执行此操作的正确方法是联合您希望允许的身份提供者，以便从单一事实来源管理您的用户、范围、声明等 - 我'下面会解释很多。

这意味着选择一个身份提供者作为事实来源（在本例中为 Okta）并将辅助身份提供者连接到您的事实来源 IdP（将 Azure AD 连接到 Okta 作为联合身份提供者）。

详细来说，您需要单一事实来源的原因是因为每个生成并发送到 ReactJS 应用程序的令牌都需要由应用程序验证，以确保令牌来自应用信任的授权服务器。

在非常精细的级别上，您的 ReactJS 应用收到的每个 OIDC id_token 和 access_token 都有一个 iss（发布者）声明。令牌还使用非对称加密进行签名，这允许使用公钥验证令牌有效负载。这可以让您的 ReactJS 应用 OIDC 库验证令牌信息是否来自受信任的来源 - 您已明确配置的来源。

使用多个主要身份提供者意味着应用程序需要配置为信任多个 iss 值并从多个 jwks 端点获取公钥，这不是内置的功能OIDC 客户端库实现。

OIDC 库假定您的令牌来自单一来源，并且 iss 和 aud 声明以及 IdP 的 jwks 端点（用于获取公钥以验证令牌签名）对于所有用户都将保持一致身份验证。

来自 auth0 的示例 id_token 有效负载：

  "iss": "http://my-domain.auth0.com",
  "sub": "auth0|123456",
  "aud": "my_client_id",
  "exp": 1311281970,
  "iat": 1311280970,
  "name": "Jane Doe",
  "given_name": "Jane",
  "family_name": "Doe",
  "gender": "female",
  "birthdate": "0000-10-31",
  "email": "[e-mail]",
  "picture": "http://example.com/janedoe/me.jpg"

您可以在此端点看到可用于验证身份验证服务器从 my-domain.auth0.com 发出的令牌的公钥： https://my-domain.auth0.com/.well-known/jwks.json

【讨论】：

感谢您的回答。它帮助我获得了更多的观点。目前我正在使用 Okta 的 SDK，我无法将我的主要身份提供者或单一事实来源更改为 Okta 以外的另一个身份提供者。我不希望一次运行多个主要身份提供程序。我想要一个可以通过更改配置来切换主要身份提供者的实现。

我尝试将 Google 配置为 Okta SDK 中的主要身份提供者。我还在 Google 允许的主机列表中添加了我的本地主机 URL。但我收到了 CORS 错误。我不确定是我做错了什么还是 Okta 不允许任何其他身份提供商。您知道 Okta 是否允许其他身份提供商充当主要提供商吗？我在任何地方都找不到答案。

Okta 允许您添加其他“社交”身份提供者，包括 Google。他们当前有关此社交 IdP 联盟的文档是 here。最终，如果您需要切换主要的事实来源，您将需要使用不同的 OIDC 认证的“依赖方”实现（不是 Okta 的）。 This list 具有经过认证的实现 - 看起来 npm oidc-client library 与供应商无关。

值得一提的是，我为 Okta 工作，但我试图在我的回答中省略 Okta 的自我推销。归根结底，您确实需要选择一个主要 IdP 来为您的应用程序提供令牌。您可以通过主要 IdP 的管理设置添加其他 IdP...这不是 Okta 独有的。即使使用上面链接的oidc-client 库，您也只能为UserManager 配置一个IdP。任何其他 IdP 的联合，例如 Google、Facebook、Microsoft、Apple 等，都应通过 IdP 仪表板中的设置完成，而不是在您的应用中。

好的。我在使用 Okta 时遇到的问题是，为了添加外部身份提供者，我必须在 IdP 仪表板中进行更改。这导致了问题，因为我的客户不想使用仪表板添加另一个 IdP。解决方案是通过更改项目配置来添加 IdP。

【参考方案3】：

我对 ReactJS 应用程序使用 oidc-client 和对 .NET 5 api 使用 IdentityServer4 实现了这一点。如果想了解更多的实现部分，可以查看这篇文章here.

关于将外部身份提供者连接到 IdentityServer4，可以参考这个documentation