带有 React SPA 和 Asp.net Core 后端的 IdentityServer4 实现

IT技术 reactjs asp.net-core asp.net-core-webapi identityserver4
2021-05-03 09:44:28

我们有asp.net core(v3.0) Web API 后端（尚无身份验证）。前端将是一个 SPA( React)。前端基本上是一个管理面板，这意味着网站的主页应该只是登录页面。我们计划使用IdentityServer4for auth（单独的项目）。如果我们创建IdentityServer4项目( MVC)，它将有自己的登录表单/页面。由于打开我们的客户端网站（react）登录表单应该打开，popout 和 iframe 不是我们考虑使用的方式，实现这一点的最佳方法是什么？

我已经做了一些研究，IdentityServer4如果客户端设置为ResourceOwnerPassword流，似乎可以在react客户端中制作我们的登录表单并将用户登录名和密码发送到。但是，这不是一种安全且推荐的方式。我在 SO 和很多文章中阅读了很多问题，但这些已经过时了，并且IdentityServer4'repo' 中的大多数样本已被弃用。

问题：

  1. 我们正在考虑的另一种方式是，在主页加载时，只需重定向到 IdentityServer4 登录页面 (MVC)，然后在登录后重定向回我们的网站。这是正确的做法吗？用户会看到重定向还是因为用户打开我们的网站并且看起来像主页，所以不会有太大区别？

  2. GrantType对于这种情况，我应该使用什么类型的？Hybrid?

  3. 是否可以制作像 in 的自定义登录页面React？

  4. 实施它的最佳方法是什么？

感谢您的任何建议，如果问题重复，我很糟糕，因为我花了几天的时间来解决这个问题，但无法解决。

编辑： 现在，带有 JavaScript 客户端的 IdentityServer4 在 IdneityServer4 官方存储库中可用：https : //github.com/IdentityServer/IdentityServer4/tree/master/samples/Quickstarts/4_JavaScriptClient

另外，我克隆并稍作更改，因此 IdentityServer4 和 WebApi 位于一个项目中：https : //github.com/Jamaxack/IdentityServerSPA

2个回答

这是正确的做法吗？用户会看到重定向还是因为用户打开我们的网站并且看起来像主页，所以不会有太大区别？

这是通过将用户重定向到身份提供者的登录页面进行登录来推荐的，出于安全原因，不建议使用 Resource Onwer Flow。

在这种情况下，我应该使用什么类型的 GrantType？杂交种？

您可以使用 Proof Key for Code Exchange (PKCE)，这已经是本机应用程序和 SPA 的官方推荐。有关更多详细信息，请参阅授予类型。

是否可以像 React 一样制作自定义登录页面？

您可以完全自定义身份服务器的登录用户界面和身份管理系统，自定义 IdentityServer4.Quickstart.UI/ASP.NET 身份/您自己的身份提供者服务。

此外，ASP.NET Core 3.0 或更高版本使用 API 授权支持在单页应用程序 (SPA) 中提供身份验证。用于验证和存储用户的 ASP.NET Core Identity 与 IdentityServer 结合以实现 Open ID Connect：

https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.1

1）您可以使用如下所示的流程

'首先，加载react项目。然后检查令牌/用户对象。如果没有令牌/用户，则从 react 项目重定向到 MVC 项目。您可以在MVC'中拥有登录页面

2) 使用Implicit授权类型

3) 是的。您可以在MVC登录页面进行自定义

4) 为此，您可以oidc-client在 react 项目中使用npm 包。对于身份，请使用身份服务器 4 文档中的快速入门模板。 这里是

其它你可能感兴趣的问题
上一篇是否可以从 React Fiber 中检索组件的实例？ 下一篇草稿js保存和渲染或显示内容