javascript - Identity Server 4 + Identity Framework + React 前端

Question

我正在寻找有关如何正确组合这样的环境的建议。 Quickstarts 中有大量信息和大量 Material 要涵盖，但经过 3 天的反复试验后，我仍然感到相当迷茫。我熟悉 .NET Framework 中的 Identity Framework，但在此之前从未使用过 Identity Server。

我们有一个基于 Node 和 MySql 构建的微服务设置...Docker 容器中的一系列服务，这些服务与 MySql 集群中它们自己的数据库节点通信。我们有一个内置于 React 和 Redux 中的管理 UI - 它将从 AWS 存储桶运行。

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

最终，这两个 Identity 应用程序将成为我们针对所有针对这些 API 编写的应用程序的 SSO，甚至那些不是这些 API 的应用程序。此外，我需要在某个时候合并 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 Server 进行身份验证，然后返回此结果:

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

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

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

Answer 1

基础设置 根据我理想地阅读的内容，你想要做的是将它分成 3 个部分

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

对于身份管理组件，使用此快速入门作为示例 ASPNetIdentity + IS4 EF或 this one without the EF component .

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

你的前端(MVVM 或 MVC 客户端)应该按照教程注册到 ID4 服务器，所有的花里胡哨的东西:

• MVC
• Javascript

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

希望这对您有所帮助。

附加信息:

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

仅供引用，我将 angular + id4 与 AspCoreIdentity + AspCore API 结合使用。 我需要做的就是创建 javascript 客户端和 ID4 之间的链接(根据教程和 ID4 和 Web API。我们使用 oidc-connect in angular 的行业库来设置 ID4 服务器和 Web API。

这样做的美妙之处在于，一旦您在 ID4 上完成了基本设置，就无需在其上构建更多高级功能。

请记住，这些是独立的组件，并完全按照它们来对待。帮助我克服困惑和知识匮乏。

Windows 和 AD 登录( future 状态):

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