Identity Server 4 + Identity Framework + React 前端

IT技术 javascript reactjs asp.net-core asp.net-identity identityserver4
2021-05-02 16:08:52

我正在寻找有关如何将这样的环境正确组合在一起的建议。快速入门中包含大量信息和大量材料,但经过 3 天的反复试验,我仍然感到相当迷茫。我熟悉 .NET Framework 中的 Identity Framework,但在此之前从未使用过 Identity Server。

我们有一个基于 Node 和 MySql 的微服务设置……Docker 容器中的一系列服务,它们与 MySql 集群中的它们自己的 db 节点通信。我们在 React 和 Redux 中构建了一个单一的管理 UI——它将从 AWS 存储桶中运行。

我的任务是使用 Identity Server 验证这个 React 前端。我们不会使用它对 API 进行身份验证。我建议使用 Identity Framework 在 .NET Core 中构建身份验证 UI,因为它为我们提供了“开箱即用”所需的一切。

最终,这两个身份应用程序将成为我们针对这些 API 编写的所有应用程序的 SSO,甚至那些不是的应用程序。此外,我需要在某个时候加入 AD,以允许公司内部用户通过而无需手动进行身份验证。

(我认为)我们需要的是以下内容:

  • Identity Server 4 在自己的容器中运行
  • 在自己的容器中运行的 Core Identity MVC 应用程序
  • 前端使用oidc-client进行认证

到目前为止,我所做的是遵循以下两个教程:

http://docs.identityserver.io/en/release/quickstarts/6_aspnet_identity.html#new-project-for-asp-net-identity

http://docs.identityserver.io/en/dev/quickstarts/7_javascript_client.html

我的结果是一个正在运行的 Identity Server 和 Identity Core MVC 应用程序在同一个项目(两个不同的端口)中一起运行。在遵循 JS 客户端教程之后,我运行了他们的示例代码 - 它将我重定向到 MVC 登录,它根据 Identity 进行身份验证服务器,然后返回此结果:

{
  "sid": "8e60eb65960d967834cb3eb4fdcbbd49",
  "sub": "dfc90bd1-cad4-45d0-84bd-174e8a6ca891",
  "auth_time": 1516296631,
  "idp": "local",
  "amr": [
    "pwd"
  ],
  "preferred_username": "me@gmail.com",
  "name": "me@gmail.com"
}

单击注销失败,但这是因为第一个教程中的控制器示例不包含用于注销的 GET,就像 JavaScriptClient 示例中隐藏的示例控制器一样。

感觉就像我到达了某个地方,但与此同时,我现在完全意识到我知道的很少。可以使用建议,甚至只是指向正确快速入门的指针来实现我正在寻找的东西。

1个回答

基本设置 根据我读到的理想情况,您想要做的是将其分解为 3 个组件

  • 身份管理组件
  • API 组件
  • MVC/MVVM 组件

对于身份管理组件,请使用此快速入门作为示例ASPNetIdentity + IS4 EF此不带 EF 组件的示例

您的 API 应该仅授权(而非身份验证)所有发生在 ID4 服务器上的身份验证和注册。

您的前端(MVVM 或 MVC 客户端)应该按照教程在 ID4 服务器上注册所有的花里胡哨:

这应该使您能够拥有一个安全的 API(一个或多个),单一的 IdentityManagement 源(基本上在其上构建成为一个真正的 SSO/联合网关),同时分离您的应用程序的前端。

希望这可以帮助。

附加信息:

除了答案之外,您还可以为 OIDC 客户端使用(或自己构建)一些库以进行react,您可以将这些库放入前端以帮助您更快地获得一些结果。

仅供参考,我将 angular + id4 与 AspCoreIdentity + AspCore API 一起使用。我需要做的就是在 javascript 客户端和 ID4 之间创建链接(根据教程和 ID4 和 Web API。我们使用 oidc-connect 的行业库在 angular 中放入 ID4 服务器和 Web API 的设置。

这样做的好处是,一旦您在 ID4 上进行了基本设置,就不需要在其上构建更多高级功能。

请记住,这些是单独的组件,并完全按照此方式对待它们。帮助我解决了困惑和知识的缺乏。

Windows 和 AD 登录(未来状态):

将这些组件分开,将使您能够更轻松、更快速地将 AD 集成到 ID4 服务器中,而无需修改 API 或前端应用程序。此处利用 Windows 登录的示例