Blazor Server is a pretty nice ASP.NET framework that comes in two flavors, Blazor WebAssembly and Blazor Server. Blazor Server is great for internal company projects, since it's a 100% server-side framework that can easily access any APIs or databases that your company has!

Today, we'll be looking at how to quickly get a Blazor Server application up and running as an Azure Web App.

Azure App Service Setup

First, if you don't already have an Azure tenant, you'll need to set one up by following this link: https://portal.azure.com/

After your tenant is created, you should be taken to a quickstart screen, where you can select Create a new webapp, as shown below.

In this example, I chose creating a webapp without a database that is on the next page, but you can choose whatever will fit your needs. Any database setup will not be covered in this tutorial, however.

On the next screen, you'll need to fill out some basic information about the app itself. Note that the region and plans may be different depending on whether you have a specific pricing plan. For my purposes, I'm only using the free tier provided on the East US region.

You'll be taken to the App Service's home page, where you'll need to navigate to the Configuration tab on the left. In this tab, there will be an Application Settings tab that will allow you to set connection strings and environment variables. I don't have it shown here, but I set up an environment variable for to distinguish between Development/Production. This is automatically set in VS2022 as ASPNETCORE_ENVIRONMENT, so I added that environment variable with the value of Production and saved it. After this, you should navigate to the General Settings top tab.

In these settings, double check to make sure the stack and .NET version is correct (.NET 7 in our case), and make sure that the "Web Sockets" setting is turned on, then click save. Blazor Server uses websockets to communicate with the user's browser, and all data and state changes are sent back and forth via these websockets.

With this, we're done with our App Service setup, and can move next into setting up a registration that will allow us to add Active Directory authentication.

Azure App Registration Setup

The Azure App Registration is what will handle the application's authentication, via Azure AD for us. In the search bar at the top of your Azure Portal, go ahead and search for "App registration", it should be the first link to come up. You should come to a page like this:

Afterwards, you'll come to the screen in the next photo. You'll need to fill out a name, and we only allow a single tenant Azure AD, though you could allow multiple if needed. We won't be setting any redirect URIs, we'll get to that a bit later. Click register.

Next, you'll be taken to the App Registration's home page. From here, I've highlighted a few of the items we'll be altering. Let's start with the client secret, the top right highlighted item.

You'll need to create a new secret that your application will use to connect with Azure. Once it's created, grab and save the value and store it somewhere you can access it at a later time.

Now let's switch over to the application's Manifest tab. We'll need to set two properties to true, oauth2AllowIdTokenImplicitFlow, and oauth2AllowImplicitFlow. Mouthfuls, I know. I've highlighted where they are in the manifest. From the photo, change the values from false to true, and click the save button at the top left. These options allow us to more easily work with the Azure AD authentication in Blazor.

We're close! Now let's go into the App Role tab. We'll need to create a new role. I've set it up to only allow Users/Groups. The "Value" is what will actually be used to check if a user is in a role in the Blazor application. I kept the values the same just to keep it simple.

When clicking on the app role, there should be a link that pertains to assigning users/groups to this role. It'll take you to this screen, where you can go into the Users and Groups and assign the users or groups you want to be able to access this application. For this application, since I'm the only one using it, I'll be the only user to assign to it.

After this, we've done most of the set up we need for on the Azure side, let's go ahead and create our Blazor application, hook it up to Azure, and start testing!

Project Setup

Now let's start tying everything together with the actual project creation. I'll be using Visual Studio 2022, and creating a Blazor Server templated application. We'll also be making sure we have Microsoft Identity authentication type selected. This will prompt us to connect to our Azure App Registration, and fill out some appsettings.json properties for us, as well as scaffold some in our program.cs.

After you create the project, it will prompt you to connect to an Azure tenant. Make sure you're logged in with the same email that is a user in the tenant you created or already have, and it should pop up. Go ahead and connect it.

In program.cs, I've also modified the options in the builder's AddAuthorization method. This will add the policy for the role that we created. In my case, the value was "BlazorUser".

Finally, in appsettings.json, you should see that the "AzureAD" was already added for you, with everything filled out except for the "ClientSecret". We created this earlier, so now we should paste it into here.

If you launch the app, you should be prompted for login, and we should be able to see that we are up and running with authentication working.

If we sign out and attempt to log in with a different email that is not part of the tenant, we will see that we are unauthorized to access the application as well! We're ready to get this application into Azure!

Final Steps

First, let's go back to the Azure App Registration, and set up the Redirect URIs. You should notice that it has already set up the localhost redirect URIs for you. Those were automatically added for us, and allows us to sign in when we are developing locally in our IDE.

If you don't know where to find your app's domain, it's easily accessible through the App Service homepage, shown in the next photo.

Once that's saved, go back into Visual Studio, right-click the project (not the solution!) and click Publish. In the window that pops up for setting up a publish profile, select Azure, and then select the App Service (Windows).

You should see the App Service pop up, like so. Go ahead and click finish to create the publish profile for the app.

Once that's done, click publish, and wait for it to finish. Once it completes, it will automatically open a new tab with the application launched on the App Service.

We can click "Log in", and we'll see that the authentication will work as expected.

However, what you may have noticed is that even if we haven't logged in to the application, we still have access to it. For public facing sites, this isn't an issue. And chances are, if you don't want people to access it, you would have the application set up behind a Private Endpoint and VNet integrated, but that's a more in-depth and different topic. As an aside, if you do have these configured, the automatically generated "Web Deploy" publish profile won't work unless you have an Azure VM behind the VPN, or you have allowed the scm public IP through. If not, you'll have to download the publish profile from the App Service's homepage, import it into Visual Studio, and run the "FTP" publish.

Back to the issue at hand though, if you want to do a quick and dirty authentication enforcement, we can go back to Visual Studio and add this into our MainLayout.razor:

What we've done is wrap the content in an <AuthorizeView> tag, and added a <NotAuthorized> tag that will only show that the user is unauthorized and must log in. If we push this change out to Azure by publishing the application again, we will see this if we are not logged in:

That's it! You've done it! If you log in again, you'll be able to see the homepage.

Thanks for sticking with me through this tutorial! Hopefully it's helpful, and gives some guidance to some of the more obscure steps necessary to get the Azure AD authentication working with a Blazor Server application.