Blazor FAQ - General

To add custom CSS class names to input components despite bootstrap and other CSS framework styling, follow the steps below.

1. In the wwroot/css/site.css stylesheet, include the following styles.
   

    .validField {
          outline: 2px dotted green;
      }
       
      .invalidField {
          outline: 2px dotted red;
      }    

2. Create a new Customer.cs and model Customer class.
   

    using System.ComponentModel.DataAnnotations;
       
      namespace CustomCSS_Validation_InputComponent
      {
          public class Customer
          {
              [Required]
              public string Name { get; set; }
       
              [Required]
              [StringLength(4, ErrorMessage = "The organization code must be less than 5   characters in length.")]
              public string OrganizationCode { get; set; }
          }
      }     

3. Create a new CustomFieldCssClassProvider.cs and then the CustomFieldCssClassProvider class.Inherit the CustomFieldCssClassProvider class from FieldCssClassProvider and override the GetFieldCssClass method, which helps to check for validation messages with the EditContext and returns the “validField” or “invalidField” class name to the appropriate field.
   
   

      using Microsoft.AspNetCore.Components.Forms;
      using System.Linq;
       
      namespace FormBootstrapCSS.Data
      {
          public class CustomFieldCssClassProvider : FieldCssClassProvider
          {
              public override string GetFieldCssClass(EditContext editContext,
              in FieldIdentifier fieldIdentifier)
              {
                  var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();
       
                  return isValid ? "validField" : "invalidField";
              }
          }
      }

   
    

4. Add the form design code as well as the code for input components validation to the Index.razor page. Here, the SetFieldCssClassProvider method in the EditContext class is used to set the custom CSS name to the appropriate field based on the validation result returned by the CustomFieldCssClassProvider class, whose instance is passed into the method.
   

   @page "/"
       
      <EditForm EditContext="@editContext" OnValidSubmit="@Submit">
          <DataAnnotationsValidator />
          <ValidationSummary />
          <div class="mt-2   col-md-12">
              Name: <InputText id="name" @bind-Value="_customer.Name" />
          </div>
          <div class="mt-2   col-md-12">
              Organization Code: <InputText id="organizationCode" @bind-Value="_customer.OrganizationCode" />
          </div>
          <div class="mt-2   col-md-12">
              <button type="submit">Submit</button>
          </div>
      </EditForm>
       
      @code {
          private Customer _customer = new Customer();
          private EditContext editContext;
       
          protected override void OnInitialized()
          {
              editContext = new(_customer);
              editContext.SetFieldCssClassProvider(new   CustomFieldCssClassProvider());
          }
       
          private void Submit()
          {
           …….. . .
          }
      }      

   
   
   
   
   View Sample in GitHub

Stored procedures are pieces of reusable code that you can save in a database data dictionary. They help you extract, edit, and remove data from a database without writing the code to do so again and again. It also saves your time, lessens your workload, and increases your productivity.
Follow these steps to use stored procedures in a Blazor application:

1. Create a new Blazor application and add the Microsoft.EntityFrameworkCore, Microsoft.EntityFrameworkCore.SqlServer, Microsoft.EntityFrameworkCore.Design, Microsoft.EntityFrameworkCore.Tools NuGet packages using the NuGet package manager.

2. Create a class named EmpClass.cs in the Data folder and define the properties that are already in the database table.
   [Empclass.cs]
   

   public class EmpClass
   {
   	[Key]
   	public int Empid { get; set; }
   	public string? Empname { get; set; }
   	public string? Department { get; set; }
   	public DateTime joinDate { get; set;}
   }

   [EmpClass table]
   
   Also Define inserted Employee Details in stored procedure.
   
   

   CREATE PROCEDURE [dbo].[InsertEmpdetails]
   @Empname nvarchar(150),
   @Department nvarchar(150), 
   @joinDate datetime 
   AS
   Insert into EmpClass(Empname,Department,joinDate) values (@Empname,@Department,@Joindate)
   RETURN 0
   

3. Add the virtual property for the DbSet from EmpClass to insert records in the database under the Data folder.
   [ApplicationDbContext.cs]

   public class ApplicationDbContext:DbContext 
   {
   	public ApplicationDbContext(DbContextOptions options ) : base(options)
   	{
   	}
   	public virtual DbSet InsertRecord { get; set; }
   }
   

4. Connect the SQL Server database to the Blazor application by choosing (View –> Server Explorer). Right-click the Data Connections and choose Add connection in Visual Studio. Add your server name and DB name to connect the database to the Blazor application.
   
   The database is now connected to the Blazor application.
   

