Coder Jony

Installing & Using Font Awesome Icons in Photoshop

Sun, 20 Oct 2019 19:08:50 Z

In this post, we will understand how can we use font-awesome icons in Photoshop. Font-awesome is a font library that contains hundreds of useful & latest icons in form of fonts. We can use these icons in our Photoshop design by following these easy steps. So let's just start:

Step 1: Visit Download page of Font Awesome library from this link - https://fontawesome.com/download & click on Free for Desktop button to download free fonts for your computer.

Step 2: Now, unzip the downloaded folder. You will found the folder structure like below.

Step 3: Double click on otfs folder, you will found 3 font files like below.

Step 4: Now, right click on all these 3 files one by one and click install button to install these fonts on your system.

Step 5: Open Photoshop and create a new design. You must see a popup window like below. Select height & width of the design here.

Step 6: Now, select the text option from the toolbox & open the fonts drop-down. Here you can find the font-awesome fonts which we just installed in previous steps.

Step 7: Open this link - https://fontawesome.com/icons and search the icon which you want to use. Once you find the icon, copy the icon text.

Step 8: Now, paste the copied text into Photoshop like below.

Step 9: Select all the text and select the font-awesome font from the drop-down. As soon as you select the font from the drop-down, this text will be converted into the icon.

Step 10: This is the final result. You can see the font-awesome font is now displaying as an icon or image in Photoshop.

Step 11: Important: Sometimes, you may find that even after selecting the font-awesome font, text is not converting into an icon. For this issue, you may try switching the two more available options Regular and Solid. This should fix your issue.

That's all. Please share you queries, feedback in below comment box.

Integrating Log4Net with ASP.NET Web API2 and SQL Server

Thu, 17 Oct 2019 18:36:40 Z

In this post, we will understand how can we integrate famous .NET Logging Library - Log4Net in our ASP.NET project. Though, particularly in this post I am using an ASP.NET Web API project, but the implementation will almost remain the same even if you want to integrate Log4Net in other ASP.NET applications such as MVC & Web Forms.

Log4Net Integration with ASP.NET WEB API 2 and SQL Server

Step 1: Select ASP.NET Web Application (.NET Framework) project type from the list to create any ASP.NET Application (Web Forms, MVC or Web API).

Step 2: Now select Web API project template as your ASP.NET Application.

Step 3: Once you select the WEB API project template, Visual Studio will create a solution for you with WEB API project. You will see a similar page on your screen after creating this project.

Step 4: Now, install log4net Nuget package in your Web API project.

Step 5: Now that you have installed log4net Nuget package, you can open References node of the project & verify that log4net DLL is present there.

Note: So far we have done the stuff to create the Web API project & install the Nuget package of log4net. Now, in next few steps - we will work with SQL Server to create the database where we will be logging the information, errors, warnings etc.

Step 6: Open SQL Server Management Studio & connect with the server using valid credentials.

Step 7: Once you are inside SQL Server, create a new database like below.

Step 8: Just type the name of the database in the text-box like below.

Step 9: Now, execute below script on this newly created database. This script will create the table where log4net will log the records.

CREATE TABLE [dbo].[Log] (
	[Id] [int] IDENTITY(1,1) NOT NULL PRIMARY KEY,
	[Date] [datetime] NOT NULL,
	[Thread] [varchar](255) NOT NULL,
	[Level] [varchar](50) NOT NULL,
	[Logger] [varchar](255) NOT NULL,
	[Message] [varchar](4000) NOT NULL,
	[Exception] [varchar](2000) NULL
)

Step 10: Once you execute above script, Log table will look like below in SQL Server.

Step 11: Now you need to add some configurations in your web.config file that Log4Net uses to log records. We will add these configurations in two steps.

First, add log4net section inside configSections like below.

<configSections>
    <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler, log4net" />
</configSections>

Secondly, add below log4net section in root configuration node. (Note: Update connection string according to your environment).

