Authorizing Hangfire dashboard in .NET Web API using JWT tokens

Mahdi Taghizadeh — Sat, 12 Feb 2022 14:03:15 +0000

Hangfire is one of the best background processing libraries for .NET. I recently needed to use it in a .NET 5.0 Web API application to schedule a recurring job and it was pretty straightforward and userful. The only challenge I faced, was to find a way to access Hangfire dashboard on the production environment.

Hangfire dashboard is accessible only on localhost by default and you need to implement sort of authorization on other environments. In my scenario my API authorization was implemented using AzureAD; the client app does the authentication operation and sends the JWT token in all requests to my REST API; in that case, I needed to find a way to show the Hangfire dashboard in the client app using the same authentication method.

Thankfully, Hangfire supports custom authorization filters; all steps I needed to follow were

Implementing a custom HangfireDashboardJwtAuthorizationFilter inherited from IDashboardAuthorizationFilter
Extracting the JWT token passed to my Hangfire dashboard route defined in my Startup.cs (/hangfire in my case)
Checking if the JWT token includes the required claims/roles in order to grant/deny access the dashboard.
Setting the JWT in a cookie to be accessed by cunsecutive requests made by Hangfire dashboard.

On the client side, regardless of whatever you're using (pure HTML/JS, Angular, Vue, React, etc.), you just need to have a page with an IFRAME pointing to the /hangfire URL passing the obtained JWT as a query string.

And you're done! Let me show you the code!

HangfireDashboardJwtAuthorizationFilter.cs

using System;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;
using Hangfire.Dashboard;
using Microsoft.AspNetCore.Http;

namespace Company.Api.Authorization
{
    public class HangfireDashboardJwtAuthorizationFilter : IDashboardAuthorizationFilter
    {
        public HangfireDashboardJwtAuthorizationFilter() {}

        private void SetCookie(string jwtToken)
        {
            httpContext.Response.Cookies.Append("_hangfireCookie",
                    jwtToken,
                    new CookieOptions()
                    {
                        Expires = DateTime.Now.AddMinutes(30)
                    });
        }

        public bool Authorize(DashboardContext context)
        {
            var httpContext = context.GetHttpContext();
            var jwtToken = String.Empty;

            if (httpContext.Request.Query.ContainsKey("jwt_token"))
            {
                jwtToken = httpContext.Request.Query["jwt_token"].FirstOrDefault();
                SetCookie(jwt_token);
            } 
            else
            {
                jwtToken = httpContext.Request.Cookies["_hangfireCookie"];
            }

            if (String.IsNullOrEmpty(jwtToken))
            {
                return false;
            }

            var handler = new JwtSecurityTokenHandler();
            var jwtSecurityToken = handler.ReadJwtToken(jwtToken);

            try
            {
                // Only authenticated users who have the required claim (AzureAD group in this demo) can access the dashboard.
                return jwtSecurityToken.Claims.Any(t => t.Type == "groups" && t.Value == "SOME_VALUE");
            }
            catch (Exception exception)
            {
                throw exception;
            }
        }
    }
}

Protecting Hangfire dashboard in Startup.cs

app.UseHangfireDashboard("/hangfire", 
                new DashboardOptions { Authorization = new [] { new HangfireDashboardJwtAuthorizationFilter() } });

Showing the /hangfire page in your client app using an IFRAME

<iframe :src="hangfireUrl" frameborder="0" width="100%" height="100%"></iframe>

The above is an IFRAME in a Vue.js view, the value hangfireUrl passed to the IFRAME src is the full URL of the Hangfire dashboard route in your API + "?jwt_token=XXXXX" where XXXXX is the token your client app has already obtained from your authorization service (AzureAD in my demo).

Now whenever you open your client page in the browser, the inline IFRAME tries to open the actual Hangfire dashboard page in your Web API application and the passed value of jwt_token will help the custom authorization filter to authorize users with the required claims and show the dashboard or return a 401 http status.

Using GraphQL .NET Client in .NET 5

Mahdi Taghizadeh — Thu, 03 Dec 2020 09:28:42 +0000

GraphQL for .NET is one of the open-source libraries available both to create and consume a GraphQL API and there are dozens of blog posts and tutorials available to learn more about it.

In this quick post, I want to show you how to use GraphQL.Client and define the client in your Startup.cs and inject it into a controller in ASP.NET Web API.

Once you've created your Web API (or any other type of .NET project); you need to add its NuGet package:

dotnet add package GraphQL.Client --version 3.2.0

If you want to use Newtonsoft.JSON, feel free to add that too

dotnet add package Newtonsoft.Json --version 12.0.3

The next step is adding a GraphQLClient to your Startup services to be able to inject them into your controller later:

public void ConfigureServices(IServiceCollection services) {
            services.AddMicrosoftIdentityWebApiAuthentication(Configuration);

            var graphQlClient = new GraphQLHttpClient(Configuration.GetSection("MyGraphQLApi").GetSection("ApiUrl").Value, new NewtonsoftJsonSerializer());
            graphQlClient.HttpClient.DefaultRequestHeaders.Add("Authorization", Configuration.GetSection("MyGraphQLApi").GetSection("ApiToken").Value);
            services.AddScoped<IGraphQLClient>(x => graphQlClient);

            services.AddControllers();
}

It's simply getting API URL and Token from "MyGraphQLApi" section in your appsettings.json file (so you don't need to repeatedly do this in your methods) and adds it to your services.

Then you can easily inject it into your controller:

private IGraphQLClient _mondayClient;
public MondayController(IGraphQLClient mondayClient) {
     _mondayClient = mondayClient;
}

Now you can use this injected instance of GraphQLClient in your methods:

var request = new GraphQLRequest {
                Query = @"query Project($boardId: [Int], $groupId: [String], $columnsIds: [String])
                {
                    boards (ids: $boardId) {
                        name,
                        groups (ids: $groupId) {
                            id
                            title
                            items {
                                name
                                column_values (ids: $columnsIds) {
                                    id
                                    title
                                    value
                                }
                            }
                        }
                    }
                }",
                Variables = new { boardId = new List<int> { 379551383 }, groupId = new List<string> { "new_group80740" }, columnsIds = new List<string>() { "text73", "text7" } }
            };

var response = await _mondayClient.SendQueryAsync<Data>(request);

In the example above I'm getting some data from Monday.com API and I've passed parameters using Variables.

If you have a complicated data model returned in JSON, you can use tools like JSONUtils or JSON2CSharp to generate your model classes from the JSON and use it to deserialize the response to objects.

Enjoy!

DEV Community: Mahdi Taghizadeh

Authorizing Hangfire dashboard in .NET Web API using JWT tokens

HangfireDashboardJwtAuthorizationFilter.cs

Protecting Hangfire dashboard in Startup.cs

Showing the /hangfire page in your client app using an IFRAME

Using GraphQL .NET Client in .NET 5