5. Add the connection string configurations to the appsetting.json file.
   [appsetting.json]
   

   {
   	"ConnectionStrings": {
   		"Myconnection": " "Data Source={{Server_Name}};Initial Catalog={{DataBase_Name}};Integrated Security=True""
   	},
   	"Logging": {
   	……
   	},
   	"AllowedHosts": "*"
   }
   

6. Create an EmpServices class in the Services folder and define the ExecuteSqlRaw extension method to execute a stored procedure.
   [EmpServices.cs]

   using {Your App Name}.Data;
   using Microsoft.EntityFrameworkCore;
   namespace {Your App Name}.Services
   {
   	public class EmpService
   	{
   		protected readonly ApplicationDbContext? _dbcontext;
   		public EmpService ( ApplicationDbContext? _db )
   		{
   			_dbcontext = _db;
   		}
   		public EmpClass AddNewRecord ( EmpClass? ec)
   		{
   			//Here define the ExecuteSqlRaw extension method to execute a stored procedure with InsertEmpdetails 
   			_dbcontext!.Database.ExecuteSqlRaw("InsertEmpdetails {0},{1},{2}", ec?.Empname!, ec?.Department!, ec!.Joindate);
   			_dbcontext.SaveChanges();
   			return ec;
   		}
   	}
   }
   

7. Add the DbContext configuration to the Program.cs file.
   

   builder.Services.AddDbContext(options => options.UseSqlServer("name=ConnectionStrings:Myconnection"));
   builder.Services.AddScoped();
   

8. Insert Record Into Database Using Stored Procedure implement in index.razor page
   

   @page "/"
   @using {Your App Name}.Data
   @using {Your App Name}.Services
   @inherits OwningComponentBase<EmpService>
   <h1>Insert Record Into Database Using Stored Procedure</h1>
   <hr/>
   <EditForm Model="@ec" OnValidSubmit="@Insertdata">
   	<table border="1">
   		<tr>
   			<td>Employee Name</td>
   			<td><input type="text" placeholder="Enter Employee Name" @bind="ec.Empname"/></td>
   		</tr>
   		<tr>
   			<td>Department</td>
   			<td><input type="text" placeholder="Enter Department" @bind="ec.Department" /></td>
   		</tr>
   		<tr>
   			<td>Joindate</td>
   			<td><InputDate @bind-Value="ec.Joindate"></InputDate></td>
   		</tr>
   		<tr>
   			<td>Joindate</td>
   			<td><input type="submit" value="Insert"/></td> 
   		</tr>
   	</table>
   </EditForm>
   @code{
   	EmpClass ec = new EmpClass();
   	void Insertdata ()
   	{
   		ec.Empid = 0;
   		Service.AddNewRecord(ec);
   	}
   }
   

9. Press Ctrl + F5 to run the application and see the output in the following image.
   

Blazor authentication is implemented to determine who a particular user is. Blazor follows the existing ASP.NET Core authentication mechanisms to show a user’s identity.
Follow these steps to implement authentication with OpenID Connect in Blazor:

1. Create Blazor application

   Create a Blazor Server app and install a NuGet package named “Microsoft.AspNetCore.Authentication.OpenIdConnect” using the NuGet package manager.

2. Add OIDC and authentication configuration

   Add OpenID Connect and cookie authentication service configuration to the Blazor Server app in the Startup.cs file.
   [Startup.cs]
   

   using Microsoft.AspNetCore.Authentication.Cookies;
   using Microsoft.AspNetCore.Authentication.OpenIdConnect;
   using Microsoft.IdentityModel.Tokens;
     
   namespace BlazorServerApp
   {
        public class Startup
        {
          . . .
          . . .
          public void ConfigureServices(IServiceCollection services)
          {
                      . . .
                      . . .
                      services.AddAuthentication(opt =>
                {
                    opt.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                    opt.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                    opt.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
                }).AddCookie().AddOpenIdConnect("oidc", options =>
                    {
                    options.Authority = "https://demo.identityserver.io/";
                    options.ClientId = "interactive.confidential.short";
                    options.ClientSecret = "secret";
                    options.ResponseType = "code";
                    options.SaveTokens = true;
                    options.GetClaimsFromUserInfoEndpoint = true;
                    options.UseTokenLifetime = false;
                    options.Scope.Add("openid");
                    options.Scope.Add("profile");
                    options.TokenValidationParameters = new TokenValidationParameters{ NameClaimType = "name" };
     
                    options.Events = new OpenIdConnectEvents
                    {
                        OnAccessDenied = context =>
                        {
                            context.HandleResponse();
                            context.Response.Redirect("/");
                            return Task.CompletedTask;
                        }
                    };
                });
             }
     
             public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             {
                 . . .
                 . . .
                                app.UseAuthentication();
                                app.UseAuthorization();
                         }
               }
     } 