<log4net>
	<appender name="AdoNetAppender" type="log4net.Appender.AdoNetAppender">
	  <bufferSize value="1" />
	  <connectionType value="System.Data.SqlClient.SqlConnection, System.Data, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
	  <connectionString value="data source=localhost;initial catalog=Log4Net_Demo;persist security info=True;user id=sa;password=yourPassword;" />
	  <commandText value="INSERT INTO Log ([Date],[Thread],[Level],[Logger],[Message],[Exception]) VALUES (@log_date, @thread, @log_level, @logger, @message, @exception)" />
	  <parameter>
		<parameterName value="@log_date" />
		<dbType value="DateTime" />
		<layout type="log4net.Layout.RawTimeStampLayout" />
	  </parameter>
	  <parameter>
		<parameterName value="@thread" />
		<dbType value="String" />
		<size value="255" />
		<layout type="log4net.Layout.PatternLayout">
		  <conversionPattern value="%thread" />
		</layout>
	  </parameter>
	  <parameter>
		<parameterName value="@log_level" />
		<dbType value="String" />
		<size value="50" />
		<layout type="log4net.Layout.PatternLayout">
		  <conversionPattern value="%level" />
		</layout>
	  </parameter>
	  <parameter>
		<parameterName value="@logger" />
		<dbType value="String" />
		<size value="255" />
		<layout type="log4net.Layout.PatternLayout">
		  <conversionPattern value="%logger" />
		</layout>
	  </parameter>
	  <parameter>
		<parameterName value="@message" />
		<dbType value="String" />
		<size value="4000" />
		<layout type="log4net.Layout.PatternLayout">
		  <conversionPattern value="%message" />
		</layout>
	  </parameter>
	  <parameter>
		<parameterName value="@exception" />
		<dbType value="String" />
		<size value="2000" />
		<layout type="log4net.Layout.ExceptionLayout" />
	  </parameter>
	</appender>
	<root>
	  <appender-ref ref="AdoNetAppender"/>
	</root>
</log4net>

Important: In current post, we are using AdoNetAppender appender that is used to log data in SQL Server. If we want to change the target, we can use different type of log4net appender. For example, we have different types of Appenders in Log4Net.

AdoNetAppender

FileAppender

SmtpAppender

Complete List of Appenders

Below picture will give you more clarity on where you need to place above configurations in web.config file.

Step 12: Now, back in Web API project. Open Global.asax file and add XmlConfigurator.Configure();at the end of Application_Start event handler. Log4Net uses this method to read the configurations from config file and do it's initialization stuff.

Step 13: Now, modify the code of ValuesController like below, just to test the Log4Net integration. You can also copy & paste the code from here.

public class ValuesController : ApiController
{
    private readonly ILog log = LogManager.GetLogger("API Logger");

    public IEnumerable Get()
    {
        log.Info("Log Info Message");
        log.Debug("Log Debug Message");
        log.Error("Log Error Message");
        log.Warn("Log Warning Message");

        return new string[] { "value1", "value2" };
    }
}

Step 14: Press the F5 button to run the application and hit the Values controller like below. (Note: Application port may vary from below picture)

Step 15: You will see that application hits the break-point when you access the Values controller from browser. And it will also logs the records in your connected database.

Step 16: Just verify the data in Logs table by executing the script Select * FROM [dbo].[Logs]. You will find that all log data have been logged successfully into your SQL Server database.

That's all. Please share your comments, suggestions or feedback in below comment box.

Creating a Pipe to filter the items in the list using Angular 7

Sat, 27 Jul 2019 15:11:20 Z

Having a search box & filtering out the list on the basis of the text of that search box is a common development task in almost every software application.

In this post, we will understand how can we achieve the same functionality in Angular 7 using Pipe.

What is Pipe?
Pipes are a useful feature in Angular. They are a way to transform one value to another inside Angular template. There are some built-in pipes, but we can also create our own custom pipes. You can more read about pipes on Angular's website - https://angular.io/guide/pipes.

Creating a Pipe to filter the items in the list using Angular 7

In this post, I am using a list of a complex object for filtering purpose, instead of having a simple list of string. In our case, the component will somehow look like below.

// search text property
searchText: string;

// list of categories
categories: any[] = [
{id: 1, categoryName:"Schools"},
{id: 2, categoryName:"Colleges"},
{id: 3, categoryName:"Doctors"},
{id: 4, categoryName:"Hospitals"},
{id: 5, categoryName:"Advocates"}
]

Now we want to filter this list on the basis of the category name. To do this, we did two things.

First, we created a textbox & bound it with searchText which is a string property of the component.
Secondly, we created another property of type array that holds the above categories. We call that property as categories. Now, our template markup will look like this.

<!-- Search box -->
<input type="text" [(ngModel)]="searchText" placeholder="Search Category" />

<!-- List of categories -->
<ul>
  <li *ngFor="let item of categories | filter : searchText : 'categoryName'">
	{{item.categoryName}}
  </li>
</li>

filter.pipe.ts (Definition for Filter pipe)

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(items: any[], searchText: string, fieldName: string): any[] {

    // return empty array if array is falsy
    if (!items) { return []; }

    // return the original array if search text is empty
    if (!searchText) { return items; }

    // convert the searchText to lower case
    searchText = searchText.toLowerCase();

    // retrun the filtered array
    return items.filter(item => {
      if (item && item[fieldName]) {
        return item[fieldName].toLowerCase().includes(searchText);
      }
      return false;
    });
   }
}

Also, don't forget to register this filter pipe in app.module.ts file inside declarations array.

