diff --git a/blazor/getting-started/blazor-web-app-authentication.md b/blazor/getting-started/blazor-web-app-authentication.md index 9406917298..51817afd3a 100644 --- a/blazor/getting-started/blazor-web-app-authentication.md +++ b/blazor/getting-started/blazor-web-app-authentication.md @@ -1,47 +1,39 @@ --- layout: post -title: Blazor Web App with Authentication | Syncfusion -description: Check out the documentation for getting started with Blazor Web App and Syncfusion Blazor Components with Authentication. +title: Getting Started with Blazor Web App Authentication | Syncfusion +description: Check out the documentation for getting started with Blazor Web App and Blazor Components with Authentication. platform: Blazor component: Common documentation: ug --- -# Getting Started with Blazor Web App with Authentication +# Getting Started with Blazor Web App Authentication -This guide demonstrates how to build a **Blazor Web App with authentication** using **.NET 9** or **.NET 10**. It uses the built-in `AuthenticationStateProvider` to retrieve and manage user identity details from the application's authentication context, enabling secure and consistent user state handling across components. +This guide explains how to create a Blazor Web App with authentication enabled. You will learn how to use the built-in `AuthenticationStateProvider` to manage user identity and integrate the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component for authenticated users. -## Prerequisites +## Create a new Blazor Web App -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +To create a new Blazor Web App, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code). -## Create a new Blazor Web App in Visual Studio - -* Open Visual Studio 2022 and select **Create a new project** from the start screen. - -![Create-new-project](images/create-project.webp) - -## Choose Project Template - -* Select the **Blazor Web App** template using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), and then click **Next**. - -![Create-blazor-web-app-template](images/blazor-web-template.webp) - -## Configure Project Settings - -* In the project configuration settings, choose **Blazor Server, WebAssembly, or Auto** as the render mode. Ensure the **Configure for HTTPS** option is enabled, and select **Individual Accounts** as the authentication type before clicking **Create**. This enables authentication support without persisting user data in a local database. +Ensure the **Configure for HTTPS** option is enabled, and select **Individual Accounts** as the authentication type. This enables authentication support without persisting user data in a local database. ![Project-setting](images/project-setting.webp) -## Finalize Project Creation +If using Visual Studio Code, run the following commands in your command-line interface (CLI): + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} -Click **Create** to generate the Blazor Web App. After the project is created, run the app and locate the **Register** button. +dotnet new blazor -o BlazorAppAuthentication --interactivity Server --auth Individual +cd BlazorAppAuthentication +dotnet run -![Click-register](images/register-button.webp) +{% endhighlight %} +{% endtabs %} ## Register a User -* Enter the required details, such as **email address** and **password**, in the registration form, and then click **Register** to complete account creation. +After creating the project, run the application. On the registration page, click the **Register** button. Enter your **email address** and **password**, then click **Register** to create a new account. ![Enter-register-details](images/register-details.webp) @@ -53,84 +45,98 @@ After registration completes, click **Apply Migrations** to create the database ## Verify Login -After migrations are applied, refresh the page. The home page displays the signed-in user’s email address and a **Logout** option. +Once migrations are complete, refresh the page. You should see your email address displayed and a **Logout** option, confirming you are signed in. ![Verify-login](images/verify-login.webp) -Syncfusion® Blazor components can be integrated within the **AuthorizeView** component as shown in the following steps. +## Integrating Blazor component -## Install Syncfusion® Blazor Calendars and Themes NuGet in the App +Blazor components can be integrated within the **AuthorizeView** component as shown in the following steps. -To add the **Blazor Calendar** component to your application, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). Search and install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages. +### Install NuGet packages -Alternatively, install the packages by using the following command in the **Package Manager Console**: +To add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component to your application, open the NuGet Package Manager in Visual Studio **(*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*)**. Search and install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages. + +Alternatively, install the required packages by using the following .NET CLI commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight bash tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. +### Register Blazor Service -## Register Syncfusion® Blazor Service +Register the Blazor service in the **~/Program.cs** file of the Blazor Web App. -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. +{% tabs %} +{% highlight c# tabtitle="Program.cs" %} -```cshtml +using Syncfusion.Blazor; +.... +builder.Services.AddSyncfusionBlazor(); +.... -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Calendars +{% endhighlight %} +{% endtabs %} -``` +### Add required namespaces -Then, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. +Open the `~/_Imports.razor` file and import the namespaces. -```cshtml +{% tabs %} +{% highlight razor tabtitle="~/_Imports.razor" %} -.... -using Syncfusion.Blazor; -.... -builder.Services.AddSyncfusionBlazor(); -.... +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Grids -``` +{% endhighlight %} +{% endtabs %} -## Add stylesheet and script resources +### Add stylesheet and script resources -The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). To include them in the application, add the stylesheet reference within the section and the script reference just before the closing tag, as shown below. +Include the theme stylesheet and script references in the `App.razor` file. -* For **.NET 10, .NET 9 and .NET 8** Blazor Web App, include these references in the **~/Components/App.razor** file. +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -```html .... - + + + .... .... + + .... -``` -N> For more information on theming options, refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) documentation, which covers various methods such as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) for referencing themes in your Blazor application. - -Additionally, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different approaches for including script references in a Blazor project. +{% endhighlight %} +{% endtabs %} -## Add Syncfusion® Blazor component +### Add Blazor component -Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file within an `AuthorizeView`. +Add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in the **~/Pages/Home.razor** file within an `AuthorizeView`. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Pages/Home.razor" %} - + + + + + + + +