3. Add AuthorizeRouteView to the App.razor file

   Add AuthorizeRouteView to display the page matching the specified route only if the user is authorized.
   [App.razor]
   

   @inject NavigationManager UriHelper
     
    <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        @{
                            var returnUrl = UriHelper.ToBaseRelativePath(UriHelper.Uri);
                            UriHelper.NavigateTo($"login?redirectUri={returnUrl}", forceLoad: true);
                        }
                    </NotAuthorized>
                    <Authorizing>
                        Loading...
                    </Authorizing>
                </AuthorizeRouteView>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
    </CascadingAuthenticationState> 

4. Add buttons

   Add Log out and Log in buttons to authorize the user in the header section.
   [MainLayout.razor]
   

   <div class="top-row px-4">
                <AuthorizeView>
                    <Authorized>
                        <form method="get" action="logout">
                            <button type="submit" class="nav-link btn btn-link">Log out</button>
                        </form>
                    </Authorized>
                    <NotAuthorized>
                        <a href="login?redirectUri=/">Log in</a>
                    </NotAuthorized>
                </AuthorizeView>
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            </div> 

5. Redirect requests to log in or log out users

   Create Razor pages for login (Login.cshtml.cs) and logout (Logout.cshtml.cs) redirection requests to IdentityServer for authorization under the Pages folder.
   [Login.cshtml.cs]
   

   using Microsoft.AspNetCore.Authentication;
     
   namespace BlazorServerApp.Pages
   {
        public class LoginModel : PageModel
        {
            public async Task OnGet(string redirectUri)
            {
                await HttpContext.ChallengeAsync("oidc", new AuthenticationProperties { RedirectUri = redirectUri });
            }
        }
    } 

   [Logout.cshtml.cs]
   

   using Microsoft.AspNetCore.Authentication;
     
   namespace BlazorServerApp.Pages
   {
        public class LogoutModel : PageModel
        {
            public async Task<IActionResult> OnGetAsync()
            {
                await HttpContext.SignOutAsync();
                return Redirect("/");
            }
        }
    } 

6. Show authorized content in Razor component

   Following is the code to display the authorized content when the app is authorized. If the app is not authorized, it displays the “Not Authorized” message to the user.
   [Index.razor]
   

   @page "/"
     
   <AuthorizeView>
        <Authorized>
            <h1>Hello, @context.User.Identity.Name !</h1>
     
            <p>Welcome to your new app.</p>
        </Authorized>
        <NotAuthorized>
            <p>Not Authorized</p>
        </NotAuthorized>
    </AuthorizeView>

7. Run the application

   Press Ctrl + F5 to run the application and click Log in in the header to authenticate the user.
   
   You can download the reference sample on GitHub.

Cookies are created by the application and passed to the user’s web browser when the user submits the request. The web browser passes the cookie back to the application to indicate that the user is authenticated. When the user logs out, the cookie is removed.
Follow these steps to set a cookie and read that cookie with authentication in Blazor.

1. Configure the cookie authentication services in the Startup.cs file.
   [Startup.cs]
   

   public class Startup
   {
       . . .
       . . .
     
       public void ConfigureServices(IServiceCollection services)
       {
          . . .
          . . .
          services.AddAuthentication("Cookies").AddCookie();
       }
       public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
       {
          . . .
          . . .
          app.UseAuthentication();
          app.UseAuthorization();
     
          app.UseEndpoints(endpoints =>
          {
             endpoints.MapControllers();
             . . .
             . . .
          });
       }  
    } 

2. Now, add a controller page to set the cookie to the browser and redirect the URL.
   [CookieController.cs]
   

   using Microsoft.AspNetCore.Authentication;
   using Microsoft.AspNetCore.Http;
   using Microsoft.AspNetCore.Mvc;
   using System.Collections.Generic;
   using System.Security.Claims;
   using System.Threading.Tasks;
     
   namespace blazorcookie
    {
        [Route("/[controller]")]
        [ApiController]
        public class CookieController : ControllerBase
        {
            [HttpPost]
            public async Task<ActionResult> Login([FromForm] string name)
            {
                ClaimsIdentity claimsIdentity = new ClaimsIdentity(new List<Claim>
                {
                    new Claim(ClaimTypes.NameIdentifier, name)
                }, "auth");
                ClaimsPrincipal claims = new ClaimsPrincipal(claimsIdentity);
                await HttpContext.SignInAsync(claims);
                return Redirect("/");
            }
        }
    } 

3. To use the authorized view, configure the CascadingAuthenticationState component in the App.razor file. This will let you check the authentication state inside the Blazor application.
   [ App.razor ]
   

   <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
            . . .
            . . .
            . . .
        </Router>
   </CascadingAuthenticationState> 

