使用 .NET Core Web API 和 React 的 Active Directory 身份验证 [英] Active Directory Authentication with .NET Core Web API and React

问题描述

我不知道我是不是没找对地方，但我似乎找不到关于从哪里开始使用 React/.NET Core 2.1 Web API 和(本地)Active 的正确指导目录认证.

I don't know if I'm just not looking in the right places, but I cannot seem to find the right guidance on where to begin working with React / .NET Core 2.1 Web API and (on-prem) Active Directory authentication.

总的来说，我对 .NET 身份验证比较陌生，对 Active Directory 身份验证完全陌生.

I'm relatively new to .NET authentication in general, and completely new to Active Directory authentication.

我开始使用 .NET Core 2.1 React 模板并尝试向其添加身份验证，但完全迷失了.

I started by using the .NET Core 2.1 React template and attempting to add auth to it, but got completely lost.

我从哪里开始?

推荐答案

对我来说，第一步是设置 JWT 身份验证，如这篇 MSDN 博客文章中所述.

For me, step one was to set up JWT authentication, such as described in this MSDN blog post.

接下来，我必须找到一个库来根据 Active Directory 来检查用户.我选择了 System.DirectoryServices.AccountManagement(适用于 .NET Core).

Next, I had to find a library to use to check a user against Active Directory. I chose System.DirectoryServices.AccountManagement (available for .NET Core).

现在，我必须创建一个具有 [AllowAnonymous] 属性的新控制器.我将其命名为 LoginController，并创建了一个如下所示的操作:

Now, I had to create a new controller with an [AllowAnonymous]attribute. I called it LoginController, and created an action that looked like the following:

    [AllowAnonymous]
    [HttpPost]
    // Notice: We get a custom request object from the body
    public async Task<IActionResult> Login([FromBody] AuthRequest request)
    {
            // Create a context that will allow you to connect to your Domain Controller
            using (var adContext = new PrincipalContext(ContextType.Domain, "mydomain.com"))
            {
                    var result = adContext.ValidateCredentials(request.username, request.password);
                    if (result)
                    {
                        // Create a list of claims that we will add to the token. 
                        // This is how you can control authorization.
                        var claims = new[]
                        {
                            // Get the user's Name (this can be whatever claims you wish)
                            new Claim(ClaimTypes.Name, request.username)
                        };

                        // Read our custom key string into a a usable key object 
                        var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(configuration.GetSection("SOME_TOKEN").Value));
                        // create some signing credentials using out key
                        var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);

                        // create a JWT 
                        var token = new JwtSecurityToken(
                            issuer: "mydomain.com",
                            audience: "mydomain.com",
                            claims: claims, // the claims listed above
                            expires: DateTime.Now.AddMinutes(30), // how long you wish the token to be active for
                            signingCredentials: creds);

                        Since we return an IActionResult, wrap the token inside of a status code 200 (OK)
                        return Ok(new
                        {
                            token = new JwtSecurityTokenHandler().WriteToken(token)
                        });
                    }
                }
            }
        }
        // if we haven't returned by now, something went wrong and the user is not authorized
        return Unauthorized();
    }

AuthRequest 对象可能如下所示:

    public class AuthRequest
    {
        public string username { get; set; }
        public string password { get; set; }
    }

现在，在我的 React 应用程序中，我所要做的就是使用用户的用户名和向 LoginController 发出一个简单的获取请求我可以从登录表单中获取的密码.结果将是一个 JWT，我可以保存到状态(但应该保存到 cookie:react-cookie 库 使这变得微不足道).

Now, in my React app, all I have to do is make a simple fetch request to the LoginController with the user's username & password that I can get from a login form. The result will be a JWT I can save to state (But should save to cookies: the react-cookie library makes that trivial).

        fetch(`login`, {
            method: "POST",
            headers: {
                'content-type': 'application/json',
                'accept': 'application/json',
            },
            body: JSON.stringify({this.state.username, this.state.password})
        }).then((response) => {
            if (response.status === 401) {
                // handle the 401 gracefully if this user is not authorized
            }
            else {
                // we got a 200 and a valid token
                response.json().then(({ token }) => {
                    // handle saving the token to state/a cookie
                })
            }
        })

您现在可以将 [Authorize] 属性添加到您的 .NET Core 应用程序中的任何控制器，并向它发出提取请求，同时从您的 React 客户端传递您的 JWT，如下所示:

You now have the ability to add the [Authorize] attribute to any of your controllers in your .NET Core application, and make a fetch request to it while passing your JWT from your React client, like this:

await fetch(`someController/someAction`, 
  {  
      method: 'GET'
      headers: {
          'content-type': 'application/json',
          'authorization': `Bearer ${YOUR_JWT}`
      }
  })
  .then(response => doSomething());

如果您想将此 JWT 与 SignalR 一起使用 Hub，请将 [Authorize] 属性添加到您的 Hub 在您的 .NET Core 项目中.然后，在您的 React 客户端中，当您实例化与集线器的连接时:

If you wanted to use this JWT with a SignalR Hub, add the [Authorize] attribute to your Hub in your .NET Core project. Then, In your React client, when you instantiate the connection to your hub:

import * as signalR from '@aspnet/signalr';

var connection = new signalR.HubConnectionBuilder().withUrl('myHub', { accessTokenFactory: () => YOUR_JWT })

还有，中提琴！一个能够授权实时通信的 .NET Core React 应用程序！

And, viola! A .NET Core React application capable of authorized real-time communication!

这篇关于使用 .NET Core Web API 和 React 的 Active Directory 身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！