Search code examples
angularasp.net-coreoauth-2.0openididentityserver4

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

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):

enter image description here

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.

Solution

  • 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