Just wondering if anybody has done this.
What I'm looking for is a full React app with access to API Controllers inside an ASP Core app that uses a layout and Identity, etc.
My reason is that I need Facebook login using .NET Cores Facebook Identity. If I was to separate the front end from the back end completely, when Facebook is authenticating the user, there is no connection between the front end and the route Facebook returns to after authentication is successful. E.G /signin-Facebook or /Account-ExternalLogin.
Thanks in advance.
Related
I'm familiar with the .Net and React applications individually. What I want to do is to create a hybrid app of MVC and React for SaaS. Below are the details,
.NET MVC application for our website (can't create this in react as
it is a website and intended to use for google crawl, SEO, and all)
Once users log in using the MVC application LOGIN form, I want to redirect
them to ReactApp which is basically a portion after login
I already have a website built using MVC. Now want to load React application after successful login
Note: This needs to be run under the same domain. No redirection to sub-domain or so. Although, we can have an additional paths like /user
Questions:
Is it possible to traverse users between both applications?
Is it possible to manage the same session between the two?
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:
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?
What type of GrantType should I use for this case? Hybrid?
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.
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
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://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.1
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
I have a .net core application that I'm trying to authenticate with azure ad.
I'm using C# web apis for for all backend.
The place where I'm getting stuck is how to force my user to login when coming to my app.
If I add Authorize to my api calls with they just fail and the page loads without getting the information from the api calls.
How do I tell my react app to go to the microsoft login page if they're not logged in? I'm thinking that I don't need tokens because I can just get the ms login link from my api call and login?
Is this something I can set in the startup page?
Are there any examples on how to implement Azure AD with React web application the example I see include .net core examples only. Mine is pure React web application. Any suggestions?
it is ok to bundle the tenantid and clientid/application inside the react web application? would that have any security implications
We implemented similar structure as follows:
There is a webappservice, which is created from standart web application template. It handles all the authentication parts. Once user is authenticated, the web application service, serves react files with proper parameters (e.g. logged in, user token etc)
I am working on another application that is using AngularJS on the front end, and is using Laravel as a RESTful back end. The application is pulling some information from the API for guests who visit the site. I was wondering if there was a way to secure the API routes from direct access using a token or something between the front end and back end. I would prefer that the only way to access the API routes was through the Angular front end, but the visitors will not actually have an account. Is there any way anyone knows to achieve this?
Look at the Passport package that ships with Laravel. You can grant different levels of OAuth tokens for your users based on roles and access level through the site. In conjunction with Policies you should have no problem securing everything you need. Documentation on Passport:
https://laravel.com/docs/5.4/passport
Particularily look at personal access tokens with scopes, that will give you the fine tuned control you are looking for.
https://laravel.com/docs/5.4/passport#personal-access-tokens