Skip to main content

Posts

.Net Core Authentication Using JWT(JSON Web Token)

.Net Core application has many different authentication techniques like Cookie Authentication, Microsoft Identity Library, Identity Server 4, JWT, OAuth, etc. For a single page application that uses .Net Core Web Rest API, JWT is one of the simple and best approaches for performing token-based authentication.
Here we going to understand the integration of JWT authentication for .Net Core API with a sample implementation. Overview On JWT:JSON Web Token is a digitally signed and secured token for user validation. JWT is constructed with 3 informative parts like: HeaderPayloadSignature
Create A Sample .Net Core API:Let's create a sample .Net Core API application to implement the JWT authentication. You can use an editor like Visual Studio 2019(Supports .Net Core 3.0 plus) or Visual Studio Code. Add User.cs File:Let's add a User.cs file that represents a model of the user table(table will be integrated later steps). Data/Entities/User.cs: namespace JwtApiSample.Data.Entities { public…

Configuration And Working Mechanism Of JSON Files On .Net Core Application Starts

.Net Core application JSON file configuration technique has come into picture by replacing traditional way like Web.Config file approach. By default application loads "appSettings.json" file on startup. If we have defined environment variable then application also loads environmental specific json files like "appSettings.Development.json"(for environment variable is Development), "appSettings.Stage.json"(for environment variable is Stage), "appSettings.Production.json"(for environment variable is Production) along with the "appSetting.json".Create A Sample .Net Core Application:Now for better understanding let's walk through with a sample .Net Core Web API application. The application can be created either by using Visual Studio 2019(VS Editor supports .Net Core Version 3.0plus) or visual Studio Code App Loads appSettings.json And appSettings.{Environmental_Variable}.json By Default:On application start, appSettings.json and appSet…

Over The Internet Share Locally Hosted .Net Core Application URL Using Ngrok App

ngrok:ngrok is an application that helps the developers to share their locally hosted applications (like .Net, Angular, Vue, Reactive, etc) over the internet. ngrok uses the tunneling concept of reverse proxy server that establishes a connection to locally running applications over the internet.
Here to demonstrate the sharing of a locally hosted application we are going to create a sample .Net Core application that runs on localhost and will be shared its URL using ngrok app. Note: ngrok application exposes any local hosted application URL. So we can expose any applications like .Net Core, Angular, Vue, NodeJs, etc..Net Core Web API Sample Application:Note: You can skip this section if you are exposing local url that is other than .Net Core application. Here I'm going to create a .Net Core Web API application, which runs locally using some local port. Then I'm going to expose the local URL over the internet to anyone using ngrok application.
Let's create a sample application…

Angular Material Drag And Drop UI Component(Part-3)

Precap:Part-1: Angular Material Drag And Drop UI Component(Part-1)

Part-2: Discussed on cdkDropListConnectedTo directive. Discussed on cdkDropListData directive. Discussed on transferArrayItem method. Discussed on cdkDropListGroup directive. Angular Material Drag And Drop UI Component(Part-2)
cdkDropListEnterPredicate Directive:A predicate is a function that returns boolean results either true or false. cdkDropListeEnterPredicate directive accepts a predicate as an input. So on dragging and dropping of an item into a container will be accepted based on predicate output, if the predicate returns true dropped item will be accepted by the container or if the predicate returns false dropped item will be rejected by the container. So by using the cdkDropListEnterPredicate directive, we can control the items that will be dragged and dropped onto the container. Sample Example To Control Items Drag And Drop Using cdkDropListEnterPredicate Directive:Let's first implement a sample of dragging and dr…

Angular Material Drag And Drop UI Component(Part-2)

Part -1 Precap:Introduction to drag and drop Angular Material CDK. Discussed cdkDrag Directive
Discussed cdkDropList Directive
Discussed the cdkDropListDropped event. Some simple examples
Click here for full details of part-1.
cdkDropListConnectedTo Directive:cdkDropListConnectedTo directive helps to drag and drop of items between the multiple cdkDropList instances. The communication between two different cdkDropList established either by assigning the cdkDropList template variable to the cdkDropListConnectedTo directive or by assigning the cdkDropList Html element id value to cdkDropListConnectedTo directive. cdkDropListData Directive:cdkDropListData Directive takes input like a component object that will render as Html Element items in cdkDropList instance. By assigning a component model object to cdkDropListData, makes our data to available in CDK drag and drop instance for sorting the data on each drag and drop of elements. transferArrayItem method:transferArrayItem method gets loaded fro…

Angular Material Drag And Drop UI Component(Part-1)

Angular Material Drag And Drop CDK provides a set of rich functionalities like as below:
Able to apply to drag functionality on any HTML elements with free motion over a pageSorting list of HTML rendered items.Custom drag handlersCustom drag place holdersLimit the area to drag for an item. This article is a series of parts where we going to discuss and understand all the features provided by drag and drop CDK.Create An Angular Sample Application:To understand step by step implementation of drag and drop functionalities, let's create a sample angular application. Command to create angular application: ng new your-project-nameCommand to install angular material package: ng add @angular/materialImport DragDropModule:DragDropModule is loaded from '@angular/cdk/drag-drop' package. Now we need to import this DragDropModule on to the NgModule of the app module to get all features of it. src/app/app.module.ts: import { DragDropModule } from '@angular/cdk/drag-drop'; @NgMod…