Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (46)ASP.NET  (48)ASP.NET Core  (59)ASP.NET MVC  (84)Azure  (28)Blazor  (79)DocIO  (18)Essential JS 2  (68)Essential Studio  (161)Flutter  (92)JavaScript  (144)Microsoft  (101)PDF  (55)React  (32)Succinctly series  (120)Syncfusion  (462)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (20)Windows Forms  (54)WPF  (111)Xamarin  (123)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (105)Chart  (46)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (38)Development  (247)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (18)Extensions  (12)File Manager  (3)Gantt  (8)Gauge  (6)Git  (4)Grid  (26)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (198)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (21)Performance  (4)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (21)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (16)Solution Services  (2)Spreadsheet  (6)SQL  (6)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (50)UI  (108)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (18)Visual Studio Code  (10)Web  (175)What's new  (108)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
How to Authenticate a Blazor WebAssembly-Hosted App with Azure Active Directory

How to Authenticate a Blazor WebAssembly-Hosted App with Azure AD

Hello, folks! In this article, we will discuss how to authenticate a Blazor WebAssembly (WASM) application with Azure AD (Active Directory) and its working principles. Blazor is an open-source framework for developing web apps using C# and HTML. Many modern web developers like to work with it because of its versatility.

Blazor WebAssembly uses open web standards to run and execute the .NET code directly in the browser sandbox using .NET runtime, which provides maximum execution speed in the client side. Securing our application from unauthorized access is a priority while handling our apps since authorization checks can be bypassed by modifying all the client-side code at the end-user level.

In this scenario, the best approach for securing single-page applications (SPA) is to perform authorization checks on the server side using any API endpoint based on the OAuth 2.0 protocol, such as OpenID Connect (OIDC) or Azure Active Directory (AAD).

Let’s discuss the step-by-step procedures to authenticate our Blazor WebAssembly applications with Azure AD (Active Directory).

Prerequisites

In this blog, I have used Visual Studio 2019 to build an application. This software is required for you to follow along:

Creating a Blazor WebAssembly application

Follow these steps to create a Blazor WebAssembly hosted application:

  1. Open Visual Studio 2019 and choose Create a new project.
    Open Visual Studio 2019 and choose Create a new project
  2. Select Blazor App from the list and click Next.
    Select Blazor App from the list and click Next
  3. Enter your project name and click Create. In my example, I’ve used the name BlazorWASMAuthApp.
    Enter your project name and click Create
  4. Then, select Blazor WebAssembly App from the list and check the Configure for HTTPS and ASP.NET Core hosted check boxes. Then, select Create.
    select Blazor WebAssembly App from the list and check the Configure for HTTPS and ASP.NET Core hosted check boxes

 

The Blazor WebAssembly application will be created with three projects (client, server, and shared), as shown in the following screenshot.
Blazor WASM application will be created with three projects (client, server, and shared)

Default sample demo

Created sample demo

Securing a Blazor WebAssembly-hosted application with Azure Active Directory (AAD)

We have created the Blazor WebAssembly application. Now, let’s add the configuration to authenticate the Blazor WebAssembly app with AAD for a single organization, like for a work or school account.

First, we need to register our server API and client app in the Microsoft identity platform in the Azure portal to get the Application ClientID and tenantID and set the required configuration like redirect URL and other details.

Check out the register server API link and client app link for how to do this.

Configuring server app

In this section, we are going to set up the authentication for calls to our APIs and its configurations.

  1. First, install the NuGet package Microsoft.AspNetCore.Authentication.AzureAD.UI, which is used for authenticating API calls.Refer to the following screenshot.
    Install the NuGet package Microsoft.AspNetCore.Authentication.AzureAD.UI
  2. Use the following configuration to set up the authentication service and configure the JWT bearer handler in the Startup.cs file.

    Startup.cs

    using Microsoft.AspNetCore.Authentication.AzureAD.UI;
    using Microsoft.AspNetCore.Authentication;
    
    //…
    
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
        .AddAzureADBearer(options => Configuration.Bind("AzureAd", options));
        //...
    }
    
    //…
    
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        //...
        app.UseRouting();
    
        app.UseAuthentication();
        app.UseAuthorization();
    
        app.UseEndpoints(endpoints =>
        {
            //...
        });
    }
  3. Then, configure the options for the JWT bearer handler in the appsettings.json file as shown in the following code. You can replace the {DOMAIN}, {TENANT ID}, and {SERVER API APP CLIENT ID} with the values you obtained from the AAD.Refer to this link for more details.

    appsettings.json

    {
      "AzureAd": {
        "Instance": "https://login.microsoftonline.com/",
        "Domain": "{DOMAIN}",
        "TenantId": "{TENANT ID}",
        "ClientId": "{SERVER API APP CLIENT ID}",
       }
    }
  4. The final step is to protect the API’s call from unauthorized users by defining the [Authorize] attribute in the controller.WeatherForecastController.cs
    using Microsoft.AspNetCore.Authorization;
    
    //…
    
    [Authorize]
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        //...
    }