Authentication Failure!

@@ -138,13 +144,45 @@ Add the Syncfusion® Blazor Calendar compone +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = Enumerable.Range(1, 12).Select(i => new Order + { + OrderID = 1000 + i, + CustomerID = new[] { "ALFKI", "ANATR", "ANTON", "BLONP", "BOLID" }[Random.Shared.Next(5)], + OrderDate = DateTime.Today.AddDays(-i), + Freight = Math.Round(25 + 15 * Random.Shared.NextDouble(), 2) + }).ToList(); + } + + public class Order + { + public int OrderID { get; set; } + public string? CustomerID { get; set; } + public DateTime OrderDate { get; set; } + public double Freight { get; set; } + } +} + {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This opens the default web browser and displays the Syncfusion® Blazor Calendar component within the app interface. +### Run the application + +To run the application, use the following command: + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} +dotnet run -![Blazor Calendar Component](images/sync-components-auth.webp) +{% endhighlight %} +{% endtabs %} + +![Blazor DataGrid Component](images/sync-components-auth.webp) N> For a complete implementation, download the demo project from the [GitHub repository](https://github.com/SyncfusionExamples/blazor-authentication). @@ -153,3 +191,4 @@ N> For a complete implementation, download the demo project from the [GitHub rep * [Getting Started with Blazor WASM App with Authentication Library](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-authentication) * [Secure an ASP.NET Core Blazor WebAssembly standalone app with the Authentication library](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-authentication-library?view=aspnetcore-8.0&tabs=visual-studio) + diff --git a/blazor/getting-started/blazor-webassembly-authentication.md b/blazor/getting-started/blazor-webassembly-authentication.md index e48fcc529d..1fd5d4a242 100644 --- a/blazor/getting-started/blazor-webassembly-authentication.md +++ b/blazor/getting-started/blazor-webassembly-authentication.md @@ -9,15 +9,27 @@ documentation: ug # Getting Started with Blazor WASM App with Authentication Library -This article provides step-by-step instructions for building and securing a Blazor WebAssembly Standalone App with the Blazor WebAssembly Authentication library using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This article provides step-by-step instructions for building and securing a Blazor WebAssembly Standalone App and integrate the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component for authenticated users. -## Prerequisites +## Create a new Blazor Web App -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +To create a new Blazor Web App, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code). -## Create a new Blazor WebAssembly Standalone App in Visual Studio +Ensure the **Configure for HTTPS** option is enabled, and select **Individual Accounts** as the authentication type. This enables authentication support without persisting user data in a local database. -You can create a **Blazor WebAssembly Standalone App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) by setting the `Authentication type` to `Individual Accounts`. This selection adds authentication support and doesn't result in storing users in a database. +![Project-setting](images/project-setting.webp) + +If using Visual Studio Code, run the following commands in your command-line interface (CLI): + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorAppAuthentication --interactivity Server --auth Individual +cd BlazorAppAuthentication +dotnet run + +{% endhighlight %} +{% endtabs %} ## Configure the application with Google OAuth 2.0 (OIDC) @@ -26,7 +38,7 @@ You can create a **Blazor WebAssembly Standalone App** using Visual Studio via [ * Replace the `appsettings.json` file with the following content to configure the application with `Google OAuth 2.0`. {% tabs %} -{% highlight cshtml tabtitle="appsettings.json" %} +{% highlight json tabtitle="appsettings.json" %} { "Local": { @@ -49,74 +61,94 @@ You can create a **Blazor WebAssembly Standalone App** using Visual Studio via [ ![OAuth RedirectUri](images/oauth-rediredt-uri.webp) -## Install Syncfusion® Blazor Calendars and Themes NuGet in the App +## Integrating Blazor component + +Blazor components can be integrated within the **AuthorizeView** component as shown in the following steps. + +### Install NuGet packages + +To add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component to your application, open the NuGet Package Manager in Visual Studio **(*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*)**. Search and install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages. -Here's an example of how to add **Blazor Calendar** component 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, install the required packages by using the following .NET CLI commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight bash tabtitle=".NET CLI" %} -Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. +### Register Blazor Service -## Register Syncfusion® Blazor Service +Register the Blazor service in the **~/Program.cs** file of the Blazor Web App. -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. +{% tabs %} +{% highlight c# tabtitle="Program.cs" %} -```cshtml +using Syncfusion.Blazor; +.... +builder.Services.AddSyncfusionBlazor(); +.... -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Calendars +{% endhighlight %} +{% endtabs %} -``` +### Add required namespaces -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly Standalone App. +Open the `~/_Imports.razor` file and import the namespaces. -```cshtml +{% tabs %} +{% highlight razor tabtitle="~/_Imports.razor" %} -.... -using Syncfusion.Blazor; -.... -builder.Services.AddSyncfusionBlazor(); -.... +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Grids -``` +{% endhighlight %} +{% endtabs %} -## Add stylesheet and script resources +### Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet in the `` section and the script at the end of the `` of the main page as follows: +Include the theme stylesheet and script references in the `wwwroot/index.html` file. -* For **.NET 10, .NET 9 and .NET 8** Blazor WebAssembly Standalone app, include it in the **~/Components/App.razor** file. +{% tabs %} +{% highlight html tabtitle="index.html" %} -```html .... - + + + .... .... + + .... -``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Syncfusion® Blazor component +### Add Blazor component -Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under an `AuthorizeView`. +Add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in the **~/Pages/Home.razor** file within an `AuthorizeView`. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Pages/Home.razor" %} - + + + + + + + +

Authentication Failure!

@@ -124,14 +156,45 @@ Add the Syncfusion® Blazor Calendar compone +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = Enumerable.Range(1, 12).Select(i => new Order + { + OrderID = 1000 + i, + CustomerID = new[] { "ALFKI", "ANATR", "ANTON", "BLONP", "BOLID" }[Random.Shared.Next(5)], + OrderDate = DateTime.Today.AddDays(-i), + Freight = Math.Round(25 + 15 * Random.Shared.NextDouble(), 2) + }).ToList(); + } + + public class Order + { + public int OrderID { get; set; } + public string? CustomerID { get; set; } + public DateTime OrderDate { get; set; } + public double Freight { get; set; } + } +} + {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Calendar component in the default web browser. +### Run the application +To run the application, use the following command: -![Blazor Calendar Component](images/output-calendar-using-blazor-webassembly.webp) +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} +![Blazor WASM App with Blazor DataGrid Component](images/webAssembly-datagrid.webp) ## See Also diff --git a/blazor/getting-started/images/output-calendar-using-blazor-webassembly.webp b/blazor/getting-started/images/output-calendar-using-blazor-webassembly.webp deleted file mode 100644 index 13d095b0b9..0000000000 Binary files a/blazor/getting-started/images/output-calendar-using-blazor-webassembly.webp and /dev/null differ diff --git a/blazor/getting-started/images/sync-components-auth.webp b/blazor/getting-started/images/sync-components-auth.webp index 3eb607798b..77ec187341 100644 Binary files a/blazor/getting-started/images/sync-components-auth.webp and b/blazor/getting-started/images/sync-components-auth.webp differ diff --git a/blazor/getting-started/images/webAssembly-datagrid.webp b/blazor/getting-started/images/webAssembly-datagrid.webp new file mode 100644 index 0000000000..b511e8ef78 Binary files /dev/null and b/blazor/getting-started/images/webAssembly-datagrid.webp differ