Solution: Could not load file or assembly 'System.Net.Http, Version=4.2.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The system cannot find the file specified.

Sat, 27 Jul 2019 14:44:12 Z

In this post, I have tried to explain both the root cause & solution for the above error.

Root Cause:

You normally get this issue when you take the reference of certain third party library in your application.

For example, you took the reference of RestSharp (A third-party library) from NuGet. That RestSharp internally may have used the reference of System.Net.Http 4.2.0.0 version. And your project is also using the reference to System.Net.Http 4.0.0.0 (From GAC). Now when you run the application & try to call any method which is using RestSharp, at the same time Runtime (CLR) tries to locate the System.Net.Http assembly with version 4.2.0.0 & when it fails to locate the desired version, it throws System.IO.FileNotFoundException exception with below error message.

Could not load file or assembly 'System.Net.Http, Version=4.2.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of > its dependencies. The system cannot find the file specified.

Here you can see How the Runtime Locates Assemblies?

Solution:

Just add below configuration in the web.config or app.config of your startup project.

<dependentAssembly>
	<assemblyIdentity name="System.Net.Http" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
	<bindingRedirect oldVersion="0.0.0.0-4.2.0.0" newVersion="4.0.0.0" />
</dependentAssembly>

This configuration instructs the runtime to resolve System.Net.Http assembly with 4.0.0.0 version only, whenever it looks for this assembly for any version between 0.0.0.0 to 4.2.0.0.

Here is the complete schema:

<configuration>  
   <runtime>  
	  <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">  
		<dependentAssembly>
			<assemblyIdentity name="System.Net.Http" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
			<bindingRedirect oldVersion="0.0.0.0-4.2.0.0" newVersion="4.0.0.0" />
		</dependentAssembly>
	  </assemblyBinding>  
   </runtime>  
</configuration>

Hopefully, this should fix the issue. If not, just let me know your comments in below comment box.

Useful Ionic-CLI Commands for Android Application Development using Ionic 4 and Cordova

Thu, 04 Jul 2019 12:18:44 Z

As I was developing an Android application using Ionic 4, I found a few commands quite useful during the development. I thought to make a note of those useful commands here.

ionic start [<name>] [<template>] - Create a new project.
ionic serve - Open up the Ionic application in the browser.
ionic cordova run android - Run the Ionic application in either emulator or connected Android device.
ionic cordova emulate android - Emulate an Ionic project on a simulator or emulator.
ioinc cordova build android - Build the ionic application & generates a debug .apk file.
ionic cordova build android --prod --release - Build the ionic application & generates a release .apk file.
ionic cordova platform add android - Add Android as a platform in an Ionic application.
ionic cordova prepare - Install platforms and plugins listed in config.xml of Ionic Cordova application.
ionic g - Generate pipes, components, pages, directives, providers, and tabs.

You can also find a complete list of Ionic CLI commands on its official website. Here is the link - https://ionicframework.com/docs/v3/cli/commands.html

Capitalize the first letter of input textbox using Directive in Angular 6

Thu, 27 Jun 2019 19:48:09 Z

To capitalize the first letter of the input textbox, we can create a custom directive in the Angular application.

Attribute Directive vs Structural Directive :

The directive which we are going to create is an Attribute Directive because we are manipulating only the behavior of the DOM element. There is one more type of directive which manipulates the DOM (add or remove DOM elements) known as Structural Directive.

In this example, I have created a custom directive TitleCaseDirective.

TitleCaseDirective.ts (Attribute Directive)

import { Directive, ElementRef, HostListener  } from '@angular/core';

@Directive({
  selector: '[appTitleCase]'
})
export class TitleCaseDirective {

  constructor(private el: ElementRef) {
  }

  @HostListener('blur') onBlur() {
    if (this.el.nativeElement.value) {
      const arr: string[] = this.el.nativeElement.value.split('');
      arr[0] = arr[0].toUpperCase();
      this.el.nativeElement.value = arr.join('');
   }
  }
}

Use of Directive in Component Template

<input appTitleCase type="text" class="form-control" />

This custom directive will now turn the first letter to uppercase once the user loses focus from the input.

How to use BehaviourSubject to share the data to other components in Angular

Sat, 27 Apr 2019 13:56:24 Z

We use BehaviourSubject to share the data with multiple components using a shared service.

For example, if we want to notify other components of the data change. Then we have to do two simple tasks.

We have to create a BehaviourSubject & an Observable of that BehaviourSubject in a service.
Secondly, we can subscribe to that Observable in other components.

I have created below service to notify another component to log out the user from the application.

1. data.service.ts - Read the comments marked with 1, 2, 3 & 4 steps. They explains their usage itself.

import { Injectable } from '@angular/core';

//1. Import BehaviorSubject from rxjs module
import { BehaviorSubject } from 'rxjs/BehaviorSubject'