4. Use form action to call the cookie controller to set the cookie and have it read by AuthorizeView user name.
   [Index.razor]
   

   @page "/"
     
   <AuthorizeView>
        <Authorized>
            <h1>Hello @context.User.Claims.First().Value</h1>
        </Authorized>
   </AuthorizeView>
     
   <form action="cookie" method="post">
        <input type="text" name="name" />
        <input type="submit" />
   </form> 

5. Run the application and submit the form request. You will find an authentication cookie with the scheme “Cookies,” which was specified in the ConfigureServices() method of the Startup class.
   
   
   Refer to this blog post for more details and download the sample on GitHub.

Blazor CSS isolation is a process that occurs at build time. By utilizing CSS isolation, you can restrict the scope of CSS files or styles to specific components within your app, preventing them from affecting other components globally. The CSS selectors are rewritten by Blazor to match markup rendered by the component. These rewritten CSS files are loaded as static assets in the {{Your_App_Name}}.styles.css.
The static file name is referenced inside the tag of the _Host.cshtml file.
[_Host.cshtml] / [index.html]

<head>
       // . . .
       <link href="{{Your_App_Name}}.styles.css" rel="stylesheet" />
</head>

The routing interception concept is sometimes used to restrict user access to some page or link if they did some work or made some changes on a specific page.
In the following code, you can use the NavigateTo() method to intercept routing inside the If condition. The routing happens according to the values passed in the condition.

1. Create the class file [RouteData.cs].
   

    …………………. ..
    namespace BlazorApp.Data
    {
        public class RouteData
        {
            public string Textfield { get; set; }
        }
    } 

2. To register the RouteData class as a scoped service in Program.cs, you can use the following code snippet.
   [Program.cs]

   builder.Services.AddScoped<BlazorServerApp.Data.RouteData>();

3. Add the following code to the [Index.razor] page.
   

    @page "/" 
    @inject Data.RouteData RouteData
   <p>Type the text below to allow Home page intercepting</p>
   <textarea @bind="RouteData.Textfield"></textarea> 

