Identity Server 4 + Identity Framework + React前端 [英] Identity Server 4 + Identity Framework + React front-end

问题描述

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

我们在Node上构建了一个微服务设置和MySql ... Docker容器中的一系列服务，它们与MySql集群中自己的数据库节点进行通信。我们在React& amp; Redux - 它将从AWS桶运行。

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

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

我们需要的是（我认为）以下：

• 在自己的容器中运行的Identity Server 4


• 在自己运行的核心身份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 Core MVC应用程序在同一个项目中运行（两个不同的端口。）在遵循JS客户端教程之后，我运行了他们的示例代码 - 它将我重定向到MVC登录，该登录对Identity Server进行身份验证，然后返回此结果：

  {
sid：8e60eb65960d967834cb3eb4fdcbbd49，
sub：dfc90bd1-cad4-45d0 -84bd-174e8a6ca891，
auth_time：1516296631，
idp：local，
amr：[
pwd
]， 
preferred_username：[e-mail]，
name：[e-mail]
} 
  

单击注销失败，但这是因为第一个教程中的控制器示例不包含用于注销的GET，例如隐藏在JavaScriptClient示例中的示例控制器。 / p>

感觉就像我到了某个地方，但与此同时，我现在完全意识到我知之甚少。可以使用建议，甚至只是指向正确的快速启动以实现我正在寻找的东西。

解决方案

基本设置
基于我理想的读取你想要做的是将其分解为3个组件

• 身份管理组件


• API组件


• MVC / MVVM组件

对于Identity Management组件，请使用此快速入门作为示例 ASPNetIdentity + IS4 EF 或这一个没有EF组件。

您的API应该只是在ID4服务器上进行所有身份验证和注册时授权（不进行身份验证）。

您的前端（MVVM或MVC客户端）应该在ID4服务器上注册，并按照教程中的所有铃声和口哨：

• MVC


• Javascript

这应该使您能够拥有一个安全的API，单个IdentityManagement源（基本上构建它是一个真正的SSO /联合网关），同时分离您的前端申请。

希望这会有所帮助。

其他信息：

除了答案之外，您还可以使用（或自己构建）OIDC客户端的库，以便您可以将其放入前端以帮助您更快地获得某些结果。

仅供参考我使用带有AspCoreIdentity + A的angular + id4 spCore API。
我需要做的就是创建javascript客户端和ID4之间的链接（根据教程和ID4和Web API。我们使用行业库进行角度的oidc-connect以放入ID4服务器的设置和Web API。

这样做的好处是，一旦你在ID4上进行基本设置，就不需要为它构建更多高级功能。

请记住，这些是独立的组成部分，并且完全按照这种方式对待它们。帮助我解决困惑和缺乏知识。

Windows和AD登录（未来状态）：

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

I'm looking for advice on how to properly put an environment like this together. There's a ton of info out there and a ton of material to cover in the Quickstarts, but I'm still feeling fairly lost after 3 days of trial-and-error. I'm familiar w/ Identity Framework in the .NET Framework, but have never worked with Identity Server prior to this.

We've got a microservices setup built on Node and MySql...a series of services in Docker containers which talk to their own db nodes in a MySql cluster. We have a single management UI built in React & Redux - it will run from an AWS bucket.

I've been tasked with authenticating this React front-end using Identity Server. We will NOT be doing auth on the APIs with it. I've suggested building the authentication UI in .NET Core using Identity Framework, since it gives us everything we need "out of the box".

Eventually, The two Identity apps will be our SSO for all applications written against these APIs, and even those that aren't. Furthermore, I'll need to incorporate AD at some point to allow internal company users to pass through w/o manually authenticating.

What (I think) we need is the following:

• Identity Server 4 running in its own container
• Core Identity MVC app running in own container
• Use oidc-client on front-end to authenticate

What I've done so far, is follow these two tutorials:

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

My result is a running Identity Server and Identity Core MVC app running together in the same project (two different ports.) After following the JS client tutorial, I have their example code running - it redirects me to the MVC login, which authenticates against Identity Server, then returns this result:

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

Clicking logout fails, but that's because the controller example in the first tutorial doesn't include a GET for a logout, like the example controller buried in the JavaScriptClient example.

It feels like I'm getting somewhere but at the same time, I now fully realize how little I know. Could use advice, or even just a pointer to the correct Quickstarts to achieve what I'm looking for.

解决方案

Base Setup Based on what i read ideally what you want to do is break it up into 3 components

• Identity Management component
• API Component
• MVC/MVVM component

For the Identity Management component use this quickstart as example ASPNetIdentity + IS4 EF or this one without the EF component.

Your API should be only authorizing (not authenticating) with all the authentication and registration occurring on ID4 server.

Your frontend (MVVM or MVC client) should be registered with ID4 server with all the bells and whistles as per tutorials:

• MVC
• Javascript

This should enable you to have a API(s) that is/are secured, single IdentityManagement source (basically build onto it to be a true SSO/Federated Gateway), all while separating the front end of your application(s).

Hope this helps.

Additional Info:

Further to the answer there are libraries you can use (or build yourself) for OIDC client for react that you can put into your front-end to help you achieve some results quicker.

FYI I use angular + id4 with AspCoreIdentity + AspCore API. All that i need to do is create the link between javascript client and ID4 (as per tutorial and ID4 and Web API. We used the industry library for oidc-connect in angular to put in the settings for the ID4 server and Web API.

The beauty of this is once you do the basic setup on ID4 there is not much required to build on it for more advanced features.

Just keep in mind that these are separate components and treat them exactly as that. Helped me with the confusion and lack of knowledge.

Windows and AD login (future state):

Keeping these components separate, will enable you to integrate AD into the ID4 Server much easier and quicker without having to make modifications to API or Frontend app. Example leveraging Windows login here.

这篇关于Identity Server 4 + Identity Framework + React前端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！