@Injectable({
  providedIn: 'root'
})
export class DataService {

  //2. Create the data which we want to share with all the components
  private logoutStatus = new BehaviorSubject(false);

  //3. Now we want to broadcast this message or data, so we create an observable
  getLogoutStatus = this.logoutStatus.asObservable();

  constructor() { }

  //4. Create a method that updates the data (Behaviour Subject)
  logoutUser(){
    this.logoutStatus.next(true);
  }
}

2. logout.ts - In this, the logoutUser() method of DataService that will update the value of BehaviourSubject so that all & the observable (i.e. getLogoutStatus )of this BehaviourSubject will broadcast the message to all subscribers.

import { Component } from '@angular/core';
import { DataService } from './../../services/data.service'

@Component({
  selector: 'app-logout',
  templateUrl: './logout.component.html',
  styleUrls: ['./logout.component.scss']
})
export class LogoutComponent implements OnInit {

  constructor(private dataService : DataService) { }

  ngOnInit() {
    console.log("ngOnInit called");
  }

  onLogout(){
    this.dataService.logoutUser();
  }
}

3. app.component.ts - In this component, we have subscribed thegetLogoutStatus observable. The subscription handle will be executed every time whenever there is a change in the value of BehaviourSubject.

import { Component } from '@angular/core';
import { DataService } from './services/data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'MyApp';

  constructor(private dataService : DataService) { }

  ngOnInit() {
    this.dataService.getLogoutStatus.subscribe((data) => {
      if(data === true){
        alert("User has been loggedout");
      }
    })
  }
}

Solution: Can't bind to 'ngModel' since it isn't a known property of 'input'.

Thu, 25 Apr 2019 17:39:23 Z

Just add FormsModule in app.module.ts file your Angular application.

How to add bootstrap in an Angular application?

Sat, 20 Apr 2019 19:21:51 Z

Adding the bootstrap library in an Angular application is quite easy. Bootstrap Library consists of both CSS & JS files.

Bootstrap CSS files are used for design/UI purpose.
Bootstrap JavaScript files are used in some of its components such as Accordion, Tooltip, Modal Popup, Tabs, etc.

Now, let's understand - How can we add bootstrap library in the Angular application.

Step 1: Install Bootstrap

First, open angular CLI & hit below command.

npm install bootstrap --save

This will install bootstrap node module in your application inside node_modules folder.

Step 2: Adding Bootstrap Styles

There are two ways to add bootstrap CSS in the application.

Method 1: Open angular.json file & add bootstrap CSS file reference in styles array.

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]

Method 2: Open styles.css file which is present in the src folder & add an import statement like below.

@import "~bootstrap/dist/css/bootstrap.min.css";

Step 3: Adding Bootstrap JavaScript

Bootstrap JavaScript components depend upon two other JavaScript libraries - jQuery & popper.js. So first, we have to install these two dependencies from npm.

npm install jquery --save
npm install popper.js --save

After this, open angular.json file & update scripts section like below:

"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Step 4: Accessing Bootstrap JavaScript Library in Angular

So far, we have added the bootstrap JavaScript library to the application. But we might need to call some methods of this library such as modal('show') to show the modal popup, tab('show') to activate a tab.

In order to access these methods of bootstrap library & get proper intellisense support in Visual Studio Code IDE, we should install types for jQuery & Bootstrap libraries.

npm install @types/jquery --save
npm install @types/bootstrap --save

tsconfig.json - Look into this file for types array and add jquery and bootstrap entries.

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

That's all :)

Passing by value & passing by reference in C# using Reference Types

Tue, 16 Apr 2019 17:34:58 Z

Case 1:

Both are same.

public class Program
{
        static void Main()
        {
            Employee employee;

            employee = new Employee();
            PopulateEmployee(employee);
            Console.WriteLine($"Sr.No: {employee.SrNo} & Name: {employee.Name}");

            employee = new Employee();
            PopulateEmployeeByRef(ref employee);
            Console.WriteLine($"Sr.No: {employee.SrNo} & Name: {employee.Name}");

            Console.ReadLine();
        }

        public static void PopulateEmployee(Employee employee)
        {
            //employee = new Employee();
            employee.SrNo = 1;
            employee.Name = "Ankush Jain";
        }

        public static void PopulateEmployeeByRef(ref Employee employee)
        {
            //employee = new Employee();
            employee.SrNo = 1;
            employee.Name = "Ankush Jain";
        }
}

public class Employee
{
        public int SrNo { get; set; }
        public string Name { get; set; }
}

Case 2:

Instantiation of the parameter in passing by reference actually changes the value of properties of passed argument while passing by value does not.

