IdentityServer4 implementation with React SPA and Asp.net Core backend

问题

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?

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.

Questions:

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?

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

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

4. 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.

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

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

回答1:

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?

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.

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

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 .

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

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 .

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/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.1

回答2:

1) You can use a flow something like below

'First, load the react project. then check for the token/user object. If there is no token/user, then redirect to the MVC project from react project. You can have the login page in MVC'

2) Use Implicit grant type

3) Yes. You can make customization in MVC login page

4) In order to do that, you can use the oidc-client npm package in react project. For the identity, use the Quickstart template from identity server 4 documentation. Here it is

来源：https://stackoverflow.com/questions/59486398/identityserver4-implementation-with-react-spa-and-asp-net-core-backend