How to setup Active Directory authentication with Vue.js and a .NET Core API

Question

I am re-writing one of our intranet sites as a .NET Core 3.1 WebAPI backend with a Vue.js frontend. I'm an experienced programmer, but new to some of these technologies. I need to setup authentication with Active Directory so local network users don't have to login to the site.

I've seen some things about using tokens and sending that in the API requests, but don't know where to start. Eventually, there will be a second Vue.js frontend for external (third-party) users who will need to authenticate with a username/password form. So the API needs to be able to handle both kinds of users.

How do I set this up? Any instructions or guidance is appreciated. I'm sure I'll have other questions as I get into it. Thanks!

EDIT

I was able to get this method working to take a username/password and validate it against our Active Directory domain (requires the Microsoft.Windows.Compaibility package)

using System.DirectoryServices.AccountManagement;
private bool IsValidUserAndPasswordCombination(string username, string password)
    {
        bool isValid = false;
        using (PrincipalContext pc = new PrincipalContext(ContextType.Domain, "localdomainname.com"))
        {
            isValid = pc.ValidateCredentials(username, password);
        }
        return isValid;
    }

Now I just need to know the best way to pass the current Windows user credentials to the API. The API is setup for anonymous authentication. Is there a way to get the credentials in Vue.js and pass them without using the authorization headers?

Did you succeed? I need the same kind of authentication for my .Net Core backend and Vue frontend but I have no idea what would be the solution. Now I'm using axios with the withCredentials parameter and the browser ask for credentials, but I am not satisfied. For example how can I log out? — KDani
@KDani -kind of... I realized I don't actually need to "authenticate" with AD - the user is already logged into their Windows machine. In my program, I have a table of users that contains their AD login name, but no password. All I did was get the current Windows username and look it up in the table. Then I passed the user info from the API (details, permissions, etc.) to the Vue frontend. The user never really "logs out" of the program...if the Vue frontend ever finds invalid user data (ie. "token"), it seamlessly calls the API to get the user data again. Hope this helps. — Bruno71

Seididieci Seididieci · Accepted Answer · 2020-08-06T12:33:21

I think you can check this quesion that is analogue to yours. So you can generate JWT Tokens manually (if you need it for authentication), checking users identity through LDAP Authentication.

EDIT

I think you cannot get the current user credentials inside a browser without a specific browser plugin... Maybe the only way is to prompt for user login like any other website and keep the Login Action Controller anonymous and use it to validate user.

When validated you can generate a JWT Token for the client to keep authenticated.

EDIT 2

To generate a JWT Token you can find may tutorials on the web, mainly you have to use the System.IdentityModel.Tokens.Jwt namespace eg.:

var tokenHandler = new JwtSecurityTokenHandler();
// The secret must be kept and used to validate the token
var key = Encoding.ASCII.GetBytes(_appSettings.Secret);
var tokenDescriptor = new SecurityTokenDescriptor
{
  Subject = new ClaimsIdentity(new[] { new Claim("id", user.Id.ToString()) }),
  Expires = DateTime.UtcNow.AddDays(7), // maybe you want it to be shorter
  SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature)
 // If you want you can add as many claims you need in your token (roles etc.)
};
var token = tokenHandler.CreateToken(tokenDescriptor);
var tokenString = tokenHandler.WriteToken(token);

Send the tokenString to te client in the response to login request, and keep it in the client to send authenticated requests.

You also neet to configure the API to authorize users through JWT tokens and instruct it to accept only your one (see here for details)

How to setup Active Directory authentication with Vue.js and a .NET Core API

1 Answers