public class Program
{
        static void Main()
        {
            Employee employee;

            employee = new Employee();
            PopulateEmployee(employee);
            Console.WriteLine($"Sr.No: {employee.SrNo} & Name: {employee.Name}");

            employee = new Employee();
            PopulateEmployeeByRef(ref employee);
            Console.WriteLine($"Sr.No: {employee.SrNo} & Name: {employee.Name}");

            Console.ReadLine();
        }

        public static void PopulateEmployee(Employee employee)
        {
            employee = new Employee();
            employee.SrNo = 1;
            employee.Name = "Ankush Jain";
        }

        public static void PopulateEmployeeByRef(ref Employee employee)
        {
            employee = new Employee();
            employee.SrNo = 1;
            employee.Name = "Ankush Jain";
        }
}

public class Employee
{
        public int SrNo { get; set; }
        public string Name { get; set; }
}

Reference: https://stackoverflow.com/a/1293120/1273882

How to fix - "Could not find a base address that matches scheme https for the endpoint with binding BasicHttpBinding. Registered base address schemes are..."

Tue, 26 Mar 2019 08:56:00 Z

Just follow below two steps:

Add missing HTTPS binding in IIS. Go to IIS > Website > Bindings > Add Binding.
See below screenshot.

Now, Add serviceBehaviours in web.config file like below:

<serviceMetadata httpGetEnabled="true" httpsGetEnabled="true"/>

WCF Service Error - "This collection already contains an address with scheme http"

Tue, 26 Mar 2019 08:48:42 Z

Just add below section in your web.config file.

<system.serviceModel>
     <serviceHostingEnvironment multipleSiteBindingsEnabled="true"/>
</system.serviceModel>

Database Unit Testing for SQL Server using tSQLt

Fri, 22 Mar 2019 03:56:59 Z

In this blog, I am sharing the key points which I noted while learning the basics of database unit testing for SQL Server.

Installation:

tSQLt must be installed on the SQL Server database.
Download the .zip file from its website.
Unzip that file, there will be mainly 3 SQL files.
- SetClrEnabled.sql
- tSQLt.class.sql
- Example.sql
First Enable CLR from the first file.
Second, set the database trustworthy from the script given in given link. Link - https://tsqlt.org/user-guide/quick-start/#InstallToDevDb
Third, run tSQLt.class.sql
These 3 steps will install tSQLt on your database.

Creating a Test Class

A Test Class is basically a database schema with some special properties applied so that tSQLt can recognize them as a test class.
A Test Class can contain many Test Cases. (Note: A Test Case is nothing but a Stored Procedure.)
To create a Test Class, we must run below command.

EXEC tSQLt.NewTestClass 'MyTestClass'; 
GO

Creating a Test Case

Creating a test case is easy. You only need to create a stored procedure on your test class schema.
The procedure name must begin with "test".

Running Test Cases

RunAll - RunAll executes all test cases on all test classes.
- i.e EXEC tSQLt.RunAll;
Run - Run is a versatile procedure for executing test cases. It can be called in three ways:
- With a test class name
- With a qualified test case name (i.e. the schema name and the test case name)
- With no parameter
Creating a Test Class, Test Case & Running them all - https://tsqlt.org/130/creating-and-running-test-cases-in-tsqlt

Important Points:

Every individual test cases are wrapped in a transaction which is rolled back at the end of the test.
How Test Cases are executed by tSQLt - https://tsqlt.org/user-guide/test-creation-and-execution/

How to use Materialize CSS in Angular application

Fri, 01 Feb 2019 04:41:44 Z

To install Materialize in your angular app. You just need to follow 2 steps.

Install the materialize-css node package in your application.
```
npm install materialize-css --save
```
This will install Materialize CSS.

Open angular.json file & add below styles & scripts.

"styles": [
          "./node_modules/materialize-css/dist/css/materialize.css",
        ],
"scripts": [
          "./node_modules/materialize-css/dist/js/materialize.js"
        ]

You are done. Now re-run your application.

Solution: The following untracked working tree files would be overwritten by merge

Wed, 16 Jan 2019 09:26:29 Z

Below, I have mentioned both root-cause & solution of above error.

Root Cause:

It seems that the files you want to ignore are already committed into the repository. And .gitignore doesn't actually ignore the files which are already committed into the repository.

Note that here untracked working tree files means that git is considering these files as untracked because .gitignore file have their entries.

Solution:

You can fix this issue by following below easy steps:

Create a new feature branch or separate branch.
Delete the files which you actually want to ignore. (i.e. files mentioned in .gitignore)
Commit these deleted files & push the code.
Now, raise the pull-request to merge this feature branch in your actual main branch.
Now, this issue has been fixed in main branch. You won't get this issue again.

Understand Authentication and Authorization in Web Applications

Tue, 25 Dec 2018 09:26:15 Z

