Tech Seeker

Posts

Part-4 Blazor Server Cookie Authentication

In this article, we implement the logic for the user logout from the Blazor server application. In this part of our article, we have to accomplish our targets like: SignOut Implementation. Generating Anti-Forgery Token. Create Sign-Out Razor Page: Since for logout we no need any UI page so we can implement our c# logic directly into the razor page so creating 'Logout.csthml' single file is enough. Areas/Identity/Pages/Accoun/Logout.cshtml: @page "/identiy/account/logout" @using Microsoft.AspNetCore.Authentication @using Microsoft.AspNetCore.Authentication.Cookies @inject IHttpContextAccessor _accessor @functions { public async Task<IActionResult> OnPostAsync() { await _accessor.HttpContext .SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme); return Redirect("~/"); } } Here to sign out the user from the application w will use the 'Httpcontext.SignOutAsyn()' method by sending the authentica

Part-3 Blazor Server Cookie Authentication

In this article, we are going to implement a 'User Login Page' in our Blazor Server application. In this part of the article, we have to accomplish our targets like: Login User Form. Login Authentication Logic. Configuring Cookie Authentication Service. Installing Blazor Authorization Package 'Microsoft.AspNetCore.Components.Authorization'. Adding the 'CascadingAuthenticationState' component. Using the 'AuthorizeView' component. Login Password Validation: Let's add logic to validate the user entered password in the login form against the user hash password stored in the database. Logic/AccountLogic: private bool ValidatePasswordHash(string password, string dbPassword) { byte[] dbPasswordHashBytes = Convert.FromBase64String(dbPassword); byte[] salt = new byte[16]; Array.Copy(dbPasswordHashBytes, 0, salt, 0, 16); var userPasswordBytes = new Rfc2898DeriveBytes(password, salt, 1000); byte[] userPasswordHash = userPasswordBytes.GetBytes(20);

Part-2 Blazor Server Cookie Authentication

In this article, we are going to implement User Registration logic in the Blazor Server application. In this part of the article, we have to accomplish our targets like: User Registration Form. Password Hashing User Registration Logic. Click here for part-1 Create Asp.Net Core Areas Folder: We are going to create Razor Pages for our User Registration, so let store them in the 'Areas' folder. So let's create 'Areas' folders and also add the 'Layout' template and a few other additional configurations. Now let's create folders into our application like 'Areas\Identity\Pages\Account' , 'Areas\Identity\Pages\Shared' . Let's create a new layout for the pages inside of the 'Areas' folder. Let's create the layout file '_Layout.cshtml'. Areas/Identity/Pages/Shared/_Layout.cshtml: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="vie

Part-1 Blazor Server Cookie Authentication

In .Net applications, authentication can be simply accomplished with cookies without using any built-in authentication provider like 'Asp.Net Core Identity', 'Identity Server', 'Auth0', etc. This series is about implementing simple cookie-based authentication in the Blazor Server application. In this part of the article, we have to accomplish our targets like: Creating user authentication tables. Creating Blazor Server Application. Installing Entity Framework core. Configuring Database Context. Tables For Authentication: User - table store user information like 'email', 'password', 'firstname', 'lastname', etc. Roles - master table to store the roles like 'admin', 'user', 'manager',etc. UserRoles - a mapping table for the 'Users' & 'Roles' table to store the user roles information. Create Users Table: CREATE TABLE [dbo].[Users]( [Id] [int] IDENTITY(1,1) NOT NULL, [FirstName] [va

Usage Of Bootstrap(v5) Modal(Popup) In Angular(v13) Application

In this article, we are going to understand the usage of Bootstrap(V5) Modal in Angular(V13) applications. Create An Angular Application: Let's create an angular application to accomplish our demo. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Install And Configure Boostrap(V5) Install the Bootstrap NPM package. npm install bootstrap Now 'angular.json' file configure boostrap 'CSS', 'JS' references. Bootstrap Modal Usage: Let's implement a small sample to understand the usage of Bootstrap Modal. src/app.component.ts: import { Component, OnInit } from '@angular/core'; import { AppService } from './app.service'; declare var window: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { formModal: any; constructor() {}

A Demo On File Downloading In Blazor WebAssembly Application[.NET 6]

In this article, we are going to do a demo on file downloading in the blazor webassembly application. Create A .Net6 Blazor WebAssembly Application: Let's create a .Net6 Blazor WebAssembly sample application to accomplish our demo. We can use either Visual Studio 2022 or Visual Studio Code(using .NET CLI commands) to create any.Net6 application. For this demo, I'm using the 'Visual Studio Code'(using the .NET CLI command) editor. CLI command dotnet new blazorwasm -o Your_Project_Name Install And Configure HttpClient Instance: Install the 'Microsoft.Extensions.Http' NuGet. Package Manager Install-Package Microsoft.Extensions.Http -Version 6.0.0 CLI command dotnet add package Microsoft.Extensions.Http --version 6.0.0 Now register the 'AddHttpClient' in the 'Program.cs'. Program.cs: builder.Services.AddHttpClient(); Implement File Downloading Logic: Let's implement our sample in the 'Index.razor' page component. First, let&

Part-2 Angular JWT Authentication Using HTTP Only Cookie[Angular V13]

In Par-1 we had implemented a basic angular authentication using the HTTP only cookie. Now we are going to enhance some features like 'Authentication Guard', 'HTTP Interceptor To Refresh The JWT Token Inside The HTTP Only Cookie', 'User Logout'. Angular Route Guard For Authentication: Problem 1:- After successful authentication, we reload our angular application, or the user closes the browser and then opens again, we can see our user information will be lost. Problem 2:- Currently with our sample application, we can access any page means, if the user is not logged in also can access the 'dashboard' page, similarly if the user logged in can also access the login form page. Solution:- Implementing Angular Route Guard for authentication. In 'AuthService' let's add logic to load the authenticated user information either from the 'AuthService.userProfile' variable or from the browser local storage. Because if the application is rel