4. Check the condition and allow the navigation process in the [NavMenu.razor] page as shown.
   

   @inject NavigationManager NavigationManager
   @inject {Your App name}.Data.RouteData RouteData
   <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
        <ul class="nav flex-column">
            <li class="nav-item px-3">
                <NavLink class="nav-link" @onclick="Navigate" Match="NavLinkMatch.All">
                    <span class="oi oi-home" aria-hidden="true"></span> Home
                </NavLink>
            </li>
                      ……………………. . .
        </ul>
    </div>
    @code {
        private bool collapseNavMenu = true;
        private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
        private void ToggleNavMenu()
        {
            collapseNavMenu = !collapseNavMenu;
        }
               private void Navigate()
        {
            if (RouteData.Textfield == null)
            NavigationManager.NavigateTo("");
        }
    ………………… . . . 

5. Output

   Home page routing is intercepted when you type text in the text area. When the text area value is null, the app navigates to the home page.
   

   View Sample in GitHub

As the Blazor client runs in the browser, both user authorization and authentication for WebAssembly will be completely handled by the back-end API.
The back-end web API must handle the authorization on every API call, and it tells the Blazor app whether the user is authenticated and has resource access. It enables your Blazor app to show the correct context to the user.

1. Create a Blazor WebAssembly app using Visual Studio 2019 with ASP.NET Core hosting enabled.

2. Reorganize the folder names according to usage:
   

   • Sample.Server is renamed to Sample.Api as we are going to use this as our API.
   • Sample.Client is renamed to Sample.WebApp.
   • Sample.Shared is renamed to Sample.Common.

3. In the Sample.Common folder, create a Models folder, and move the generated WeatherForecast class to this folder and change its namespace to Sample.Models. Add the AuthorizedUser class in the Models folder under the Sample.Shared folder.
   

   namespace Sample.Common
    {
        public class AuthorizedUser
        {
            public string Name { get; set; }
            public string Roles { get; set; }
        }

4. Add a new SettingsController file in the Sample.Api folder.
   

   using Sample.Models;
   using Microsoft.AspNetCore.Mvc;
     
   namespace Sample.Api.Controllers
    {
        [Route("api/[controller]")]
        [ApiController]
        public class SettingsController : ControllerBase
        {
            [HttpGet("user")]
            public AuthorizedUser GetUser()
            {
                return new AuthorizedUser();
     
                // User signed in:
                //return new AuthorizedUser { Name = "UserName" };
            }
        }
    } 

5. Prepare your Sample.WebApp

1. Install the NuGet package Microsoft.AspNetCore.Components.Authorization.

2. Add the installed package in the _Imports.razor file.
   



3. Wrap the <CascadingAuthenticationState> in the App.razor file.
   

 <CascadingAuthenticationState>
     <Router AppAssembly="@typeof(Program).Assembly">
         ...
     </Router>
 </CascadingAuthenticationState> 

4. Add a Service folder and add a ClientAuthorizationService class in it.
   

using Sample.Models;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Authorization;
  
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Security.Claims;
using System.Threading.Tasks;
  
namespace Sample.WebApp.Services
 {
     public class ClientAuthorizationService : AuthenticationStateProvider
     {
         private const string AuthenticationType = "BackEnd";
         private readonly HttpClient _httpClient;
        public ClientAuthorizationService(HttpClient httpClient)
     {
          if (httpClient == null) throw new ArgumentNullException(nameof(httpClient));
          _httpClient = httpClient;
         }
        public string ApiUriGetAuthorizedUser { get; set; }
  
        public string ApiUriSignIn { get; set; }
  
        public string ApiUriSignOut { get; set; }
  
         public AuthorizedUser AuthorizedUser { get; private set; } = new AuthorizedUser();
      public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
   ClaimsPrincipal user;
   if (!string.IsNullOrEmpty(ApiUriGetAuthorizedUser))
   AuthorizedUser = await _httpClient.GetJsonAsync<AuthorizedUser>(ApiUriGetAuthorizedUser);
   if (string.IsNullOrEmpty(AuthorizedUser.Name))     {
                 user = new ClaimsPrincipal();
            }
   else   {
  var identity = new ClaimsIdentity(CreateClaims(AuthorizedUser), AuthenticationType);
   user = new ClaimsPrincipal(identity);
  }
 return new AuthenticationState(user);
    }
  
   private static IEnumerable<Claim> CreateClaims(AuthorizedUser authorizedUser)
     {      yield return new Claim(ClaimTypes.Name, authorizedUser.Name);
  
       var roles = authorizedUser.Roles?.Split(',') ?? new string[0];
 foreach (var role in roles)
  yield return new Claim(ClaimTypes.Role,role.Trim());
 }
 }
 } 

5. Add the following code in the Program.cs file.
   

using Microsoft.AspNetCore.Components.Authorization;
 using System.Net.Http;
 ...
  public static async Task Main(string[] args)
 {
     var builder = WebAssemblyHostBuilder.CreateDefault(args);
  
     builder.Services.AddAuthorizationCore();
     builder.Services.AddScoped<ClientAuthorizationService>(CreateAuthorizationService);
     builder.Services.AddScoped<AuthenticationStateProvider>(sp => sp.GetRequiredService<ClientAuthorizationService>());
     builder.Services.AddOptions();
     ...
  private static ClientAuthorizationService CreateAuthorizationService(IServiceProvider serviceProvider){
     var httpClient = serviceProvider.GetRequiredService<HttpClient>();
     var service = new ClientAuthorizationService(httpClient)
     {
         ApiUriGetAuthorizedUser = "api/settings/user",
  
         ApiUriSignIn = "AzureADB2C/Account/SignIn",
         ApiUriSignOut = "AzureADB2C/Account/SignOut",
     };
     return service;
 } 

6. Create a new Razor component SignInDisplay.razor in the shared folder.
   

@using Sample.WebApp.Services
@inject ClientAuthorizationService AuthorizationService
<AuthorizeView>
     <Authorized>
         <div>
             <span class="form-control">@AuthorizationService.AuthorizedUser.Name</span>
         </div>
         <div>
             <a class="btn btn-outline-primary" href="@AuthorizationService.ApiUriSignOut">Sign Out</a>
         </div>
     </Authorized>
     <NotAuthorized>
         <div>
             <a class="btn btn-outline-primary" href="@AuthorizationService.ApiUriSignIn">Sign In</a>
         </div>
     </NotAuthorized>
 </AuthorizeView> 

7. In the Shared/MainLayout page, add the following code.
   

<div class="top-row px-4 auth">
         <SignInDisplay />
</div>

6. Run the app with Sample.Api as the startup file and see the output as follows.
   

   Since Windows authorization is not yet implemented in the API, If you click the Sign In button, you will be rerouted to a page stating, “Sorry, there’s nothing at this address.” When you change the code in the GetUser() method in the SettingsController to include the name of the user, the app will be shown as follows.
   

Refer to this link for more information.

Role-based authorization is a declarative way of limiting resource access that first appeared in ASP.NET (pre-Core). In order for the user to access certain resources, developers must specify a role that the user belongs to. This is done by using the [Authorize] attribute. Users can have a single role or multiple roles depending on the backing store used. The following procedure explains how to implement role-based authorization.

1. Create a Blazor WebAssembly app and add the following role service in the Startup class under ConfigureServices.
   

    public void ConfigureServices(IServiceCollection services)
            {
             ………………….. . 
                services.AddDefaultIdentity<IdentityUser>()
                        .AddRoles<IdentityRole>()
                        .AddEntityFrameworkStores<ApplicationDbContext>();}

2. Add specific roles in your database by overriding the OnModelCreating method of ApplicationDBContext. The User and Admin roles are added in the following code.
   

    public class ApplicationDbContext : IdentityDbContext
            {
                public ApplicationDbContext(DbContextOptions options) : base(options)
                {
                }
     
                protected override void OnModelCreating(ModelBuilder builder)
                {
                    base.OnModelCreating(builder);
     
                    builder.Entity<IdentityRole>().HasData(new IdentityRole { Name = "User", NormalizedName = "USER", Id = Guid.NewGuid().ToString(), ConcurrencyStamp = Guid.NewGuid().ToString() });
                    builder.Entity<IdentityRole>().HasData(new IdentityRole { Name = "Admin", NormalizedName = "ADMIN", Id = Guid.NewGuid().ToString(), ConcurrencyStamp = Guid.NewGuid().ToString() });
                }
            } 

   Once the roles are added, generate a migration and apply it to your database.

Add – Migration SeedRoles Update-Database

3. Add users to the roles by updating the action on the Accounts controller. All new users are added to the User role, except for the admin email.
   [AccountsController.cs]

   [HttpPost]
            public async Task<IActionResult> Post([FromBody]RegisterModel model)
            {
                var newUser = new IdentityUser { UserName = model.Email, Email = model.Email };
                var result = await _userManager.CreateAsync(newUser, model.Password);
                if (!result.Succeeded)
                {
                    var errors = result.Errors.Select(x => x.Description);
                    return BadRequest(new RegisterResult { Successful = false, Errors = errors });
                }  
                await _userManager.AddToRoleAsync(newUser, "User");
                if (newUser.Email.StartsWith("admin"))
                {
                    await _userManager.AddToRoleAsync(newUser, "Admin");
                }
                return Ok(new RegisterResult { Successful = true });
            } 

4. Update the Login method in the LoginController.
   Add roles as claims to the JSON web token (JWT) since we are assigning new users to roles at signup, so we need to pass this information to Blazor. Add the following code in the Login method.
   

Current users can be taken through UserManager, which is used to get their roles.


public async Task<IActionResult> Login([FromBody] LoginModel login)
{
 …………….. . 
 var user = await _signInManager.UserManager.FindByEmailAsync(login.Email);
             var roles = await _signInManager.UserManager.GetRolesAsync(user);
             var claims = new List<Claim>();
  
             claims.Add(new Claim(ClaimTypes.Name, login.Email));
                     
              foreach (var role in roles)
             {
                 claims.Add(new Claim(ClaimTypes.Role, role));
             }
 …………….. . .
 }

5. Add roles in client-side Blazor.
   Once the new users are signed up, we have to get those roles via JWT. To do this, we add the following code in the ParseClaimsFromJwt method, which will take JWT, decode it, extract claims, and return it.
   

   private IEnumerable<Claim> ParseClaimsFromJwt(string jwt)
            {
                var claims = new List<Claim>();
                var payload = jwt.Split('.')[1];
                var jsonBytes = ParseBase64WithoutPadding(payload);
                var keyValuePairs = JsonSerializer.Parse<Dictionary<string, object>>(jsonBytes);
     
                keyValuePairs.TryGetValue(ClaimTypes.Role, out object roles);
     
                if (roles != null)
                {
                    if (roles.ToString().Trim().StartsWith("["))
                    {
                        var parsedRoles = JsonSerializer.Parse<string[]>(roles.ToString());
     
                        foreach (var parsedRole in parsedRoles)
                        {
                            claims.Add(new Claim(ClaimTypes.Role, parsedRole));
                        }
                    }
                    else
                    {
                        claims.Add(new Claim(ClaimTypes.Role, roles.ToString()));
                    }
     
                    keyValuePairs.Remove(ClaimTypes.Role);
                }
     
                claims.AddRange(keyValuePairs.Select(kvp => new Claim(kvp.Key, kvp.Value.ToString())));
     
                return claims;
            }
     
            private byte[] ParseBase64WithoutPadding(string base64)
            {
                switch (base64.Length % 4)
                {
                    case 2: base64 += "=="; break;
                    case 3: base64 += "="; break;
                }
                return Convert.FromBase64String(base64);
            } 

   We have to check that the first character is [, indicating it’s a JSON array. If the role claim is present and if the [ character is found, then we have to extract the individual role names from the roles entered. We have to loop these role names and add each as a claim, but if the role is not an array, then it is added as a single role claim.
   
   To call ParseClaimsFromJwt, we need to update the MarkUserAsAuthenticated method as shown.
   

   public void MarkUserAsAuthenticated(string token)
            {
                var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(token), "jwt"));
                var authState = Task.FromResult(new AuthenticationState(authenticatedUser));
     
                NotifyAuthenticationStateChanged(authState);
            }

6. Update the Login method on the AuthService to pass the token rather than the email when calling MarkUserAsAuthenticated.
   

   public async Task<LoginResult> Login(LoginModel loginModel)
            {
    ……………. . 
                var result = await _httpClient.PostJsonAsync<LoginResult>("api/Login", loginModel);
     
                if (result.Successful)
                {
                    await _localStorage.SetItemAsync("authToken", result.Token);
                    ((ApiAuthenticationStateProvider)_authenticationStateProvider).MarkUserAsAuthenticated(result.Token);
                    _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", result.Token);
     
                    return result;
                }
     
                return result;
            }

7. Apply role-based authentication to the API.
   We can allow access to a specific page by an admin user alone through the Authorize attribute as shown.
   

   namespace BlazorWebAssembly.Server.Controllers
    {
        …………. . .
     
        public class SampleDataController : Controller
        {
             …… . .
            [Authorize(Roles = "Admin")]
            [HttpGet("[action]")]
            public IEnumerable<WeatherForecast> WeatherForecasts()
            {
                var rng = new Random();
                return Enumerable.Range(1, 5).Select(index => new WeatherForecast
                {
                    Date = DateTime.Now.AddDays(index),
                    TemperatureC = rng.Next(-20, 55),
                    Summary = Summaries[rng.Next(Summaries.Length)]
                });
            }
        }

8. Apply role-based authentication in the Blazor page.
   Use the @attribute directive with the [Authorize] attribute in a Blazor page to restrict the user access to specific pages.
   The following code allows the admin user alone to see the fetchdata page.
   

   @page "/fetchdata"
   @attribute [Authorize(Roles = "Admin")]
   @using BlazorAuthorization.Shared

   

   When we log in using accounts other than admin, we are unable to load the fetchdata page.
   
   

9. We can also add role-based authorization using the AuthorizeView component in the Index.razor page as shown in the following code.
   

   <AuthorizeView Roles="User">
        <p>You can only see this if you satisfy the IsUser policy.</p>
    </AuthorizeView>  
    <AuthorizeView Roles="Admin">
        <p>You can only see this if you satisfy the IsAdmin policy.</p>
    </AuthorizeView> 

   The output text is shown according to the accounts (admin/user) the user is signed in as.
   Refer to this link for further information about role-based authorization in Blazor WebAssembly.

Google authentication is a process by which the user can use their Google accounts to get authorized to access particular data. Follow this procedure to implement Google authentication.

1. Prerequisites
   • Visual Studio latest version
   • .NET Core SDK latest version.

2. Create a Blazor Server app with the latest .NET support.
   

3. Set the Authentication Type as Individual Accounts and then click Create.
   

4. Go to Tools > NuGet Package Manager > Package Manager Console. Before running the app, we have to perform migration by running the following command in the Package Manager Console.
   

Update-Database





To configure a Google API Console project, check whether SSL is enabled by right-clicking the project name, selecting Properties, and selecting the Debug property. I need this URL for configuration.


5. To create a Google API Console project, follow these steps.

   1. Go to https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin.

   2. Click the Credentials page link under the topic “Create authorization credentials.” Sign in with your Google account and create a project by providing a project name.

   

   3. Click Create Credentials and select OAuth client ID.

   

   4. Select the Application type and type the name of the OAuth ID and the redirect URI (localhost URL given to enable SSL in your app) as shown.

   
   

   5. Click Create and note your client ID and client secret, which are important for Google authentication.

   

6. Install the Google Authentication middleware NuGet package by typing the following command in the Package Manager Console.

NuGet\Install-Package Microsoft.AspNetCore.Authentication.Google -Version 7.0.9



7. Configure the Blazor app to use Google authentication. Right-click the project, select Manage User Secrets, and type the following code.
   

   {  "Authentication:Google:ClientId": "your Google client ID",
      "Authentication:Google:ClientSecret": "your Google client secret"} 

8. Open the Program.cs file and add the following code under the ConfigureServices method.
   

   builder.Services.AddAuthentication().AddGoogle(googleOptions =>
   {
   	googleOptions.ClientId = "Authentication:Google:Your Google ClientId";
   	googleOptions.ClientSecret ="Authentication:Google:Your Google ClientSecret here";
   });

Note the following about this code:

• The AddGoogle() method is used to configure the authentication process in our application.

• ClientID and ClientSecret will be read from the secrets.json file by the code.

9. Add Google authorization to the Blazor page.
   Use the Authorize attribute by using the @ directive in a Blazor page to restrict unauthorized users.
   

    @page "/fetchdata"
    @attribute [Authorize]
    @using Microsoft.AspNetCore.Authorization 

   This code will allow the authorized user alone to see the fetchdata page

10. Output

    The following image shows the output after running the application.
    

The following image shows the output after clicking Login to navigate to the authorization page.


The following image shows the output after the user is authorized using their Google account.

Blazor applications are component-based. Blazor components can be used in existing ASP.NET MVC applications. Follow these steps to learn how Blazor components are used in the view page of an MVC application.

1. Prerequisites:
   • Visual Studio 2019
   • .NET Core 3.1
2. Create a ASP.NET MVC application.

   Open Visual Studio 2019 and select ASP.NET Core Web App (Model-View-Controller) in the Create a new project page and configure the project as shown.
   

   
   

3. Add the reference Microsoft.AspNetCore.Components in your dependencies.
   

   

4. Add the Blazor component folder in the View/Shared folder.
   

   Then add a Razor component inside the Component folder.
   

   

5. Add the following code to the created Component.razor file.
   

   @using Microsoft.AspNetCore.Components
        <h3>Blazor Component in MVC</h3>
        <button @onclick="Test" class="btn btn-dark">Click to get answer</button>
        <br />
        <div >@Data </div>
    @code {
        [Parameter]  
        public string Data { get; set; } = string.Empty;
           private void Test()
        {
            Data = "Button Clicked";
        }
    }   

6. Add the script reference to the _Layout.cshtml file.
   

   <base href="~/" />
   <script src="_framework/blazor.server.js"></script> 

7. Create an _Imports.razor file in the Component folder and add the following namespaces to the _Imports.razor file to access component features over your components in the application.
   

   @using System.Net.Http
   @using Microsoft.AspNetCore.Authorization
   @using Microsoft.AspNetCore.Components.Authorization
   @using Microsoft.AspNetCore.Components.Forms
   @using Microsoft.AspNetCore.Components.Routing
   @using Microsoft.AspNetCore.Components.Web
   @using Microsoft.JSInterop
   @using System.IO

8. Add services.AddServerSideBlazor() under the ConfigureServices method and add endpoints.MapBlazorHub(); under the Configure method in the Startup.cs file.
   

   ………………… . .
   namespace blazinmvc
   {
        public class Startup
        {
            ……………… . .
            
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddServerSideBlazor();
                services.AddControllersWithViews();
            }
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {            …………….. . .
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapControllerRoute(
                        name: "default",
                        pattern: "{controller=Home}/{action=Index}/{id?}");
                    endpoints.MapBlazorHub();
                });
            }
        }
    }

