DEV Community

Cover image for Securing a Blazor WebAssembly Hosted Apps with Azure Active Directory - Part 1
Emanuele Bartolesi
Emanuele Bartolesi

Posted on

Securing a Blazor WebAssembly Hosted Apps with Azure Active Directory - Part 1

If you are developing an enterprise application, I am quite sure that you need to implement an authentication flow.
In this article we are going to see how to use Azure Active Directory to secure a Blazor WebAssembly hosted application.
For a standalone Blazor WebAssembly the process is very similar, but as an enterprise application, it's more common if you are facing with an ASP.NET Core hosted architecture (or Blazor Server).

Create the project with Visual Studio 2022

From Visual Studio 2022, select "Create a new Project" and in the new screen, click on "Blazor WebAssembly App".

Image description

Choose the name of the project.

Image description

In this screen, pay attention to select "Microsoft identity platform" as Authentication type and check "ASP.NET Core hosted".

Image description

Open the file launchSettings.json from the Server project and change the ports of the applicationUrl key to 5001 and 5000.



      "BlazorWASMSecurityAzureAD.Server": {
        "commandName": "Project",
        "dotnetRunMessages": true,
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "applicationUrl": "https://localhost:5001;http://localhost:5000",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      }


Enter fullscreen mode Exit fullscreen mode

For the moment you can leave Visual Studio.

Register the Server application on Azure Active Directory

Login to the Azure Portal and open "Azure Active Directory" from the top bar or search for it.
Select "App Registrations" on the left navigation bar.

Image description

You should see the list of your existing App registrations.

Click on "New registration" on the top bar.

Image description

Choose the name of your application. For this demo I will use "BlazorWASMHosted Server".

Image description

Click on "Register" and then click on "API Permissions". Remove the permission "User.Read".
We don't need it.

Now from the left navigation click on "Expose an API" and then to "Add Scope" in the new screen.
Choose your prefer scope name. For this demo I will use "BlazorWAMSHosted.API".
Fill the mandatory fields below and save the form.

Image description

From the Scopes list, copy the value of the scope. We need it later in Visual Studio.

Image description

Register the Client application on Azure Active Directory

Now we are going to create the App Registration for the Client part of our application.
The steps are quite the same as the server, but with small different details.

Let's start.

Come back to the "Apps Registration" menu and click on "New Registration".

Let's call the application "BlazorWASMHosted Client" and from the "Redirect Uri*" section choose "Single-page application*" and insert the value "https://localhost:5001/authentication/login-callback".

Image description

After the app creation, click on "API permissions" on the left navigation pane and then "Add a permission".
Select "Microsoft Graph API" and then click on "Delegated Permissions".

Check all the Openid permissions from the list.
We don't need all of them at the moment, but they are useful if you want to display the information about the user inside the application.

Image description

Click again on "Add a permission" and in the new screen select "My API".

Image description

Check the name of the API that you have created a few steps before.
In our example is called "BlazorWASMHosted.API".

Image description

Click on "Grant the permission for ..." and the name of your tenant.

Image description

Now it's time to come back on Visual Studio 2022 and configure the project with the latest information from Azure AD.

Configure the projects in Visual Studio 2022

Server

Open the file "appsettings.json" and update the section "AzureAd" with the following values:



"AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "aspnetadtutorial.onmicrosoft.com",
    "TenantId": "fbf22b03-0a17-4c1c-8454-9abc4d424be0",
    "ClientId": "957e1304-dd53-4589-b013-4a264dd19334",
    "Scopes": "BlazorWASMHosted.API",
    "CallbackPath": "/signin-oidc"
  }


Enter fullscreen mode Exit fullscreen mode

You can retrieve the information about the TenantId and the ClientId directly fom the App Registration of the Server app.

Client

Open the file "Program.cs" and add the scope in the following section of code:



builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("api://957e1304-dd53-4589-b013-4a264dd19334/BlazorWASMHosted.API");
});


Enter fullscreen mode Exit fullscreen mode

In the file "appsettings.json" of the Client project (under the folder wwwroot), change the value of the Authority with the TenantId.
Update the ClientId with the Client app registration ClientId.



  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/fbf22b03-0a17-4c1c-8454-9abc4d424be0",
    "ClientId": "067c7e53-31e0-4a7b-8cb7-8b5d4b853568",
    "ValidateAuthority": true
  }


Enter fullscreen mode Exit fullscreen mode

Run the Application

Now we are ready to launch the application for a test.
Press "F5" to run the Server project and click on the "Login" link on the top navigation bar of our new web application.
Insert your credentials and KABOOOOM! :)

Image description

To check if everything working well, click on the navigation link "Fetch data" and make sure that the call to the server runs.

Image description

Conclusion

These steps are the very basic implementation to have an application secured with the Azure AD.
With the Blazor helper "AuthorizeView" you can hide or show informations, links or section of your application directly from the razor code.
You can access to the authorization state in every page and component of your application.



<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="BeginLogout">Log out</button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>


Enter fullscreen mode Exit fullscreen mode

Source code

You can find the source code of the example on GitHub.
Follow the instructions in the Readme file.

image

BlazorWASMHostedAzureADAuth

This repository is an example for Blazor WASM Hosted app secured by Azure Active Directory.

There are two different branches.

  • Authorization
  • Roles

You can find the right code based on the two post on my blog with all the steps that you need to replicate these settings in your own projects.

The link to the series: https://dev.to/kasuken/series/17352




Thank you and drop me a comment if you have questions or feedbacks!

Top comments (0)