Configuring client app

In this section, we are going to set up the user authentication settings and UI configuration changes:

  1. Install the NuGet package Microsoft.Authentication.WebAssembly.Msal to authenticate your application using NuGet Manager.
    Install the NuGet package Microsoft.Authentication.WebAssembly.Msal
    You can refer to this documentation for more details.
  2. Add the following configuration to include the Msal authentication service with your application. Also, ensure that the Microsoft.Extensions.Http package is installed in your application.
    Program.cs

    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
    
        //...
       
       builder.Services.AddHttpClient("BlazorWASMAuthApp.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
          .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
    
       builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
            .CreateClient("BlazorWASMAuthApp.ServerAPI"));
    
       builder.Services.AddMsalAuthentication(options =>
       {
              builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
              options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
        });
    
        await builder.Build().RunAsync();
    }

    Replace {SCOPE URI} with your server client ID along with the scope name.

    Check out this documentation for more details.

  3.  Create and add the following configuration options for app authentication in the wwwroot/appsettings.json file. Replace the {TENANT ID} and {CLIENT APP CLIENT ID} with the values you obtained from the AAD configuration.
    {
      "AzureAd": {
        "Authority": "https://login.microsoftonline.com/{TENANT ID}",
        "ClientId": "{CLIENT APP CLIENT ID}",
        "ValidateAuthority": true
      }
    }
  4. Include the authentication-service-defined script reference to enable the app internal calls to perform the authentication process.
    //...
    <script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
    
    <script src="_framework/blazor.webassembly.js"></script>
  5. Then, import these two namespaces to make their references available throughout the application.
    @using System.Net.Http
    @using System.Net.Http.Json
    @using Microsoft.AspNetCore.Authorization
    @using Microsoft.AspNetCore.Components.Authorization
    //...

Client app UI changes

Almost done! We have finished the configuration changes. Let’s do the UI changes to complete it.

  1. Configure the App component to provide an access page only for authorized users or to show the login message.

    App.razor

    <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        <h1>Sorry!!</h1>
                        <p>
                            You are not authorized to access this page. Please log in.
                        </p>
                    </NotAuthorized>
                </AuthorizeRouteView>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
    </CascadingAuthenticationState>
  2. Enable the authentication by injecting the [Authorize] attribute to the Razor pages (Counter.razor and FetchData.razor).
    @page "/counter"
    @attribute [Authorize]
    //…
  3. Then, create the LoginDisplay component under the Shared folder and Authentication component under the Pages folder with these updated code snippets.

    Shared/LoginDisplay.razor

    @using Microsoft.AspNetCore.Components.Authorization
    @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
    @inject NavigationManager Navigation
    @inject SignOutSessionStateManager SignOutManager
    
    <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>
    
    @code {
        private async Task BeginLogout(MouseEventArgs args)
        {
            await SignOutManager.SetSignOutState();
            Navigation.NavigateTo("authentication/logout");
        }
    }

    Pages/Authentication.razor

    @page "/authentication/{action}"
    @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
    
    <RemoteAuthenticatorView Action="@Action" />
    
    @code {
        [Parameter]
        public string Action { get; set; }
    }
  4.  Finally, add the created LoginDisplay component to the MainLayout.razor page.
    //…
    
    <div class="top-row px-4">
        <LoginDisplay />
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>
    
    //…

Run the application

Let’s run the app from the server project. You can see the demo of the runnable application in the GIF image.

Our authentication sample demo
Blazor Azure AD authentication example app

GitHub Sample

You can download the complete source code of this example from this GitHub location.

Conclusion

In this blog post, we have learned how to secure a Blazor-WebAssembly-hosted application with Azure AD (Active Directory) authentication. In this way, you can secure your app with minimal lines of code.

Syncfusion provides more than 65 high-performance, lightweight, modular, and responsive Blazor UI controls such as DataGridCharts, and Scheduler to ease the work of developers. Check them out!

If you have any questions or feedback, please leave your valuable comments in the comments section below.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you! Have a good day!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (2)

Would love an article on WASM, Azure B2C, and role/policy authorization. Virtually non-existent information out there, especially concerning B2C and role authorization.

Silambarasan Ilango

Thanks for your valuable feedback. We will consider these topics (Azure B2C & Role Authorization) and added it in our list.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top