How to Secure a Blazor WebAssembly App Using Azure Active Directory

okay you made a web app using Blazer webassembly now you need to make sure only the right people can access it dealing with user identity and access can be a challenge in today's video I will show you how to protect your Blazer app using Azure active directory let's get into it alright first thing first let's create a new project in Visual Studio I'm going to select the Blazer webassembly empty template I name it Blaze already I click on the next button and then I hit the create button to generate the project now that the project is created let's add a configuration file to Store settings from Azure Haiti in the public folder which is WWE root I add a new item a search for app settings and add it to the folder inside this file I will add a section called Azure ad the first settings is Authority which specifies the URL for the Azure ad Authority it typically looks something like https semicolon slash slash login dot microsoftonline.com tenant ID we will replace the tenant ID later the second setting is client ID which represents the unique identifier for our Blazer app in azure 80. we will get this value when you register our app in azure lastly I will set the validate Authority settings to true this makes sure that the authority URL we specify earlier is validating during the authentication process now in order to get this information we need to register the application with Azure Haiti I will head over to the hedger portal and look for the Azure active directory service inside I will find the app registrations option in the menu this is where I will resist my blazer app I click on new registration to start the registration process for the name I name it Blazer Haiti you can name it whatever you want now I need to provide the redirect URI Azure ID will use it to send the user after they've successfully authenticated for the platform it should be single page application and the Ure is https my column slash localhost semicolon the port which is 5001 then slash authentication and slash login Dash callback this URL will match a route in the development environment if you have an app deployed to a server you should use a different URL so I either resist a button to complete the registration process and that's it for the registration so in the overview section I'm going to copy some information for the app setting file I will need the application ID and the directory ID now let's take a look at creating a group I'll go back to the Azure active directory tenant I select groups from the menu I click on the new group to start the group creation process I leave the group type to security and I give super users as the name I skip the description and click on the create button to create the group you might need a few refreshes before seeing the group once the group is created click on it to see the detail and I will copy the object ID we'll need it later for configuring group policies in the app so now we need to configure the app registration to receive information about the groups for that let's find out our app registration again so inside the app registration menu I will look for token configuration section so this is where we can configure the claims our app receives so we need to enable the group's claim I will click on the add group claim and next I will check the security groups check box and click on the add button now let's go back to the Azure ad for creating some users in the menu I select users next I select new user and then click on the create new user so let's call him John I will copy the username and generate it password and let's see let's click on review plus create to create the user again you might need to refresh the page a few times before the user is displayed next I'm going to create a new user let's call him Mike I also copy the username and the password in the assignment tab I click on the add group so I can add the user to the group I created earlier so I click on the review plus create to create the user now that we have registered our app in Azure ID and created the required group it's time to update our app settings so we need to replace the tenant ID with the actual Azure ad tenant identifier we obtained during app registration we will also need to replace the client ID and remember the group we created in Azure ready let's add a section for groups and I add super users ID entry and set its value to the ID of the group in Azure ready now let's add some nuget packages that will give our app the necessary functionality to implement authentication and authorization I will use the package manager console but feel free to use the nuget package manager user interface so I start with microsoft.asp.net core dot authorization next I will install the microsoft.asp.net core Dot components.authorization and finally I will install the package Microsoft dot authentication Dot webassembly.msal so to make these functionalities available in the world hub I will import some name spaces in the import file so let's start with the authorization then components.authorization and then component.webassembly.authentication now that we have the necessary nuget packages it's time to enable Authentication first we need to add a script reference to the index.html file in the public folder so this script is provided by the microsoft.authentication.webassembly.msan package and handles the authentication functionality so next we set up authentication using msal service for our app so in the program.cs file on the services collection I will use the extension method add msal authentication so we need to configure the authentication options to ensure our app integrates with Azure ID correctly so I will use the bind method to bind the Azure ad section from the app settings file to the authentication options so I will set the login mode property to redirect this means our app will redirect users to the Azure ID login page instead of a pop-up for Authentication so we need to make a small adjustment in our app.reser file it has a router component so this component enters the routing within our application to make sure that the authentication state is spread across our Hub we will wrap the router component with the cascading authentication State component so this change ensures that the authentication state is available to all the components within our app so in addition we will swap out the route view component with authorized view route component this component guarantees that only users who are authenticated can access the routes so to handle cases where users are not authorized to access a specific resource we will add the not authorized component inside the authorized route with View so if the user is not authenticated we will send him to the authentication slash login root so otherwise we display a message that says it cannot access the page the authentication component doesn't exist yet so let's create it so in the pages folder I had a new component I call it authentication.razer so in the component I will set the root attributes to slash authentication slash action so this sets The Roots off for the component to handle various authentication actions so let's add a parameter that will hold the action so to handle the authentication process we will use the remote authenticator view component its action property is set to the action parameter so this section set up the remote authenticator view component and allows us to specify the action dynamically based on the root nice so let's update the message in the index component and let's also add the authorize attribute so this attribute makes sure that only authenticated users can access the index page let's also add an admin component so we can access it through the root slash admin and we also add the authorized attribute to restrict access and let's also add a welcoming message so to enhance the user experience and provide navigation option based on authentication status let's update the main layout component so let's include the authorized view component which lets us display content based on whether the user is authenticated or not so inside the authorized component I add a button that allows user to log out [Music] The Click Handler uses the navigate to logout method from the navigation manager to redirect to the authentication page with the logout action then the second parameter indicates the roots where we want to be redirected after the logout in this case it's it's the on page and just below I display a welcome message with the user's name so next I add a navigation menu to include links to the OM and admin pages excellent the moment we have been waiting for us arrived so we can test our app if I run the app you can see that I am redirect to the login page so I will log in with the first user we created which is John so because it is the first time I logged in the system invited me to update my password now I can click on the sign in button looks like I have an error sorry about we're having trouble signing you this might be a configuration issue so first we should take a peek at the app settings file interesting so the client ID is incorrect I accidentally use the tenant ID instead so let me fix this okay so let's give it another shot now so I'll try logging again and this time it should work all I need to do now is to click on the accept there we go we logged in now so take a look at the screen and you will notice the logout button and right below you will see the name John displayed as the currently logged in user now let's make things interesting we configure a super User Group in Azure ID let's update the Hub so we can authorize based on the group in the program.cs file on the services collection I call the extension method add authorization core in the action that I get I had a new policy named super users so the policy requires users to have a specific group claim I get the value from the configuration use the key groups semicolon super users ID as defined in the app settings we are going to ensure that only users from the super users group have access to the admin page so in the admin component in the authorize attribute and specify the policy we register in the program.cs so let's give it another go so I will start with the user who is in part of the super users group so if he attempts to access the admin page you can see that the access is denied so let's log out for now let's try with the user who actually belongs to the super users group okay since it's the first time I use this user I need to update the password again and now I can go ahead and accept the permissions okay once in take a look at the screen you'll notice that the name displayed is mic let's attempt to access the admin page because Mac is part of the super users group is granted special access to the admin page and that was it for today's video I will put the link for the Subscribe in the description below don't forget to like And subscribe see you next time

Channel: Tech With Pat

Views: 5,159

Keywords: Blazor WebAssembly security tutorial, Blazor WebAssembly Azure AD authentication, Blazor WebAssembly Azure AD integration, Blazor WebAssembly security tips, Blazor WebAssembly app security, Blazor WebAssembly app security tutorial, Blazor WebAssembly security guide, Blazor WebAssembly security demonstration, Blazor WebAssembly security explained, Blazor WebAssembly security overview, Blazor WebAssembly security basics, Blazor WebAssembly security strategies

Id: XcsG5MZ8VBE

Length: 20min 2sec (1202 seconds)

Published: Sun Jun 25 2023