使用React SPA和Asp.net Core后端的IdentityServer4实现 [英] IdentityServer4 implementation with React SPA and Asp.net Core backend

问题描述

我们有 asp.net核心(v3.0)Web API后端(尚无身份验证).前端将成为SPA( React ).前端基本上是一个管理面板，这意味着网站的主页应该只是登录页面.我们计划将 IdentityServer4 用于auth(单独的项目).如果我们创建 IdentityServer4 项目( MVC )，它将具有自己的登录表单/页面.由于应该打开我们的客户网站(反应式)登录表单，因此我们不打算使用弹出窗口和iframe，因此最好的方法是什么?

We have asp.net core(v3.0) Web API backend(no auth yet). A frontend is going to be a SPA(React). A frontend basically will be an admin panel, it means the website's home page should be just the login page. We are planning on using IdentityServer4 for auth(separate project). If we create the IdentityServer4 project(MVC) it will have its own login form/page. Since opening our client website(react) login form should be opened, popout and iframe is not the way we are considering to use, what is the best way to accomplish this?

我已经进行了一些研究，如果将客户端设置为 ResourceOwnerPassword <，似乎可以在react client中创建我们的登录表单并将用户的登录名和密码发送到 IdentityServer4 /code>流.但是，这不是一种安全且推荐的方法.我已经在SO和许多文章中阅读了很多问题，但是这已经过时了，大多数示例已在 IdentityServer4 的存储库中弃用.

I've done some research and it seems it is possible to make our login form in react client and send the users login and password to IdentityServer4 if the client is set as ResourceOwnerPassword flow. But, it is not a secure and recommended way. I've read a lot of questions in SO and a lot of articles, but that is outdated and most of the samples are in IdentityServer4's repo is deprecated.

问题:

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

1. Another way we are thinking is, on home page load, just redirect to the IdentityServer4 login page(MVC) and after login redirects back to our website. Is this a proper way of doing it? will the user see the redirection or it will not be much difference since the user opens our website and it seems like the home page?

在这种情况下应使用哪种类型的 GrantType ? Hybrid ?

What type of GrantType should I use for this case? Hybrid?

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

Is it possible to make a custom login page like in React?

实现它的最佳方法是什么?

What is the best way of implementing it?

感谢您的任何建议，如果我重复了这个问题，那我就不好了，因为我花了几天的时间才弄清楚了，但是没有.

Thanks for any advice, and my bad if the question is duplicated since I spend a couple of days to figure this out but couldn't.

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

Now, IdentityServer4 with JavaScript client is available in IdneityServer4 official repositoty:https://github.com/IdentityServer/IdentityServer4/tree/master/samples/Quickstarts/4_JavaScriptClient

此外，我克隆并进行了一些更改，因此IdentityServer4和WebApi位于单个项目中: https://github.com/Jamaxack/IdentityServerSPA

Also, I cloned and changed a little bit, so IdentityServer4 and WebApi are in a single project: https://github.com/Jamaxack/IdentityServerSPA

推荐答案

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

Is this a proper way of doing it? will the user see the redirection or it will not be much difference since the user opens our website and it seems like the home page?

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

That is recommended by redirecting user to identity provider's login page for sign-in , Resource Onwer Flow is not recommended as you said for security reasons.

在这种情况下，我应该使用哪种类型的GrantType?混合吗?

What type of GrantType should I use for this case? Hybrid?

您可以使用代码交换证明密钥(PKCE)，它已经是本机应用程序和SPA的官方推荐.有关更多详细信息，请参见授予类型.

You can use Proof Key for Code Exchange (PKCE) which is already the official recommendation for native applications and SPAs . See Grant Types for more details .

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

Is it possible to make a custom login page like in React?

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

You can fully custmize the identity server's login user interface and identity management system , custmize the IdentityServer4.Quickstart.UI/ASP.NET Identity/Your own identity provider services .

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

In addition , ASP.NET Core 3.0 or later offers authentication in Single Page Apps (SPAs) using the support for API authorization. ASP.NET Core Identity for authenticating and storing users is combined with IdentityServer for implementing Open ID Connect :

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

这篇关于使用React SPA和Asp.net Core后端的IdentityServer4实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！