From a619c192e374b70dae49a6a11f510bd2ed2f1eaa Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Wed, 25 Mar 2026 17:37:59 +0530 Subject: [PATCH 1/5] 1011191: Blazor with Microsoft Entra ID Authentication --- blazor-toc.html | 3 + .../blazor-microsoft-entra-id.md | 278 ++++++++++++++++++ 2 files changed, 281 insertions(+) create mode 100644 blazor/common/authentication/blazor-microsoft-entra-id.md diff --git a/blazor-toc.html b/blazor-toc.html index 765cf3c758..67ca0bb205 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -401,6 +401,9 @@
  • Blazor with OAuth 2.0 Authentication
    • +
  • + Blazor with Microsoft Entra ID Authentication +
  • Integration with Other Syncfusion Products diff --git a/blazor/common/authentication/blazor-microsoft-entra-id.md b/blazor/common/authentication/blazor-microsoft-entra-id.md new file mode 100644 index 0000000000..62e6b548cb --- /dev/null +++ b/blazor/common/authentication/blazor-microsoft-entra-id.md @@ -0,0 +1,278 @@ +--- +layout: post +title: Using Syncfusion Blazor DataGrid with Microsoft Entra ID +description: Step-by-step guide to integrating Microsoft Entra ID authentication with Syncfusion Blazor components in a Blazor Web App. +platform: Blazor +control: Common +documentation: ug +--- + +# Blazor with Microsoft Entra ID Authentication + +This document explains how to build a **Blazor Web App (Interactive Server)** that uses **Microsoft Entra ID** (formerly Azure Active Directory) for user authentication. Once users log in with their Microsoft account, they will be able to access a protected page that includes the Syncfusion Blazor DataGrid component. + +## What is Microsoft Entra ID? + +Microsoft Entra ID is Microsoft’s identity platform that allows users to securely sign in to applications using their Microsoft account. + +**Benefits of using Entra ID in Blazor applications** + +- Secure login using Microsoft accounts +- Single Sign‑On (SSO) +- Token‑based authentication +- No password storage in your app +- Role‑based and group‑based authorization +- Enterprise‑grade security + +With Entra ID, you do not need to write authentication logic manually. Microsoft handles the security for you. + +## Prerequisites + +- [.NET SDK 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later +- Visual Studio 2022 or newer +- Azure subscription + +## Create a Blazor Web App (Interactive server) + +1. Open **Visual Studio**. +2. Select **Create a new project**. +3. In the Create a new project dialog. + - Choose **Blazor Web App** + - Click **Next** +4. In Configure your new project. + - Enter a **Project name** + - Choose a **Location** + - Click **Next** +5. In the Additional information screen, configure the following. + - **Framework**: Select **.NET 8.0** (or .NET (Latest) if available in your Visual Studio version) + - **Authentication type**: Select **None** (authentication will be configured manually) + - **Interactive render mode**: Select **Server** + - **Interactivity location**: Select **Per page/component** + - **Enable HTTPS** +6. Click **Create** to generate the Blazor Web App. + +## Register Your App in Microsoft Entra ID (Azure Portal) + +This step registers the Blazor application in Azure so Microsoft Entra ID can authenticate users. + +1. Open [Azure Portal](https://portal.azure.com) +2. Go to **Microsoft Entra ID** → **App registrations** +3. Click **New registration** +4. Enter **App name** and select **Single tenant** +5. Click **Register** + +After registration, note the following values: +- **Application (Client) ID** +- **Directory (Tenant) ID** + +These values are required in the application configuration. + +## Configure Redirect URLs + +Redirect URLs specify where Microsoft Entra ID should return the user after a successful login. + +1. Open the registered application in Azure Portal +2. Navigate to **Authentication** +3. Click **Add a platform** and select **Web** +4. Add the redirect URL: (example: https://localhost:5001/signin-oidc) // (Use your application’s HTTPS URL if different.) +5. Enable **ID tokens** +6. Save the changes + +## Configure Azure AD settings in appsettings.json + +This step stores Microsoft Entra ID configuration values so the Blazor app can read them at runtime. +After copying the **Tenant ID** and **Client ID**, update the `appsettings.json` file as shown below. + +```json +"AzureAd": { + "Instance": "https://login.microsoftonline.com/", + "TenantId": "", + "ClientId": "", + "CallbackPath": "/signin-oidc" +} +``` + +## Configure Microsoft Entra ID authentication in Blazor + +This step enables OpenID Connect authentication using Microsoft Entra ID. + +{% tabs %} +{% highlight c# tabtitle="Program.cs" %} + +using Microsoft_Entra_ID.Components; +using Microsoft.Identity.Web; +using Microsoft.Identity.Web.UI; +using Microsoft.AspNetCore.Authentication.OpenIdConnect; +using Microsoft.AspNetCore.Http; + +var builder = WebApplication.CreateBuilder(args); + +// Configure authentication with Microsoft Entra ID (Azure AD) +// Ensure configuration contains a path-only CallbackPath (avoid full-URL overrides) +builder.Configuration["AzureAd:CallbackPath"] = "/signin-oidc"; + +builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme) + .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd")); + +// Ensure the OIDC callback path is set to a path-only value to avoid config binding errors +builder.Services.Configure(OpenIdConnectDefaults.AuthenticationScheme, options => +{ + options.CallbackPath = new PathString("/signin-oidc"); +}); + +builder.Services.AddAuthorization(options => +{ + // Example role policy; ensure roles are configured in the Azure app manifest or via groups + options.AddPolicy("RequireAdmin", policy => policy.RequireRole("Admin")); +}); + +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); + +// Add controllers with UI endpoints for Microsoft Identity (SignIn/SignOut) +builder.Services.AddControllersWithViews().AddMicrosoftIdentityUI(); + +var app = builder.Build(); + +// Configure the HTTP request pipeline. +if (!app.Environment.IsDevelopment()) +{ + app.UseExceptionHandler("/Error", createScopeForErrors: true); + app.UseHsts(); +} + +app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true); +app.UseHttpsRedirection(); +app.UseAuthentication(); +app.UseAuthorization(); +app.MapControllers(); +app.UseAntiforgery(); +app.MapStaticAssets(); +app.MapRazorComponents() + .AddInteractiveServerRenderMode(); +app.Run(); + +{% endhighlight %} +{% endtabs %} + +## Enabling authentication state in Blazor + +This step allows Blazor components to access the current user’s authentication state. + +@using Microsoft.AspNetCore.Components.Authorization + + + + + + + + + +## Connect Syncfusion Blazor DataGrid + +**1. Install Syncfusion® Blazor DataGrid and themes NuGet packages** + +To add the Blazor DataGrid in the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). + +**2. Add import namespaces** + +Open the **~/_Imports.razor** file and import the required namespaces. + +{% tabs %} +{% highlight razor tabtitle="~/_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Grids + +{% endhighlight %} +{% endtabs %} + +**3. Register the Syncfusion® Blazor service in the `~/Program.cs` file** + +{% tabs %} +{% highlight razor tabtitle="~/Program.cs" %} + +// Program.cs +using Syncfusion.Blazor; + +builder.Services.AddSyncfusionBlazor(); + +{% endhighlight %} +{% endtabs %} + +**4. Add stylesheet and script resources** + +Include the theme stylesheet and script references in the `App.razor` file. + +{% tabs %} +{% highlight html %} + + + + +.... + + + + +{% endhighlight %} +{% endtabs %} + +**5. Create a protected page with Syncfusion DataGrid** + +This section creates a protected page that displays the Syncfusion DataGrid only after the user successfully signs in with Microsoft Entra ID. + +{% tabs %} +{% highlight razor %} + +@page "/" +@using Microsoft.AspNetCore.Components.Authorization + +Home + + + +
    +

    Welcome!

    +

    + Click the Login button below to sign in with Microsoft Entra ID. + Once you’re logged in, the Syncfusion DataGrid will be displayed below. +

    + Login with Microsoft +
    +     + +
    +

    DataGrid

    + Logout
    + @using Syncfusion.Blazor.Grids + + + + @code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = Enumerable.Range(1, 5).Select(x => new Order + { + OrderID = x, + CustomerID = new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" }[new Random().Next(5)] + }).ToList(); + } + + public class Order + { + public int OrderID { get; set; } + public string CustomerID { get; set; } + } + } +     +     + +{% endhighlight %} +{% endtabs %} + +This example demonstrates how to integrate Microsoft Entra ID authentication into a Blazor Web App using the Microsoft Identity platform. The application securely signs users in through Entra ID and manages the authentication lifecycle using OpenID Connect. After successfully signing in, authenticated users can access protected pages and interact with the Syncfusion Blazor DataGrid component.This approach provides a secure, enterprise-ready foundation for building modern Blazor applications with controlled access to data and UI components. \ No newline at end of file From 8053175647c5d9d470399f19ce6ab5ca7af44b88 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Wed, 25 Mar 2026 18:01:18 +0530 Subject: [PATCH 2/5] Updated the md file --- blazor-toc.html | 2 +- .../blazor-microsoft-entra-id.md | 19 ++++++++++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/blazor-toc.html b/blazor-toc.html index 67ca0bb205..37659e23a3 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -402,7 +402,7 @@ Blazor with OAuth 2.0 Authentication
  • - Blazor with Microsoft Entra ID Authentication + Blazor with Microsoft Entra ID Authentication
    • diff --git a/blazor/common/authentication/blazor-microsoft-entra-id.md b/blazor/common/authentication/blazor-microsoft-entra-id.md index 62e6b548cb..775b8b78a0 100644 --- a/blazor/common/authentication/blazor-microsoft-entra-id.md +++ b/blazor/common/authentication/blazor-microsoft-entra-id.md @@ -9,7 +9,7 @@ documentation: ug # Blazor with Microsoft Entra ID Authentication -This document explains how to build a **Blazor Web App (Interactive Server)** that uses **Microsoft Entra ID** (formerly Azure Active Directory) for user authentication. Once users log in with their Microsoft account, they will be able to access a protected page that includes the Syncfusion Blazor DataGrid component. +This document explains how to build a **Blazor Web App (Interactive Server)** that uses **Microsoft Entra ID** (formerly Azure Active Directory) for user authentication. Once users log in with their Microsoft account, they will be able to access a protected page that includes the [Syncfusion Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component. ## What is Microsoft Entra ID? @@ -51,7 +51,7 @@ With Entra ID, you do not need to write authentication logic manually. Microsoft - **Enable HTTPS** 6. Click **Create** to generate the Blazor Web App. -## Register Your App in Microsoft Entra ID (Azure Portal) +## Register your app in Microsoft Entra ID (Azure Portal) This step registers the Blazor application in Azure so Microsoft Entra ID can authenticate users. @@ -67,7 +67,7 @@ After registration, note the following values: These values are required in the application configuration. -## Configure Redirect URLs +## Configure redirect URLs Redirect URLs specify where Microsoft Entra ID should return the user after a successful login. @@ -92,9 +92,18 @@ After copying the **Tenant ID** and **Client ID**, update the `appsettings.json` } ``` +## Install Microsoft Identity packages + +1. In Visual Studio, go to **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** +2. Search and install the following packages: +* Microsoft.Identity.Web +* Microsoft.Identity.Web.UI + +These packages are required to connect the Blazor application with Microsoft Entra ID and to enable the built‑in sign‑in and sign‑out endpoints. + ## Configure Microsoft Entra ID authentication in Blazor -This step enables OpenID Connect authentication using Microsoft Entra ID. +This step enables OpenID Connect authentication in the Blazor application by configuring Microsoft Entra ID settings in the `Program.cs` file. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -157,7 +166,7 @@ app.Run(); ## Enabling authentication state in Blazor -This step allows Blazor components to access the current user’s authentication state. +This step allows Blazor components to access the current user’s authentication state by configuring the `~/Components/Routes.razor` file. @using Microsoft.AspNetCore.Components.Authorization From a2fa78b19275137215107061c61d5d5366e37ffa Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Thu, 26 Mar 2026 12:38:35 +0530 Subject: [PATCH 3/5] Updated the md file --- .../blazor-microsoft-entra-id.md | 50 ++++++++++--------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/blazor/common/authentication/blazor-microsoft-entra-id.md b/blazor/common/authentication/blazor-microsoft-entra-id.md index 775b8b78a0..402873f928 100644 --- a/blazor/common/authentication/blazor-microsoft-entra-id.md +++ b/blazor/common/authentication/blazor-microsoft-entra-id.md @@ -1,6 +1,6 @@ --- layout: post -title: Using Syncfusion Blazor DataGrid with Microsoft Entra ID +title: Syncfusion Blazor DataGrid with Microsoft Entra ID Authentication description: Step-by-step guide to integrating Microsoft Entra ID authentication with Syncfusion Blazor components in a Blazor Web App. platform: Blazor control: Common @@ -32,23 +32,23 @@ With Entra ID, you do not need to write authentication logic manually. Microsoft - Visual Studio 2022 or newer - Azure subscription -## Create a Blazor Web App (Interactive server) +## Create a Blazor Web App (Interactive Server) 1. Open **Visual Studio**. 2. Select **Create a new project**. 3. In the Create a new project dialog. - - Choose **Blazor Web App** - - Click **Next** + - Choose **Blazor Web App** + - Click **Next** 4. In Configure your new project. - - Enter a **Project name** - - Choose a **Location** - - Click **Next** + - Enter a **Project name** + - Choose a **Location** + - Click **Next** 5. In the Additional information screen, configure the following. - - **Framework**: Select **.NET 8.0** (or .NET (Latest) if available in your Visual Studio version) - - **Authentication type**: Select **None** (authentication will be configured manually) - - **Interactive render mode**: Select **Server** - - **Interactivity location**: Select **Per page/component** - - **Enable HTTPS** + - **Framework**: Select **.NET 8.0** (or .NET (Latest) if available in your Visual Studio version) + - **Authentication type**: Select **None** (authentication will be configured manually) + - **Interactive render mode**: Select **Server** + - **Interactivity location**: Select **Per page/component** + - **Enable HTTPS** 6. Click **Create** to generate the Blazor Web App. ## Register your app in Microsoft Entra ID (Azure Portal) @@ -74,7 +74,7 @@ Redirect URLs specify where Microsoft Entra ID should return the user after a su 1. Open the registered application in Azure Portal 2. Navigate to **Authentication** 3. Click **Add a platform** and select **Web** -4. Add the redirect URL: (example: https://localhost:5001/signin-oidc) // (Use your application’s HTTPS URL if different.) +4. Add the redirect URL: `https://localhost:5001/signin-oidc` (Use your application’s HTTPS URL if different.) 5. Enable **ID tokens** 6. Save the changes @@ -96,8 +96,8 @@ After copying the **Tenant ID** and **Client ID**, update the `appsettings.json` 1. In Visual Studio, go to **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** 2. Search and install the following packages: -* Microsoft.Identity.Web -* Microsoft.Identity.Web.UI + - Microsoft.Identity.Web + - Microsoft.Identity.Web.UI These packages are required to connect the Blazor application with Microsoft Entra ID and to enable the built‑in sign‑in and sign‑out endpoints. @@ -108,7 +108,6 @@ This step enables OpenID Connect authentication in the Blazor application by con {% tabs %} {% highlight c# tabtitle="Program.cs" %} -using Microsoft_Entra_ID.Components; using Microsoft.Identity.Web; using Microsoft.Identity.Web.UI; using Microsoft.AspNetCore.Authentication.OpenIdConnect; @@ -129,11 +128,7 @@ builder.Services.Configure(OpenIdConnectDefaults.Authentic options.CallbackPath = new PathString("/signin-oidc"); }); -builder.Services.AddAuthorization(options => -{ - // Example role policy; ensure roles are configured in the Azure app manifest or via groups - options.AddPolicy("RequireAdmin", policy => policy.RequireRole("Admin")); -}); +builder.Services.AddAuthorization(); builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); @@ -168,6 +163,9 @@ app.Run(); This step allows Blazor components to access the current user’s authentication state by configuring the `~/Components/Routes.razor` file. +{% tabs %} +{% highlight razor tabtitle="Routes.razor" %} + @using Microsoft.AspNetCore.Components.Authorization @@ -179,6 +177,9 @@ This step allows Blazor components to access the current user’s authentication +{% endhighlight %} +{% endtabs %} + ## Connect Syncfusion Blazor DataGrid **1. Install Syncfusion® Blazor DataGrid and themes NuGet packages** @@ -203,7 +204,6 @@ Open the **~/_Imports.razor** file and import the required namespaces. {% tabs %} {% highlight razor tabtitle="~/Program.cs" %} -// Program.cs using Syncfusion.Blazor; builder.Services.AddSyncfusionBlazor(); @@ -284,4 +284,8 @@ This section creates a protected page that displays the Syncfusion DataGrid only {% endhighlight %} {% endtabs %} -This example demonstrates how to integrate Microsoft Entra ID authentication into a Blazor Web App using the Microsoft Identity platform. The application securely signs users in through Entra ID and manages the authentication lifecycle using OpenID Connect. After successfully signing in, authenticated users can access protected pages and interact with the Syncfusion Blazor DataGrid component.This approach provides a secure, enterprise-ready foundation for building modern Blazor applications with controlled access to data and UI components. \ No newline at end of file +This example demonstrates how to integrate Microsoft Entra ID authentication into a Blazor Web App using the Microsoft Identity platform. The application securely signs users in through Entra ID and manages the authentication lifecycle using OpenID Connect. After successfully signing in, authenticated users can access protected pages and interact with the Syncfusion Blazor DataGrid component.This approach provides a secure, enterprise-ready foundation for building modern Blazor applications with controlled access to data and UI components. + +## See also + +- [Secure an ASP.NET Core Blazor WebAssembly standalone app with Microsoft Accounts](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-accounts?view=aspnetcore-8.0) \ No newline at end of file From 5d03d4e959b4b00dd4ef1c15c11470db255f35c2 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Thu, 26 Mar 2026 15:52:01 +0530 Subject: [PATCH 4/5] Updated the md file --- .../authentication/blazor-microsoft-entra-id.md | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/blazor/common/authentication/blazor-microsoft-entra-id.md b/blazor/common/authentication/blazor-microsoft-entra-id.md index 402873f928..3c62b39937 100644 --- a/blazor/common/authentication/blazor-microsoft-entra-id.md +++ b/blazor/common/authentication/blazor-microsoft-entra-id.md @@ -116,18 +116,9 @@ using Microsoft.AspNetCore.Http; var builder = WebApplication.CreateBuilder(args); // Configure authentication with Microsoft Entra ID (Azure AD) -// Ensure configuration contains a path-only CallbackPath (avoid full-URL overrides) -builder.Configuration["AzureAd:CallbackPath"] = "/signin-oidc"; - builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme) .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd")); -// Ensure the OIDC callback path is set to a path-only value to avoid config binding errors -builder.Services.Configure(OpenIdConnectDefaults.AuthenticationScheme, options => -{ - options.CallbackPath = new PathString("/signin-oidc"); -}); - builder.Services.AddAuthorization(); builder.Services.AddRazorComponents() @@ -237,6 +228,7 @@ This section creates a protected page that displays the Syncfusion DataGrid only {% highlight razor %} @page "/" +@rendermode InteractiveServer @using Microsoft.AspNetCore.Components.Authorization Home @@ -256,7 +248,6 @@ This section creates a protected page that displays the Syncfusion DataGrid only

    DataGrid

    Logout
    - @using Syncfusion.Blazor.Grids @@ -284,8 +275,8 @@ This section creates a protected page that displays the Syncfusion DataGrid only {% endhighlight %} {% endtabs %} -This example demonstrates how to integrate Microsoft Entra ID authentication into a Blazor Web App using the Microsoft Identity platform. The application securely signs users in through Entra ID and manages the authentication lifecycle using OpenID Connect. After successfully signing in, authenticated users can access protected pages and interact with the Syncfusion Blazor DataGrid component.This approach provides a secure, enterprise-ready foundation for building modern Blazor applications with controlled access to data and UI components. +This example demonstrates how to integrate Microsoft Entra ID authentication into a Blazor Web App using the Microsoft Identity platform. The application securely signs users in through Entra ID and manages the authentication lifecycle using OpenID Connect. After successfully signing in, authenticated users can access protected pages and interact with the Syncfusion Blazor DataGrid component. This approach provides a secure, enterprise-ready foundation for building modern Blazor applications with controlled access to data and UI components. ## See also -- [Secure an ASP.NET Core Blazor WebAssembly standalone app with Microsoft Accounts](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-accounts?view=aspnetcore-8.0) \ No newline at end of file +- [Secure an ASP.NET Core Blazor WebAssembly standalone app with Microsoft Accounts](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-accounts?view=aspnetcore-8.0) From 65ba5d2a657f07e2ee908d4d9c9cf06851d56eaf Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Thu, 26 Mar 2026 16:00:47 +0530 Subject: [PATCH 5/5] Updated the md file --- blazor/common/authentication/blazor-microsoft-entra-id.md | 1 + 1 file changed, 1 insertion(+) diff --git a/blazor/common/authentication/blazor-microsoft-entra-id.md b/blazor/common/authentication/blazor-microsoft-entra-id.md index 3c62b39937..b63a888f58 100644 --- a/blazor/common/authentication/blazor-microsoft-entra-id.md +++ b/blazor/common/authentication/blazor-microsoft-entra-id.md @@ -280,3 +280,4 @@ This example demonstrates how to integrate Microsoft Entra ID authentication int ## See also - [Secure an ASP.NET Core Blazor WebAssembly standalone app with Microsoft Accounts](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-accounts?view=aspnetcore-8.0) +