Follow the steps below to start using Blazorade MSAL in your Blazor application. The list below summarizes the steps that are then described in more detail in the chapters below.

1. Register your application with Azure AD
2. Add reference to Blazorade MSAL
3. Configure Blazorade MSAL for your application
4. Using Blazorade MSAL to Acquire Tokens

The first thing you need to do is to register your application with Azure AD. This is required for any application that wants to use access tokens or identity tokens issued by Azure AD.

When you register your application, you should select the Single Page Application platform. The redirect URI you specify should be set to the root URI of your application, i.e. https://yoursite.com/.

If you are using the redirect mode in Blazorade MSAL, then the redirect URI that you configure in Blazorade MSAL must also be specified as redirect URI for your Azure AD application registration.

For details, follow this documentation and use the MSAL 2.0 auth code flow in your application.

The easiest way to include Blazorade MSAL in your application is to use it from Nuget. Since it is also published as open source on GitHub, you can include the Blazorade MSAL repository as a sub module in your repository.

Blazorade MSAL is configured using Dependency Injection in your application's startup routines. In a Blazor server application, you typically do this in the Startup.cs file. In Blazor WebAssembly applications, you normally do this in Program.cs.

The code below shows how you do it in the Startup class in a Blazor Server application.

public void ConfigureServices(IServiceCollection services)
{
    services
        .AddRazorPages().Services
        .AddServerSideBlazor().Services
        .AddBlazoradeMsal((sp, o) =>
        {
            var root = sp.GetService<IConfiguration>();
            var config = root.GetSection("myAppConfig");
            o.ClientId = config.GetValue<string>("clientId");
            o.TenantId = config.GetValue<string>("tenantId");

            o.DefaultScopes = new string[] { "User.Read" };
            o.LogoutUrl = "/loggedout";
            o.InteractiveLoginMode = InteractiveLoginMode.Popup;
            o.TokenCacheScope = TokenCacheScope.Persistent;
        });
}

This code assumes that your application settings file would contain the following JSON.

{
    "myAppConfig": {
        "clientId": "<You application's client ID>",
        "tenantId": "<tenant name>.onmicrosoft.com"
    }
}

For details on the options for configuring Blazorade MSAL, see BlazoradeMsalOptions.

Starting from version 2.2.0, Blazorade MSAL has added support for easily configure your application to have your users signing in with Azure AD B2C.

The configuration is pretty much similar to the one shown above, with some minor differences.

Let's start with the application settings file.

{
    "myAppConfig": {
        "clientId": "<You application's client ID>",
        "tenantId": "<B2C tenant name>.onmicrosoft.com",
        "policyId": "<Signin policy ID>"
    }
}

Then in your Startup.cs or Program.cs file, you add the following.

public void ConfigureServices(IServiceCollection services)
{
    services
        .AddRazorPages().Services
        .AddServerSideBlazor().Services
        .AddBlazoradeMsal((sp, o) =>
        {
            var root = sp.GetService<IConfiguration>();
            var config = root.GetSection("myAppConfig");
            o.ClientId = config.GetValue<string>("clientId");
            o.TenantId = config.GetValue<string>("tenantId");
            o.EndpointId = config.GetValue<string>("policyId");
            o.AuthorityType = AuthorityType.AADB2C;

            // The rest of the options shown in the previous example
            // still apply, but are left our for clarity.
        });
}

Now when you run your application and use the BlazoradeMsalService class to acquire tokens, your users will be sent to Azure AD B2C for signing in.

After you have configured Blazorade MSAL for your application, you can start using it in your code. For details, see the BlazoradeMsalService class.

The Blazorade MSAL repository contains several sample applications that show you how you can use Blazorade MSAL in your application.