Authentication - As Web API (Rest API) is stateless, so there should be some mechanism by which a server can identify the user in every request. So to enable a user's identity to a web-server, we pass some data in headers in each web-request to the server. The server reads that data & understand to identify the user. This process of identifying the user & ensuring that he is a valid one is known as Authentication.

Authorization - Now once we know that user is authenticated but we don't know how much access rights this particular user have over the application. So, the authorization is the process of giving access rights to a user.

Token Based Authentication in Web API 2 using OWIN

Tue, 25 Dec 2018 08:31:35 Z

In this post, we will learn how to secure Web APIs by implementing Token Based Authentication & Authorization in them. You can refer this post to understand what is Authentication & Authorization in web applications.

Authentication Methods in Web API

Basically, there are two most common methods for Authentication in Rest Based services.

Basic Authentication
Token Based Authentication (OAuth 2)

You can refer this link to understand the Basic Authentication. In this post, we will only concentrate on implementing Token Based Authentication in Web API.

Note that there are several ways to implement token-based authentication. Currently, I am aware of two types of tokens.

JWT Token
OWIN Based Token

In this post, we will learn about the implementation of OWIN Based tokens. So let's begin the game.

Implementing Token Based Authentication in Web API 2 using OWIN

Step 1: Create a new web application project in Visual Studio.

Step 2: Select Web API project template.

Step 3: Install this Nuget package - Microsoft.Owin.Security.OAuth. This package is a Middleware that enables the application to support OAuth 2.0 authentication workflow. This package is responsible for generating auth token, validating the token in ASP.NET pipeline & setting up User's identity.

Step 4: Now, create an OWIN Startup class. In this class, we will write the code to register the OWIN middleware. Name it StartUp.cs.

Step 5: Startup class will look like this initially.

Step 6: Now copy below code in StartUp.cs file to configure OAuth (Token Based Authentication) using OWIN Middleware. Here we registering OWIN OAuth Middleware in the application so that it can be the part of the request pipeline.

public void Configuration(IAppBuilder app)
        {
            ConfigureOAuth(app);
        }

        public void ConfigureOAuth(IAppBuilder app)
        {
            OAuthAuthorizationServerOptions OAuthServerOptions = new OAuthAuthorizationServerOptions()
            {
                AllowInsecureHttp = true,
                TokenEndpointPath = new PathString("/token"),
                AccessTokenExpireTimeSpan = TimeSpan.FromDays(1),
                Provider = new CustomAuthorizationServerProvider()
            };

            // Token Generation
            app.UseOAuthAuthorizationServer(OAuthServerOptions);
            app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions());

        }

After, copying above code, your file will look like this.

Step 7: Now implement CustomAuthorizationServerProvider class. This is the class in which, we will be validating user's username & password. This is purely a custom class. We can write a custom logic here to validate a user's credentials. We are not using ASP.NET Identity here.


public class CustomAuthorizationServerProvider : OAuthAuthorizationServerProvider
    {
        public override async Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)
        {
            context.Validated();
        }

        public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
        {

            context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });

            AuthRepository authRepository = new AuthRepository();
            bool isValid = authRepository.ValidateUser(context.UserName, context.Password);

            if (!isValid)
            {
                context.SetError("invalid_grant", "The user name or password is incorrect.");
                return;
            }

            var identity = new ClaimsIdentity(context.Options.AuthenticationType);
            identity.AddClaim(new Claim(ClaimTypes.Name, context.UserName));
            identity.AddClaim(new Claim(ClaimTypes.Role, "User"));

            context.Validated(identity);
        }
    }

The file will look like this.

Step 8: This is a demo class I have used in this example. Here, you will be validating the user's credentials from your application's database.

Step 9: Now add this Nuget package. If you don't add this, then your StartUp.cs file won't be executed. So just install the Nuget package - Microsoft.Owin.Host.SystemWeb.

Step 10: Build the application to ensure there is no compilation error. Once build is successful, press F5 to launch the application. You will see the application like below in your web browser.

Step 11: Now, it's time to generate the Access Token. Open postman & fill the information like below image.

Step 12: Also, make sure to set Content-Type to application/json. This is because, we explicitly tell the browser to send the response in JSON format.

Note: This may not be the necessary step, but I just did it.

Step 13: Once you hit execute button in postman, you will see that your breakpoint in GrantResourceOwnerCredentials will get hit. In this method, you will verify the user, set his claims. OWIN will take care of the information which you have shared with him. And it will then generate the token from all this information when context.Validated(identity); will be called.

Step 14: Now just look at the response in postman. You will see that we have received the access token in the response.

You can access the whole source code from GitHub -https://github.com/ankushjain358/TokenBasedAuthenticationUsingOWIN.

Related Important Links:

