Microsoft Azure – Application Security with Azure Active Directory
In this article, we will look into how to secure a Blazor WebAssembly app with Azure Active Directory. Azure Active Directory, or AAD, provides an intelligent identity as a service that protects your application.
In this article, we will use it to protect a Blazor WebAssembly app. To do so follow the below steps:
Step 1: First, go to the Menu, and click on Azure Active Directory.
Step 2: Then we’ll go to “App Registrations”.
Step 3: Then we will register a new application for our Blazor app.
Step 4: Then we will fill in the name for the app. We’ll leave the Redirect URI to Web and fill in this URI. This uses port 5001, which is the default port on IIS Express. If you use another port, you can change this, and “Register”.
Now we have an application in AAD. These are the things that we need later:
- Display name
- Application Client ID
- Directory Tenant ID
Step 5: We need to do one more thing. For that, go to “Authentication”.
Here we need to check the below-shown boxes for Implicit Grant and click on the Save button.
At this point, our AAD is configured.
Step 6: Now, let’s create the Blazor app in the command prompt. We use the below commands to create a standalone Blazor WebAssembly app. In this AAD we mention the app name, the client id, and the tenant id.
dotnet new blazorwasm -au SingleOrg --client-id "YOUR_CLIENT_ID" -o YOUR_APP_NAME --tenant-id "YOUR_TENENT_ID"
It created a new folder for the app with a standalone Blazor WebAssembly app.
Step 7: Now let’s build it with the following command:
Step 8: now run it with the below command:
The below images shows the URL that it is running on.
Step 9: Now let’s open that in a browser. This is the Blazor app running on our local machine. This runs in WebAssembly in our browser.
Here, we can authenticate it too. This will use your Azure accounts to which you are already logged.
You can use Azure Active Directory to protect all sorts of applications, including a Blazor WebAssembly app.