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

Question

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

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

问题：

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

2. 在这种情况下我应该使用哪种类型的GrantType？ Hybrid?

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

4. 实现它的最佳方式是什么？

感谢您的任何建议，如果问题重复，我会很遗憾，因为我花了几天时间才弄清楚但无法解决。

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

另外，我克隆并做了一点改动，所以 IdentityServer4 和 WebApi 在一个项目中：https://github.com/Jamaxack/IdentityServerSPA

Answer 1

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

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

在这种情况下我应该使用什么类型的 GrantType？混合动力？

您可以使用 Proof Key for Code Exchange (PKCE)，这已经是原生应用程序和 SPA 的官方推荐。详情请见Grant Types。

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

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

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

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

Answer 2

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

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

2) 使用Implicit 授权类型

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

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