How to pass windows credentials from an Angular client to a WebAPI?

Question

My backend is an ASPNet WebApi2 running under IIS and uses Windows Authentification.

I have 2 clients:

1. WinForms: Passing the credentials is simple. I do the following:

       var credentialCache = new CredentialCache();
       credentialCache.Add(new Uri(uri.GetLeftPart(UriPartial.Authority)), "NTLM", credentials);
   
       WebRequestHandler handler = new WebRequestHandler()
       {
           AuthenticationLevel = AuthenticationLevel.MutualAuthRequested,
           Credentials = credentialCache,
           PreAuthenticate = true,
           UseDefaultCredentials = false
       };
   
       client = new HttpClient(handler, true)
       {
           BaseAddress = uri,
       };
   

2. Angular: As the end-user will access the WebApi backend using the Angular app from non-Windows systems, how can I pass his/her windows credentials? (I have a login screen where the user must enter his domain/name and password).

I would like to pass the user credentials through code. Something like typed_rest-client. Unfortunately this lib is causing build errors and cannot be used.

Answer 1

Here you can find the library: https://github.com/zorgoz/Http.BasicWindowsAuthentication

Note: it is not "released" yet, and it was designed and tested with self-host, not IIS integration, and never thought about having multiple authentication methods in parallel. Still, it could work even without modification.

As mentioned in the comments you could try using only IIS. Even if only Windows authentications is enabled and basic is not, if ntlm/keberos fails, it will fall back to some sort of basic. A browser would display the login dialog. And if you pass username and password, it will authenticate as it would be regular Windows authentication. As I said, you could add proper header up front in your ajax request, then you should not see the challenge. More here. The above mechanism should work transparently - although I never tried it.

If you want to use my middleware, you have to decide where to put it in the pipeline. Use UseStageMarker for that (more here). You will notice, that the middleware can provide feedback on the cause of a login failure. If you want it will add two header entries in the response, which you can inspect and display to the user in your Angular client.