How to use .NET with Angular 5 in a MVC project

Question

I´m using .NET Core 2.0 with Angular 5. I need information about the work with this technology. It's viable to use Angular for Front-End and .NET Core for the BackEnd in a single project MVC, using Angular CLI and dotnet CLI? I did experiments and the results were good, however, I have problems with the controllers in .NEt and your connection with Angular in the Front.

I have this architecture:

One SPA Angular (Client App) for use administrative.
One AuthServer MVC (.NET Core and Angular) for the authentication of my users and Clients (API, Servers, Etc).

I use the Implicit Flow for authentication, so in mi SPA I have a button for signin, and when click in the button the SPA realice a request to AuthServer and redirect to auth.myapp.com. In this place, the user enter yours credentiales (username and password) and the authserver realice the logic, generate a token and redirect to my SPA with the access_token. It´s a Implicit Flow of OpenID.

First, I have a HttpGET controller in .NET called "Login". This controller receive a string "returnURL" and should give back this returnURL in a ViewModel for use in a Razor view, however I not use Razor and use Angular. It´s is my first problem. In mi client SPA (admin.myapp.com) I have a button "sign in", when I click this button this realiced a request to my auth server, and this endpoit should extract the returlURL and return to the Login page of Angular.

In Razor:

return View(vm);

This is the returnURL received for URL param, since admin.myappp.com to auth.myapp.com (localhost:5000):

How to use in Angular? I need return this ViewModel (whit the information of returnURL) and use in the login request (HttpPost). I was thinking that maybe it would be better option to delete the GET endpoint of Login, and perform this "capture" of the returnURL by means of the Angular Router, and once you have this string, there if you make the request to the endpoint Login through POST to perform the authentication and then through the .NET drivers redirect to my SPA with the access token. Which would be the best option? Whichever is the best option, this last part of my reasoning leads me to the following problem:

Second, I have a controller for realice the login in the MVC app, in the domain auth.myapp.com, this HttpPOST controller recive a model with information for the login (username, password and returnURl (from the ViewModel previous)), this model is received from a service Angular that connect whit the .NET controller, and in case of result positive this should redirect to other SPA in other external host, for example: admin.myapp.com, whit a access_token for use in the SPA. I use this code:

[HttpPost]
public async Task<IActionResult> Login (LoginInputModel model) {
    if (ModelState.IsValid) {
        if (_usersStore.ValidateCredentials (model.Username, model.Password)) {
            var user = _usersStore.FindByUsername (model.Username);

            if (_interactionService.IsValidReturnUrl (model.ReturnUrl) || Url.IsLocalUrl (model.ReturnUrl)) {
                return Redirect(model.ReturnUrl);
            }
            return Redirect("~/");
        }
    }
    return Redirect("~/");
}

The problem is that "return Redirect()" not found with angular, and yes with Razor, how to redirect wit Angular in the FrontEnd since a .NET Controller?

This is a Implicit Flow of OpenID Authentication, implemented with IdentityServer4.

Not sure if you had a chance but have a look at the IdentityServer4.Samples quckstart for Implicit Flow. The seed utilises view that runs a js script which redirects back to the app accordingly after successful login. You can also implement the logic within the controller that does the redirect action, but isn't a recommended approach by the founders. — Aeseir
– Aeseir, Commented Dec 13, 2017 at 1:44
Hello, thanks for the answer. I was just inspecting the quickstart and the examples of IdentityServer4 and the issue is that they use Razor to show the intarfaz, so it is easy to perform a redirection from the MVC controller. My question is how to apply this to an Angular SPA, where I replace Razor with Angular so that the redirections I think I would have to do Angular directly, is not it? — gach3z
– gach3z, Commented Dec 13, 2017 at 19:13
Ok I think i understand, you want to login/register without redirects i am correct to IS MVC component? I actually looked into that and here is the answer i got stackoverflow.com/questions/46880662/…. Summary is that it is not recommended approach, you should separate your IS4 from Client & Api. More security controlls in place — Aeseir
– Aeseir, Commented Dec 14, 2017 at 0:00
@Aeseir Well, that just answered all my questions, thank you very much. I would like to select your answer as the correct one, please add it as an answer so I can rate you, otherwise I will auto-reply with the link to the given answer that you shared with me. Let me know what you want. Thank you. — gach3z
– gach3z, Commented Dec 15, 2017 at 18:55

Aeseir · Accepted Answer · 2017-12-16 03:11:15Z

1

Summary is that it is not recommended approach, you should separate your IS4 from Client & Api. More security controlls in place.

I have previously looked into the same query here: IdentityServer 4 Restfull Login/Logout

answered Dec 16, 2017 at 3:11

Aeseir

8,58213 gold badges63 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use .NET with Angular 5 in a MVC project

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related