Difference between Basic Authentication & OAuth (Token Based Authentication)

The difference between Encryption, Hashing & Salting

Thu, 20 Dec 2018 05:46:54 Z

You might have heard these terms very often – Encryption, Hashing & Salting. In this post, I have tried to explain you all these terms in a very easy way.

Encryption

Encryption is the process of converting the information from one form to another using an encryption key. Encryption also allows us to recover the original information back using the corresponding encryption key.

Encryption is always done with the intention of recovering the original information back.
Encryption is a two-way process. It allows us to encrypt as well as decrypt the information.
Encryption & decryption key remains the same in case of Symmetric Encryption while in case of Asymmetric Encryption, they both are different.

Hashing

Hashing is the process of converting information from one form to another, but in case of hashing, information is not recoverable. Once a value is hashed, we can not get the original value from it’s hashed value.

Hashing is always done with the intention when we do not want to get the original data back.
Hashing is a one-way process. We can only encrypt a value but can’t decrypt it.
Hashing is mostly used to store passwords. We store the hashed password in the database & whenever the user enters his password, we hash it & compare it with the hashed password stored in the database. If both matches, only then a user is considered authenticated.

Salting

Salting is the process of adding additional data to the information before hashing it. For example,

Step 1: I want to hash my password - Pas$w0rd
Step 2: My Salt is – SALT
Step 3: I will append the salt with password – Pas$w0rdSALT
Step 4: Now I will hash this value Pas$w0rdSALT

Salting with hashing makes your information more confidential & not easily hackable.

Your Salt should always be very confidential. Though even if someone knows your salt cannot hack your information as hashing is itself very secure. But if an attacker tries various possible passwords & append your salt, then there is a possibility that he might end up with cracking the password.

Solution: System.BadImageFormatException: Could not load file or assembly

Thu, 20 Dec 2018 01:14:44 Z

Make sure that you are using the correct tool path (i.e. installutil.exe) for installing the application. This issue normally occurs when we attempt to use 32 bit (/platform:x86) version of the tool to install a 64 bit application or a 64 bit (/platform:x64) version of the tool to install 32 bit application.

Just confirm the path you are using is correct. There is a slight difference in both paths.

C:\Windows\Microsoft.NET\Framework\v2.0.50727\

C:\Windows\Microsoft.NET\Framework64\v2.0.50727\

Solution: Found a swap file by the name ".git/.MERGE_MSG.swp"

Wed, 19 Dec 2018 05:07:36 Z

Normally, you get this error message when you are performing GIT operations from two different places. Like I got this issue while I was using Git Bash (Command Line) & Visual Studio together to perform Git operations.

Reason:

This issue occurs when a commit or merge session is going on in one of the two instances of GIT. i.e. Git Bash & Visual Studio Git.
Both instances try to edit the same file & we get this error message.

Solution:

Complete the commit or merge session in one of the two opened instances.

Note: When I got this error message, I found that a window with commit message text-box was opened in Visual Studio. I just entered the commit message & committed the code. Later I also closed Git Bash window as well.

Reference: https://stackoverflow.com/a/13361874/1273882

Command to list all active channels in Redis Pub/Sub

Mon, 10 Dec 2018 23:16:29 Z

In Redis Pub/Sub, we create different Redis channels as per the application requirement. Each application using Redis Pub/Sub will use these channels for either publishing purpose or subscribing purpose.

Whenever any application publishes a message to a channel, all subscriber client applications which have subscribed to that channel will be notified immediately for that message.

Below we know about two important commands used in Redis PUB/SUB implementation.

Command to list all active channels in Redis Pub/Sub

Below command will list out all active channels for connected Redis instance.

PUBSUB CHANNELS

Command to list the number of subscribers subscribed to a Redis channel

If you want to know the number of subscribers to a channel, then you can use below command. This will return number of subscribers to a particular channel.

PUBSUB NUMSUB channelName

ASP.NET Core - Notes for Beginners

Sun, 02 Dec 2018 04:46:57 Z

ASP.NET Core is a free and open-source web framework, and the next generation of ASP.NET, developed by Microsoft and the community. It is a modular framework that runs on both the full .NET Framework, on Windows, and the cross-platform .NET Core.

ASP.NET Core (Key Points)

