Reactjs 带有React SPA和Asp.net核心后端的IdentityServer4实现

我们有asp.net核心（v3.0）Web API后端（还没有身份验证）。前端将成为SPA（

React

）。 前端基本上是一个管理面板，这意味着网站的主页应该只是登录页面。我们计划为auth（单独的项目）使用

IdentityServer4

。如果我们创建

IdentityServer4

项目（

MVC

），它将有自己的登录表单/页面。既然应该打开我们的客户网站（react）登录表单，popout和iframe不是我们考虑使用的方式，那么实现这一点的最佳方式是什么

我做了一些研究，如果客户机设置为

ResourceOwnerPassword

flow，则可以在react client中创建登录表单，并将用户登录名和密码发送到

IdentityServer4

。但是，这不是一种安全且推荐的方法。我在SO和许多文章中读到了很多问题，但这些问题已经过时，而且大多数示例都在

IdentityServer4

中，其回购协议已被弃用

问题:

我们思考的另一种方式是，在主页加载时，只需重定向到IdentityServer4登录页面（MVC），然后在登录后重定向回我们的网站。这是正确的做法吗？用户是否会看到重定向，或者它不会有太大的区别，因为用户打开我们的网站，它似乎是主页

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

GrantType

<代码>混合动力车

是否可以像

React

中那样创建自定义登录页面

实施它的最佳方式是什么

谢谢你的建议，如果这个问题是重复的，我很抱歉，因为我花了几天的时间来解决这个问题，但无法解决

编辑： 现在，IdneityServer4官方报告中提供了带有JavaScript客户端的IdentityServer4：

此外，我对IdentityServer4和WebApi进行了一些克隆和更改，因此它们位于一个项目中：

这是正确的做法吗？用户是否会看到重定向，或者它不会有太大的区别，因为用户打开我们的网站，它似乎是主页

建议将用户重定向到identity provider的登录页面进行登录，但出于安全原因，不建议使用Resource OnPower Flow

在这个案例中，我应该使用什么类型的GrantType？混合动力车

您可以使用代码交换验证密钥（PKCE），这已经是本机应用程序和SPA的官方建议。有关更多详细信息，请参阅

是否可以像React中那样创建自定义登录页面

您可以完全定制identity server的登录用户界面和身份管理系统，定制identity server 4.Quickstart.UI/ASP.NET identity/您自己的身份提供程序服务

此外，ASP.NET Core 3.0或更高版本使用对API授权的支持在单页应用程序（SPA）中提供身份验证。用于验证和存储用户的ASP.NET核心标识与用于实现开放ID连接的IdentityServer相结合：

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

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

2） 使用

隐式

授权类型

3） 对。您可以在MVC登录页面中进行自定义

4） 为了做到这一点，您可以在react项目中使用

oidc客户端

npm包。对于标识，请使用identity server 4文档中的快速启动模板。

---

非常感谢花时间编辑您的问题并添加github示例。非常感谢。