• Blazor PWA with AAD Authentication
    06/01/2020
  • Azure Durable Functions
    02/22/2019
  • Going Serverless with Azure Functions
    11/05/2017
  • Automated UI Testing in MVC
    02/12/2015
  • SharePoint web.config Modification
    05/23/2012
  • SharePoint 2010 Client Object Model Part 1
    10/13/2011
  • SharePoint 2010 Client Object Model Part 2
    10/13/2011
  • In-place Editing with ASP.NET Repeater
    08/29/2011
  • Custom SharePoint List Forms
    07/11/2011
  • SharePoint 2010 Taxonomy Import
    05/09/2011
  • SharePoint Custom Provisioning Provider
    04/21/2011
  • USING SPMetal
    03/14/2011
  • SharePoint 2010 Site Actions Menu
    11/14/2010
  • Import List VS 2010 SharePoint Extension
    09/24/2010
  • Windows Azure Storage
    05/24/2010
  • Deploy and use SPCopy Part 2
    04/27/2010
  • Using SPExport and SPImport Part 1
    04/13/2010
  • Entity Framework Performance
    10/31/2009
  • WSS List and Database Synchronization
    11/30/2008
  • ASP.NET MVC Part2
    06/05/2008
  • ASP.NET MVC Part 1
    03/23/2008
  • LINQ to XML
    03/14/2008
  • Hierarchical Exception Handling with the Enterprise Library
    10/06/2007
  • Introduction to the Validation Application Block
    02/02/2007
  • CSS Variables
    11/17/2006
  • Custom XPath Functions
    08/28/2006
  • Using SqlDependency for data change events
    11/18/2005
  • Application Suite Template
    02/10/2004
  • ExpandingTable with Design-Time support
    12/13/2003
  • DataGridDemo
    06/15/2002
  • C# Album Viewer
    04/12/2002
  • Screen Scraping with C# for ASP.NET
    03/01/2002
  • XML TIming
    11/03/2001
  • Using XML, XSL, DHTML and Javascript in your Windows applications
    06/24/2001

Blazor Progressive Web Application

with AAD Authentication

6/1/2020

What is a Progressive Web Application?

Progressive Web Applications (PWA) are Web Apps that use modern browser functionality to provide an almost native-like experience for mobile device users without the need to deploy the application to a vender App Store, such as Google Play. A PWA can be “saved” to the desktop and launched without opening a browser.

What is Blazor?

Blazor is the latest web technology from Microsoft. It uses Razor pages and C# to provide functionality without the need for JavaScript frameworks, such as, Angular or Vue. While JavaScript is generally not needed it is fully supported via an interop. Blazor applications come in two flavors, server-side and client-side. Blazor server applications run on the server like a traditional ASP.NET application and uses SignalR for communication between client and server. Blazor Web Assembly applications run completely in the client browser by downloading the necessary assemblies. Although all required assemblies are downloaded, they are very small. PWAs use Blazor Web Assembly.

Building the Application

Start by creating a new poject in Visual Studio

Select Blazor WebAssembly App and check Progressive Web Assembly Application

As I want to support Authentication I’ll also click on the Change link under Authentication. The choice here is easy, only Individual User Accounts is available and the dropdown to the right has only one option.

ASP.NET Core hosted

This option refers to the how the App will be deployed. Checking this box will generate three projects in the solution, a Server, Client and Shared. Both the Server and Client applications will be deployed together and the client app will be served through the server app.

The alternative is a single project in the solution which will be deployed as static contact which can be served from a static file server. I’ll leave the ASP.NET Host option unchecked for this demo.

Authentication

The first thing I’ll do is to update the Authentication for the application. Looking at the Program.cs file we can see the generated code already includes OidcAuthentication with default configuration in the appSettings.json file

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add("app");
    
    builder.Services.AddTransient(sp => new HttpClient 
    { 
        BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
    });
    
    builder.Services.AddOidcAuthentication(options =>
    {
        // Configure your authentication provider options here.
        // For more information, see https://aka.ms/blazor-standalone-auth
        builder.Configuration.Bind("Local", options.ProviderOptions);
    });
    
    await builder.Build().RunAsync();
}
{
    "Local": {
        "Authority": "https:login.microsoftonline.com/",
        "ClientId": "33333333-3333-3333-33333333333333333"
    }
}

The first step is to update appSettings.json with actual settings. I’ll be using Azure Active Directory (AAD) to register the App for authentication and update appSettings.json with the actual ClientId.

The default code that has been generated doesn’t work in this scenario and should be replaced to use MsalAuthentication rather than OidcAuthentication.

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});

The appSetting.json file is updated to include the ClientId from the registered app and the TenantId

{
    "AzureAd": {
        "Authority": "https://login.microsoftonline.com/xxxxx-d330-479d-b0e6-xxxxxx/",
        "ClientId": "xxxxxxx-9beb-4b00-950a-xxxxxx",
        "ValidateAuthority": true
    }
}     

And the JavaScript file to support client authentication added to index.html

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

Interestingly, if the project is created from the command-line, as below, these modifications are not necessary.

dotnet new blazorwasm -au SingleOrg --client-id "" --tenant-id ""

dotnet new blazorwasm -au SingleOrg --client-id "" --tenant-id ""

© MANSoft Development, LLC. All Rights Reserved

An error has occurred. This application may no longer respond until reloaded. Reload 🗙