ASP.NET Core is a new framework to build and run applications on cross platforms. We can develop and host ASP.NET Core apps in all major OS i.e. Windows, Linux or Mac.
ASP.NET Core is basically a Console Application. It’s the main method creates a server or web-host and run this application on that server.
There are 3 types of projects in ASP.NET Core. WEB API, ASP.NET Core Razor Pages, ASP.NET Core MVC Style
It has StartUp.cs class that is being called by the Main method of console application.
StartUp.cs class is a start-up class that is being invoked when the application runs the first time.
It has mainly two methods ConfigureServices & Configure & one constructor.
ConfigureService – You can use this method to configure services. i.e. ASP.NET Core’s default Dependency Injection.
Configure – You can use this method register Middleware components in your application request pipeline. i.e. Cookie Based Authentication, Token Based Authentication, Logging, ExceptionHandling, RouteHandling etc.
ASP.NET Core removes the concept of using System.Web and HTTP Modules to be a part of it’s request pipeline & it becomes possible due to the concept of Middleware.
Request Delegates or Middleware Components should be registered in Configure Method.
Request Delegates or Middleware Component will use extension methods i.e. Run, Use & Map. These may be anonymous methods also. (Extension Method of IApplicationBuilder class)
In ASP.NET Core, Middleware is the replacement of HTTP Modules in ASP.NET 4.x or below.
OWIN is a Middleware for ASP.NET. A replacement of HTTP Modules.
KATANTA is a project that contains many OWIN Middleware Components that has been developed by Microsoft team.
The goal of OWIN is decoupling asp.net web applications from IIS. With the help of OWIN Middleware Components, the app will not rely on System.Web dll and HTTP Modules.

Few Important Links

Solution: rzc generate exited with code 1 in Visual Studio 2017

Fri, 30 Nov 2018 11:14:24 Z

I just got this error while publishing my first ASP.NET Core application in Self Contained Deployment mode.

Solution

One-liner solution to this problem is - Just repair your Visual Studio.

Though I took some screenshots of repairing steps, I thought attaching those screenshots here might help you.

Step 1: Search for Visual Studio Installer:
Step 2: Select repair option
Step 3: Click on OK
Step 4: At the end, restart the system.

After re-starting the system, you will find that issue has been fixed. :)

Get Previous and Next page URLs in Umbraco

Wed, 28 Nov 2018 11:22:08 Z

To get previous & next page URLs in Umbraco, you can use below piece of code in your razor view.

@if(CurrentPage.Previous() != null){
       <a href="@CurrentPage.Previous().Url">Previous</a>
}
	
@if(CurrentPage.Next() != null){
       <a href="@CurrentPage.Next().Url">Next</a>
}

Coder Jony

Installing & Using Font Awesome Icons in Photoshop

Integrating Log4Net with ASP.NET Web API2 and SQL Server

Log4Net Integration with ASP.NET WEB API 2 and SQL Server

Creating a Pipe to filter the items in the list using Angular 7

Creating a Pipe to filter the items in the list using Angular 7

filter.pipe.ts (Definition for Filter pipe)

Solution: Could not load file or assembly 'System.Net.Http, Version=4.2.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The system cannot find the file specified.

Root Cause:

Solution:

Useful Ionic-CLI Commands for Android Application Development using Ionic 4 and Cordova

Capitalize the first letter of input textbox using Directive in Angular 6

Attribute Directive vs Structural Directive :

TitleCaseDirective.ts (Attribute Directive)

Use of Directive in Component Template

Top 50 Angular Interview Questions

How to use BehaviourSubject to share the data to other components in Angular

Solution: Can't bind to 'ngModel' since it isn't a known property of 'input'.

How to add bootstrap in an Angular application?

Step 1: Install Bootstrap

Step 2: Adding Bootstrap Styles

Step 3: Adding Bootstrap JavaScript

Step 4: Accessing Bootstrap JavaScript Library in Angular

Passing by value & passing by reference in C# using Reference Types

Case 1:

Case 2:

How to fix - "Could not find a base address that matches scheme https for the endpoint with binding BasicHttpBinding. Registered base address schemes are..."

WCF Service Error - "This collection already contains an address with scheme http"

Database Unit Testing for SQL Server using tSQLt

Installation:

Creating a Test Class

Creating a Test Case

Running Test Cases

Important Points:

How to use Materialize CSS in Angular application

Solution: The following untracked working tree files would be overwritten by merge

Root Cause:

Solution:

Understand Authentication and Authorization in Web Applications

Token Based Authentication in Web API 2 using OWIN

Authentication Methods in Web API

Implementing Token Based Authentication in Web API 2 using OWIN

The difference between Encryption, Hashing & Salting

Encryption

Hashing

Salting

Solution: System.BadImageFormatException: Could not load file or assembly

Solution: Found a swap file by the name ".git/.MERGE_MSG.swp"

Reason:

Solution:

Command to list all active channels in Redis Pub/Sub

Command to list all active channels in Redis Pub/Sub

Command to list the number of subscribers subscribed to a Redis channel

ASP.NET Core - Notes for Beginners

ASP.NET Core (Key Points)

Few Important Links

Solution: rzc generate exited with code 1 in Visual Studio 2017

Solution

Get Previous and Next page URLs in Umbraco