How to Authenticate a Blazor Server App with Azure AD

do you want to create a new blazer server application and authenticate it using Azure ad what sounds simple cost me about a whole day to figure out and in this video I will show you how I made it work first of all in wish Studio 2022 we create a new blazer server app enter a project name choose its location and press next use the latest. net version and most importantly choose Microsoft identity platform as the authentication type and create the project after Visual Studio created the project it opens the required components dialogue and lets us know that it wants to install the MS identity tool we click next on the next screen we need to choose the app registration within Azure ad we first select between all the available tenants we can access with our locked in Microsoft oft the account please note that I'm not going to tell you how to set up an eure ad tenant in this video for the tutorial I assume that you already have an eure ad tenant set up and at least one user that we can use throughout this tutorial I don't want to use one of the existing app registrations but create a new one instead we select the tenant we want to use and click on create new we enter a display name and Press Register after a few seconds we select the newly created app registration in the table and click next we can now add Microsoft graph permissions or add permissions to additional apis for this basic example where we only want to authenticate the user we don't need to add any of those and click next another note here this way of setting up a new app registration will allow all Microsoft accounts to sign into your application if you want to restrict the accounts to your organization you have to change the settings within the Azure portal after the fact or you create your app registration directly inside the Azure portal first doing so will allow you to restrict users to within your organization I'm not going to show you how to do it in the Azure portal within this video let me know in the comments if you want me to create a video where I explain setting up app registrations using the aure portal in more detail and please keep in mind the focus of this tutorial is to make it work for a developers perspective for putting an app into production please work with professionals and educate yourself on the topic the summary shows us that it will change the project by adding additional code installing new get packages and updating Azure ad to make our app registration work with our Blazer server application we press finish and wait for visual studio to process the changes we can now build and run the bler server app we get instantly redirected to the Microsoft login page where we need to authenticate with a user when logging in a user for the first time we need to accept permissions and there we are in our Blazer server application it mostly uses the default Blazer server app template that we know from other videos on my channel the only difference here is that by choosing Microsoft identity as the authentication strategy we also see the logged in user on the top right we can navigate the app and access the different pages such as the counter page and the fetch data page we also have the option to log out using the log out button on the top right of the app one of the issues with the current implementation is that when starting the app we are instantly redirected to the login page in some cases it might be the desired behavior however for my use case I wanted to make the homepage available for everyone and let the user authenticate when clicking on a login button button we need to make a few code changes to achieve that first let's open the program. Cs file on line 22 we see the fallback policy set to the default policy that line is what makes all incoming requests authorized according to the default policy we remove this line to inactivate this configuration next we open the counter page and add the authorized attribute we also do the same for the fetch data page I start the application and make sure I'm locked out of my account as you can see we now see the homepage remember we added the authorized attribute on the counter page and the fetch data page but not on the index page when we try to navigate to The Counter page we get a message that we are not authorized to access this page the same happens when we try to navigate to the fetch data page now let's log in again to see if we get access to those two pages I logged in and as you can see we can now navigate to the counter and the fetch data Pages again the basic requirements are met however we want to further improve the user experience the not authorized text on the app when accessing a non-authorized route isn't pretty instead we only want to show the menu items for the counter and the fetch data pages to authorized users we open the Naf menu component and add the following code snippet we add an authorized view component including an authorized section everything inside this component will only be rendered when a user is authenticated if you want to show something else for unauthenticated users you could do that using the not authorized component for this use case we only need to put the two authenticated Pages inside the authorized component we start the app one more time we are logged in and we see all three menus on the left and navigating to each page is possible now let's look out to see the app as a non-authenticated user as you can see all see see is the homepage and the home menu item on the left there is much more about Microsoft identity than shown in this tutorial however by following this tutorial you'll be able to create a Blazer server application and authenticate Azure ad users we created a brand new blazer server application using visual studio and its default bler server template and we select the Microsoft identity as the authentication strategy next we went through the Microsoft identity configuration and set up a new app registration we also configured the Blazer server app to use that app registration we then allowed unauthenticated users to display the homepage and we restricted parts of the menu to only be shown to authenticated users let let me know if you have any questions about it in the comments below and make sure to like the video subscribe for more net content and I will see you in the next video

Channel: Claudio Bernasconi

Views: 9,762

Keywords: Blazor Server, Microsoft Blazor Server, Blazor Tutorial, Blazor Authentication, Blazor Server Authentication, Blazor Server Azure Authentication, Blazor Server Azure AD, Blazor Server Azure Active Directory, Blazor Server Active Directory Authentication, Micrsoft Identity, .NET 7, dotnet, Visual Studio, Visual Studio 2022, CSharp, C#, Claudio Bernasconi

Id: pjnDFnOiMwk

Length: 8min 11sec (491 seconds)

Published: Thu Sep 07 2023