9. To render components on the View page, add the following code in the Index.cshtml page in the Views folder.
   

   @{
        ViewData["Title"] = "Home Page";
    }
   <div >
   @(await Html.RenderComponentAsync<blazinmvc.Views.Shared.Component.Component>(RenderMode.ServerPrerendered,new {  Data= " Hello World " }))
    </div> 

10. Run the application.
    

    After button click
    

In the component page, we use the button to change the text defined in the Index.cshtml page inside the component rendering. Clicking the button will change the text shown on the Home page.

Since there is no built-in functionality for saving files in Blazor, it is necessary to write the function in JavaScript and then invoke the JavaScript function from C# code in Blazor. In this solution, we have used JavaScript interop for file saving and generation in client-side Blazor.

1. Create a new JavaScript file, saveFile.js, in the wwwroot folder and add the following code.
   [saveFile.js]
   

   function saveFile(file, Content) {
        var link = document.createElement('a');
        link.download = name;
        link.href = "data:text/plain;charset=utf-8," + encodeURIComponent(Content)
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

2. Reference the new script file in the index.html page as shown.
   [index.html]
   

   <body>
        ………………………… . .
        <script src="_framework/blazor.webassembly.js"></script>
        <script src="saveFile.js"></script>
    </body> 

3. Invoke the JavaScript function in a new Razor page.
   [Savefile.razor]
   

   page "/savefile"
     
   @inject IJSRuntime JSRuntime
     
   <h1>Blazor Save & Generate File</h1><textarea @bind="fileContent" 
    style="width:150px;height:100px" />
     
   <button @onclick="SaveFile">SaveFile</button>
     
   <button @onclick="DownloadFile">GenerateFile</button>
     
   @code {
     
        string Content;
     
        string fileContent;
     
        string fileName = "file.txt";
     
        public  void SaveFile()
        {
           Content = fileContent;
        }
        public async void DownloadFile()
        {
            await JSRuntime.InvokeAsync<object>("saveFile",fileName,Content); 
       }
   }

4. Run the app. Save and generate the file in text format.
   

   
   View Sample in GitHub