DEV Community: Nilesh Sanyal

The Most Incredible Article About AWS Networking Essentials

Nilesh Sanyal — Tue, 27 Jun 2023 17:08:02 +0000

Read the original article here

When you start learning AWS, you should have a clear understanding of networking essentials. After you get an AWS account, AWS creates a default network space for you. Either you can use that or if you have a different use case, you have to configure different networking components under AWS.

This article will guide developers to start their journey on AWS by introducing networking fundamentals with easy-to-understand examples. After you go through the article, I am sure that you will be in a good spot to tackle different networking challenges faced in your career.

Before you understand the intricacies of AWS networking, I expect you to have a clear understanding of the below-mentioned topics.

Fundamental networking concepts.

Fundamental understanding of IPv4 addressing.

Once you have a clear understanding of the above topics, you can return to this article. You can refer to the links above to gain knowledge on the topics mentioned above.

You may be wondering how IP addressing is related to AWS networking, let's first discuss that.

How IP Address Comes Into the Picture

From the diagram shown above, we can say that whenever we open google.com or any valid URL in the browser, the browser connects to the web server. The web server contacts the DNS server as it does not know anything such as Google, it identifies only IP address. Then DNS server gets the appropriate IP address from the DNS zone file for the URL that we typed in the browser’s address bar. In this scenario, it’s google.com. If it finds it, it will show the Google home page in a browser.

What is Cloud Networking

Cloud networking provides the ability to manage, operate, build, and securely connect the networks created by you across all of your cloud environments and distributed cloud and edge locations. Cloud networking allows you to architect infrastructure that is resilient and highly available which are some features of a cloud-native application. It also helps you to deploy your applications faster, at scale, and closer to your end users when you need it.

Now, that you understood cloud networking, let's now discuss the various underlying parts of it in depth.

What is Amazon VPC

You can think of VPC or Virtual Private Cloud as a flat that you have taken on rent. With VPC, you can provision logically isolated sections of the AWS cloud where you can launch different AWS resources in a virtual network that you define.

You have complete control over the things mentioned below.

Virtual networking environment including the selection of own IP address ranges
Creation of subnets
Configuration of route tables
Configuration of network gateways

If you want, you can also create a hardware virtual private network connection between your corporate data center and your VPC, which in turn will allow you to connect servers between the two as if they were on the same network.

If you don't understand what I mean by a selection of own IP address ranges, subnets, route tables, and network gateways. Don't worry, I will explain each one of them in great detail along with practical examples.

Different Components of VPC

There are different components that are part of VPC. Let's discuss them one by one first.

Region and Availability Zone

You can easily customize the network configuration for your VPC based on your requirements. A VPC spans a whole region, so within a region, we have our VPCs. VPCs can't span across regions.

Specifically, the logical isolated space provided by VPCs are different than the public space outside of the VPC, where services like Amazon S3 sit. This is a private space, and you have full control over how you can configure the VPC. The diagram below depicts these facts.

Subnets

Now, within a region, we have availability zones, and you can use those inside VPC with the help of creating something known as subnets and assigning those subnets to an availability zone, it can't span across multiple AZs (Availability Zones).

You can connect a subnet to the internet, to other VPCs, and also to your own data centers. You can also route traffic to and from your subnets using route tables.

But, we can have multiple subnets in the same AZs. Then also we can deploy our resources such as EC2 instances into those subnets. The diagram below explains this fact.

VPC Router

You can’t see the VPC Router, but we configure it while we configure the route table. VPC router takes care of all routing for connections that are going outside of a subnet. Route table configures the VPC router for you behind the scene.

Internet Gateway

If we want to access the internet, we also need an internet gateway. It is attached to your VPC, you can have only one internet gateway per VPC. The internet gateway is used to send the data out to the internet. That is known as egress traffic. When it is used to send the data in from the internet it is called ingress traffic.

Route Table

We configure our route table with a route to the internet gateway ID, which tells it to send all traffic that doesn’t fit one of the networks in the route table before it to the internet gateway.

Note: You can create multiple VPCs within a region. But, you have a limit of 5 by default. Although, you can request to increase that as well.

CIDR Block

CIDR blocks play a vital role in AWS networking. Each VPC has a CIDR block, that’s the overall block of addresses from which you then create the addresses you assign to your subnets. So, you can think of it as a master block of addresses. Each VPC has a different CIDR address. From the diagram below you can observe that 2 VPCs have 2 different CIDR blocks.

CIDR stands for Classless Inter-Domain Routing. From the overall CIDR blocks, we can create Network IDs for our subnets. They are within that overall CIDR block but, they have a different subnet mask, so that is essentially a subset of the overall available addresses this is why it’s really important to make sure we specify our CIDR blocks correctly so that we have enough networks and enough hosts per network.

From the diagram below you can observe that as well.

Rules for Defining CIDR Blocks

CIDR block size can be between /16 and /28.
The CIDR block must not overlap with any existing CIDR block that’s associated with the VPC.
You cannot increase or decrease the size of an existing CIDR block.
The first four and last IP addresses are not available for use.
AWS recommends that you use CIDR blocks from RFC 1918 ranges:

The below table explains different ranges that fall under RFC 1918.

RFC 1918 Range	Example CIDR Block
10.0.0.0 – 10.255.255.255 (10/8 prefix)	Your VPC must be /16 or smaller, for example, 10.0.0.0/16
172.16.0.0 – 172.31.255.255 (172.16/12 prefix)	Your VPC must be /16 or smaller, for example, 172.31.0.0/16
192.168.0.0 – 192.168.255.255 (192.168/16 prefix)	Your VPC can be smaller, for example, 192.168.0.0/20

Bigger CIDR blocks are typically better (more flexibility).
Smaller subnets are OK for most use cases.
Consider deploying application tiers per subnet.
Split your high-availability resources across subnets in different availability zones.
VPC peering requires non-overlapping CIDR blocks. This is related to all VPCs in all regions or accounts you want to connect.

There is a tool to help you create subnets as shown in the screenshot below.

Network ACL

The Network Access Control List (NACL) applies only to traffic entering or exiting the subnet. Also, its scope is limited to subnet only. The below diagram explains network ACL.

Security Groups

On the other hand, a security group is applied at the instance level of an EC2 instance. So we can have a security group that is applied to several different subnets. That means, it can filter traffic going between instances in the same subnet or across different subnets. Below is the diagram of a security group.

Best Practices For Security Groups

In a typical three-tier architecture for a web application, few resources are public and few of them are private. So, we need to first isolate them one by one and then put public resources such as the user interface of the web application under a security group that accepts an inbound connection under HTTP protocol for port 80 and from any device connected to the internet.

Also, the destination of that public security group could be an EC2 instance under HTTPS protocol, having port 80 which is responsible for running a web server. Now, let's discuss how that EC2 instance will talk to the backend of the application.

The typical security group configuration for that EC2 instance should accept an inbound connection over HTTP protocol under port 80 and it will accept that connection only from the public security group. The destination for that security group for the EC2 instance will be a private security group.

Now, you might ask what resources to put under a private security group. Good question, under that group you have to put only resources that are private in nature. Such as the application server that our web server talks to.

You can configure another EC2 instance with a private security group and can run the application server in that EC2 instance.

Now, let's discuss the differences between stateful and stateless firewalls.

Stateful vs Stateless Firewalls

Actually, the security group is a stateful firewall and Network ACL is a stateless firewall. The stateful firewall allows the return traffic automatically. You just need to set the rule such that the client will allow the inbound traffic to your web server i.e., port 80.

In the case of a security group, if there is no allow rule then there is an implicit deny rule already applied to it.

Whereas in the case of a stateless firewall, it only checks for an allow rule for both inbound and outbound connections. Network ACL (Access Control List) does this.

Final Words

I hope that after completely reading this article on AWS networking essentials, you had a solid ground of knowledge about it. If this article proves helpful to you, don't forget to share it with others, thank you!

Know Everything About Angular 8 Template Driven Forms

Nilesh Sanyal — Fri, 08 Nov 2019 14:23:15 +0000

Read the original article here

Angular provides a lot of options to perform validations for the HTML form. To fulfill this need, we can use template-driven forms in angular. This article will walk you through each and every detail regarding the template-driven form validation approach in angular.

Let's start talking about what actually is angular forms first, then we will dive deeper into template-driven form.

Why Angular Forms?

Generally, in every frontend applications, forms play an important and inevitable part. This statement is especially true for huge, enterprise-grade applications. Sometimes, users need to fill out a form that consists of multiple tabs.

To solve this need to handle forms properly, angular provides powerful tools; angular forms. That comes as a built-in feature when we build any angular application from scratch. We don't need to rely on third-party packages to work with angular forms.

So if anything goes wrong while the user fills out the form, they must be notified what is the reason that causes that problem. To tackle that situation angular itself provides two approaches.

Template Driven Forms
Reactive Forms

What is Template Driven Form in Angular?

You can think of a template-driven form similar to an HTML form. The only difference is that in this type of form, we need to use angular specific directives, events, etc. In this approach, we define the actual template that we want to use in forms. That's why this approach is called a template-driven approach.

In other words, you can say that in the template-driven form we write our logic, validations, etc. in the template part ( i.e, HTML code). Template-driven forms are named primarily because the form controls are defined in the template of the component.

As the form is primarily defined in the template layer, it also means that the validation errors are managed through the template.

Before we jump into how you can actually work with template-driven forms, it would be better if you know how template-driven forms actually work behind the scene.

Template Driven Forms: How They Actually Work?

To clearly understand the actual inner-working principle behind template-driven forms first, you need to be familiar with two terms which are as follows.

FormControl
FormGroup

What is FormControl in Angular?

As per angular's official docs: FormControl tracks the value and validation status of an individual form control.

After reading the description about form control from the official site, you may feel confused and thinking of what actually is form control. Let me explain what is form control.

Basically, FormControl is a class that inherits the AbstractControl class in angular. This class can perform various tasks, such as accessing the value, act according to how the user interacts with the form, respond as per the events occurred while the user fills in the form, etc.

So, for each input field in our form, we need to create an instance of the FormControl class. With the help of this class, we can check different things.

For example, we can get the value of the input field, we can check if the content of input field has been changed or not, we are also able to check if the field contains a valid value or not.

If we found that the field doesn't have valid values, we can display validation errors for that particular field.

There exist different properties in FormControl. These are as follows.

valid
invalid
dirty
pristine
touched
untouched
value
errors

What is dirty in the Angular Form?

Simply saying, by the term "dirty", angular is able to detect that the field's content has been changed by the user.

What is Pristine in Angular?

In simple words, "pristine" tells angular that the field's content has not been modified by the user.

Ok, then tell me about touched and untouched

At a glance, you may think that the term "touched" means that the user has not touched the form-field. Yeah, you are right!

In terms of programming, "touched" means that the user has placed the focus on that particular field. By the term "focus" I mean the user puts the cursor blinking in that field so that he or she can start typing content there.

I guess I don't have to discuss what "untouched" means.

Let's talk about the angular form's error object

In one sentence, all the errors that result after the user fill out the form are stored in the error object. These errors are stored in form of key-value pairs. In which the field name itself is the key and the error message is the value for that corresponding key.

What is Form Group in Angular?

According to angular's official website: FormGroup tracks the value and validity state of a group of FormControl instances.

Let's discuss what is form group and its purpose. FormGroup is a class that represents a group of controls in a form. Each of the forms refers to a form group.

Technically we can say that each form group can consist of multiple form control elements in angular. As we know earlier, we can easily access each form control elements various properties (e.g, valid, invalid, dirty, pristine, etc.).

Template Driven Forms: A Simple Example

Let's assume we want to build a checkout form for an e-commerce store that takes the user's first name, last name, address, etc. under the Billing Info section. Then in Payment Info section user enters details such as the name on the debit card, card number, expiry date, CVV number, etc.

Please note that angular material is used to build the user interface of this application. If you don't know about it, you can check out this article here.

Following is the screenshot of the app.

To follow along with this tutorial, download the complete project by clicking here.

Explanation of app.component.html File

In the above code snippet of the app.component.html file, we have created two expansion panels. The main purpose of it is to represent similar form elements together as a single entity. First of the panel will hold all billing information, while the second one will hold all details regarding the payment information that the user will provide to make the payment.

We also applied a directive called "ngForm" that is provided by angular automatically. Its main purpose is to keep track of the form's overall validation status. But, under the hood, it creates a FormGroup instance at the top level.

We want to properly handle the validation for each individual form elements. To achieve this, we have created a template variable "userForm" and assigned ngForm to that variable. After doing that, we are able to get values for properties like dirty, touched, pristine, etc.

Here, we have applied a "ngModel" directive to the input field that asks user to enter his or her first name. In template driven approach, angular will create a FormControl object and associate the input field with that object.

Also, we must set name property for that input field, it is mandatory to do so. Otherwise, angular will not be able to distinguish that input field.

Later, we want to make sure that if user did not fill up the first name, the user will be notified that he or she forgot to do so. For this purpose, we have created a local reference variable called "fName" and stored "ngModel" in that variable.

We are using HTML5's built-in "required" validator. Then with the help of ngIf directive, we check to see if first name field has focus and it is invalid. If these conditions are true we set the show user a message "You must enter first name".

With the help of angular material element, we checked to see if "firstName" input field contains any required type of error or not. Here the question mark ("?") symbol denotes optional property. We used it to indicate if errors property exists then we want to make use of that property.

Now, you may wonder why "ngModelGroup" directive is used. Let's explain the main role of it. Sometimes, we may need to send a complex object to the back-end after submitting the form. For this purpose, angular make use of this directive.

For example, in this example, we want to send billing information as well as payment information to the back-end. Under billing, we have fields such as first name, last name, gender, etc. Inside payment, we have card number, CVV number, etc.

So, it logically makes sense to send billing data inside the "billing_information" object and payment data inside the "payment_information" object. That's why, we created two div elements and assigned first ngModelGroup's value "billing_information" and second value as "payment_information".

Explanation of app.component.ts File

Here, we are handling the "ngSubmit" event emitted by the "ngForm" directive. We simply wrote the code to display the submitted data in the browser's console window.

The screen-shot of the submitted data is shown below.

Final Words

I hope that after reading this article on angular template-driven forms, you have a clear concept in it. If you have any doubts, you can ask me questions. If anyhow this article proves beneficial to you, please share it among others. Thank you!

The Comprehensive Guide to Angular 8 Reactive Forms

Nilesh Sanyal — Fri, 08 Nov 2019 14:07:14 +0000

Read the original article here

Form validations are vital when building any kind of web application. Depending on the complexity, we can use two approaches; template-driven approach and reactive approach. This article covers angular reactive forms in-depth so that you don't need to look for other tutorials on the web.

What is Reactive Forms in Angular?

If you are familiar with angular's template-driven approach to validate forms, you know that angular creates FormControl and FormGroup objects itself after we write our code in the template part (i.e, HTML part) of the code.

But, if we want to have more control over our validation logic, then we should use reactive forms. This approach helps to deal with various complex scenarios. For example, suppose you want to build a form where input fields are displayed depending on the data that you get from the server, then you have only one option, you have to use reactive forms.

When we are using reactive forms, we need to explicitly write code to programmatically handle form validations.

Why Use Angular Reactive Forms?

There are a number of advantages of using reactive forms in angular, which are as follows.

Read/ write the value of the input at any point. (Even before the form is built)
Define advanced validation rules, supports asynchronous validators that are especially useful when the user is filling out a form and at the same time an HTTP request is sent to the server.
Be notified and react immediately when the value changes.
Access the native HTML form element.
Reset the form.
Reactive forms are significantly easier to test.

Reactive Forms: How They Actually Work?

In order to understand how reactive forms work, at first you need to know the basics of how template-driven form works. In a reactive-form based approach, we define the form model by FormGroup and FormControl instances in the component's class.

Then we bind the template to the form model, which means our form is not directly modifying the data model. Now, you may ask the question, how to create a form model?

To create a form model, we need to define a FormGroup directive in our form's template part. That FormGroup represents the entire form. A FormGroup contains properties that refer to the state of the form itself. To represent the state, we need to provide an instance of the FormControl object as a key-value pair in FormGroup object.

Following is the example of defining a form model in the component's HTML file.

A FormControl object refers to each input element in the form. To bind the input field with the FormControl object we need to specify the FormControlName value in the component's HTML file. Then we need to refer to that value in the component's typescript file.

Following is the example of defining a form model in the component's typescript file.

What is The Use of FormBuilder in Angular?

Sometimes, you need to work with large and complex forms, then you need to repeatedly type "new FormControl('')", "new FormGroup({})". So it becomes a tedious way to represent such large forms. Also, you can hardly read the codes and code debugging may take a long time.

Fortunately, angular helps us out in this regard. You can use FormBuilder class to represent larger, complex forms in such a way so that it is easier to read, understand, debug and maintain.

The following screen-shot is the example of using FormBuilder class.

What is FormArray?

As per angular's official documentation: it tracks the value and validity state of an array of FormControl, FormGroup or FormArray instances.

Let me explain what that means. In simple words, FormArray is a class that makes sure that FormControl instances are put together in an array. You can think of the FormArray class similar to FormGroup class that holds objects of FormControl instances.

So, What Are the Differences Between FormArray and FormGroup in Angular?

Simply saying, FormArray is an alternative to FormGroup for managing an unknown number of form elements. FormArray and FormGroup both allow manipulating form elements.

But, if we compare them then FormArray methods are better because it's methods ensure that the controls are tracked properly in the form's hierarchy.

Another point to be noted is that FormArray's data gets serialized as an array, whereas FormGroup's data is serialized as an object.

Angular Reactive Forms Example

Let's build a form that will collect user's various details such as name, email address, age, address, card number, etc.

Following is the screenshot of the app that we will create.

It would be better if you download the complete project by clicking the button here.

Explanation of app.component.ts File

In the screen-shot above, we discussed that we need a form group directive inside which we can put individual child elements inside an object. On line 25, we want to send contact information under "contactInfo" object. That's why we used a form builder object's group function.

Inside that function, we wrote the fields that come under "contactInfo" object, for example, name, age, email, address, etc. Similarly, on line 33, we put the card number field under "paymentInfo" object.

In the above screen-shot, we have used some built-in validators that angular already provides for us to implement. If these built-in validators are not enough for us, then we should go for implementing our own custom validators.

For example, we have implemented a custom age validator that takes care of validating ages that must be between 18 to 60. The code snippet for implementing that validator is shown below.

In order to create a custom validator, we need to implement "ValidatorFn" interface. To do so, we created "validateAge" static function inside "AgeValidators" class. We did this so that we can easily call the function without creating an instance of the class.

This function takes AbstractControl as a parameter and returns ValidationErrors if any errors exist, or null if none exists. To represent "ValidationErrors", we need to return a key-value pair (e.g, "validateAge: true").

We have written our logic to implement the custom validator, now we have to display the error message whenever a user enters age that is not between 18 to 60. To display that error message we need to write code as shown in the highlighted portion below.

Finally, we have added functionality so that the user can add multiple addresses. To achieve this, we used FormArray. At first, we defined the FormArray under FormBuilder class.

We need to refer to the FormArray instance, in our template file also, we can do that with the help of FormArrayName directive. Then we iterated through all the dynamically added address fields and attached an event called "removeAddress()" to remove address fields at a specific index.

Outside the loop, we added a button that executes "addFields()" event. The code snippet for addFields() and removeAddress() is shown below.

Final Words

I hope that after completely reading this article on angular reactive forms, you have a solid understanding of it. If you have any doubts, you can ask me questions. If this article proves helpful to you, please share it among others. Thank you!

Implementing Oauth2 Social Login With Facebook Part 2

Nilesh Sanyal — Thu, 17 Oct 2019 18:45:50 +0000

Read the original article here

In the previous part of this article, we discussed what is OAuth2 and how OAuth2 helps to integrate social login to our application in an easy approach. Also, we discussed how you can use OAuth2 to create a facebook application on their official website that will later come handy to continue building our node js application.

This article is the second part of implementing social login with facebook. If you missed that article, you can read it here.

OAuth2 Workflow For Facebook Login Application

Let's discuss the workflow of the application as per the above screenshot. To create the application we require 3 main parties involved. The first one is the angular application, second is the Facebook server itself and last but not least the server which will act as a REST API written in Express JS Framework.

At first, users will try to login to our application. To do that they will click on the "Login With Facebook" button. Then a dialog will open that will ask the user to enter their Facebook credentials. Finally, the user gives permission to access some of their Facebook data.

After allowing access, our angular client gets the access token from the Facebook server. For now, we can easily access facebook data from the angular client application.

But, the backend server needs to know that. In order to do so, the angular application sends a request to the backend server with the access token. To verify that token the backend sends a verification request directly to the Facebook server.

If the Facebook server finds the token to be a valid one, it sends back the user's profile information. After receiving that data, the backend express js server verifies that the user profile data is correct and finally creates a new user in the application.

If the user already exists in the backend, the user profile will be updated instead.

Then the backend server will create a JSON web token that will identify the user. Backend returns that token as a response to the client application. The client app will store that token so that when sending requests to the server it can send the token along with the request.

What We Will Be Building

We will create an application that will have a login with facebook functionality. In order to understand the overall functioning of this app, you need to have fundamental knowledge in Angular and Node JS.

To follow along with this tutorial, download the project file by clicking here.

Then make sure you install node js and MongoDB. After downloading is finished extract the rar file, then open two command prompts or terminal windows. In one terminal navigate to the "frontend" folder. In another one, navigate to the "backend" folder. You need to start your MongoDB database too.

Open ".env" file in "backend" folder, put actual values in "FACEBOOK_APP_ID" and in "FACEBOOK_APP_SECRET" environmental variables. To get those values you need to put your app id and app secret keys that were generated when you created a Facebook application on facebook developer's website.

You may have to change other values as per your needs. For example, if you want to change the database name, you can do so by changing the value for "DB_DATABASE" variable.

The terminal where you opened the "frontend" folder run this command "npm start". In another terminal where the "backend" folder is opened, run "npm run dev-server".

Building The Frontend With Angular

Let's start building the application's frontend part with Angular. To connect our angular app with Facebook, we need to use Facebook's Javascript SDK.

For this we need to add the link to that SDK, we can do so with the help of script tag in index.html file as shown below.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Frontend</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

  <!-- facebook javascript sdk -->
  <script src="//connect.facebook.net/en_US/sdk.js"></script>

</body>
</html>

Adding Bootstrap To The Project

Open another terminal, navigate to the location of the "frontend" folder. Run "npm install bootstrap" command, this will install bootstrap locally. Also, you need to add font-awesome for adding facebook icon to the login button.

Keep that terminal open, we will need this terminal when we will build our angular application. For doing this, run "npm install font-awesome". Then add that dependency in the angular.json file as shown below in the code snippet.

Creating Login Component For Our OAuth2 Facebook Application

When we will run our application, the user will see the login page. For that purpose, we need to create a login component. Run "ng g c login" in the terminal window. Open login.component.html file and add the following codes for designing the login component.

<div class="container">
    <div class="row">
      <div class="col-md-12 custom-card">
          <div class="card text-center">

              <div class="card-body">
                <h5 class="card-title">Log In With Facebook</h5>
                <p class="card-text">Log in with your existing facebook account</p>
                <button class="btn btn-primary fb-btn" (click)="fbLogin()"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i> Login With Facebook</button>
              </div>
            </div>
      </div>

    </div>
  </div>

In the above code snippet, fbLogin() method is called when the "Login with Facebook" button is clicked. Let's write what will happen when that button will be clicked.

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { Router } from '@angular/router';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(
      private userService: UserService,
      private router: Router
  ) { }

  ngOnInit() {
  }

  fbLogin() {
    this.userService.fbLogin().then(() => {
      console.log('Called service from login component');
      // console.log(response);
      this.router.navigate(['dashboard']);
    });
  }

}

In the above code snippet, the fbLogin() method calls user service that performs an API call to our backend server and returns the promise object. After getting that promise object, the user is redirected to the dashboard page.

Creating User Service For Our OAuth2 Facebook Application

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare const FB: any;

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

  constructor(private http: HttpClient) {
    FB.init({
      appId :  'YOUR_FACEBOOK_APP_ID',
      status : false,
      cookie : false,
      xfbml  : false,
      version : 'v4.0'
    });
   }

  fbLogin() {
    return new Promise((resolve, reject) => {

      FB.login(result => {
        if (result.authResponse) {
          return this.http
            .post(`http://localhost:8000/users/auth/facebook`, {access_token: result.authResponse.accessToken})
            .toPromise()
            .then(response => {
            const token = response;
            if (token) {
              localStorage.setItem('id_token', JSON.stringify(token));
            }
            resolve(response);
            })
            .catch(() => reject());
        } else {
          reject();
        }
      }, { scope: 'public_profile,email' });
    });
  }

  isLoggedIn() {
    return new Promise((resolve, reject) => {
      this.getCurrentUser().then(user => resolve(true)).catch(() => reject(false));
    });
  }

  getCurrentUser() {
    return new Promise((resolve, reject) => {
      return this.http.get(`http://localhost:8000/api/auth/me`).toPromise().then(response => {
        resolve(response);
      }).catch(() => reject());
    });
  }

  logout() {
    localStorage.removeItem('id_token');
    localStorage.clear();
  }

}

This user service will communicate with the Facebook server and our backend server. This service is responsible for performing the following tasks.

Making sure so that users can log in with their Facebook profile.
Logging users out.
Checking if users are logged in or not.
Getting details of currently logged in users.

To create the service issue this command in terminal. "ng g s user".

Explanation of the Code Snippet

In the UserService typescript class, a library is initialized from the facebook javascript SDK. Here, we need to replace "YOUR_FACEBOOK_APP_ID" with the application id that we got when we created the Facebook application on the facebook's developers website.

In fbLogin method, we are calling FB.login method that will display a dialog window, so that users can log in. If users are not logged in this dialog will be displayed. This dialog also asks users to allow the application to access user's data.

The response coming from FB.login method contains information whether the user is logged in or not and if they have allowed our application to access their data.

After getting response we call our backend to log in to the application. If user is able to log in to the backend, we will get a token as a response from the backend server.

We stored that token in local storage. So that, later when we will send a request to the backend, we are able to send the token alongwith the request. The main role of the token is to identify the current user.

The getCurrentUser method gets the data of currently logged in user from the server.

The logout method removes the token from the browser's local storage.

Creating Dashboard Component For Our OAuth2 Facebook Application

Run "ng g c dashboard" in the terminal to create dashboard component. Code snippet for dashboard.component.html is shown below.

<div class="navbar navbar-default navbar-fixed-top">
  <ul class="nav navbar-nav navbar-right">
    <li role="menuitem"><a class="dropdown-item" (click)="logout()">Logout</a></li>
  </ul>
</div>

<div class="page-header"></div>

<div class="container">

  <div class="row">
    <div class="col-lg-8 col-md-7 col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading text-center">Our Awesome application</div>
        <div class="panel-body" align="center">
          Current User email: {{ currentUser.email }}
        </div>
      </div>
    </div>
  </div>
</div>

In the above code snippet, we are displaying currently logged in user's email address.

Let's write the code for getting currently logged in user's details. Code snippet for dashboard.component.ts file is displayed below.

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { Router } from '@angular/router';

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

  public currentUser: any = {};

  constructor(private userService: UserService, private router: Router) { }

  ngOnInit() {
    this.userService.getCurrentUser().then(profile => this.currentUser = profile)
        .catch(() => this.currentUser = {});
  }

  logout() {
    this.userService.logout();
    this.router.navigate(['/login']);
  }

}

In the code snippet, at the initialization phase of the dashboard component, we are loading user's data. We do so by calling the user service's getCurrentUser method inside ngOnInit method. After that we store user's data in currentUser object.

I guess, you remembered this currentUser object, it is used in dashboard component's html page to access currently logged in user's email address.

In the logout method, we are calling user service's logout method. After user is successfully logged out, they are redirected to the "login" route.

Creating Guards For Our OAuth2 Facebook Application

Let's assume we want to implement some sort of functionality such that we will allow only those users to visit the dashboard page who are already logged in.

We won't allow users who are not logged in and will redirect them to the login page when they will try to visit the dashboard page.

To add this functionality to an angular application, a guard is used.

There exist four types of guards in angular, these are as follows.

CanActivate: This guard decides whether a route can be activated or not. If this guard returns true navigation will continue to otherwise navigation will not continue to the next route.
CanActivateChild: It decides if a child route can be activated.
CanDeactivate: It is helpful to decide if a route can be deactivated.
CanLoad: It helps to decide whether a module can be lazy-loaded or not.

We need to add two guards in this application.

To create the auth guard type "ng g g auth" in the terminal window. The code snippet for AuthGuard is below.


import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router } from '@angular/router';
import { UserService } from './user.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private userService: UserService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.checkLogin();
  }

  checkLogin(): Promise<boolean> {
    return new Promise((resolve, reject) => {
      this.userService.isLoggedIn().then(() => {
          resolve(true);
      }).catch(() => {
          this.router.navigate(['/welcome']);
          reject(false);
      });
    });
  }

}

In the above snippet, AuthGuard checks if the user is logged in or not. This is possible with the help of UserService's isLoggedIn method. If the user is logged in, we will resolve the promise, and allow the user to visit the dashboard page.

Otherwise, the user will be redirected to the login page.

Similarly to create another guard named anonymous, type "ng g g anonymous" in the terminal. The code snippet for it is displayed below.

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router } from '@angular/router';
import { UserService } from './user.service';

@Injectable({
  providedIn: 'root'
})
export class AnonymousGuard implements CanActivate {
  constructor(private userService: UserService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.checkLogin();
  }

  checkLogin(): Promise<boolean> {
    return new Promise((resolve, reject) => {
        this.userService.isLoggedIn().then(() => {
            this.router.navigate(['/dashboard']);
            reject(false);
        }).catch(() => {
            resolve(true);
        });
    });
  }

}

In the code above, AnonymousGuard is used for checking if the user is not logged in. Its functionality is defined in UserService's isLoggedIn method. If the user is logged in the user will be redirected to the dashboard page.

Defining Routes For Our OAuth2 Facebook Application

import { AuthGuard } from './auth.guard';
import { AnonymousGuard } from './anonymous.guard';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [AnonymousGuard]
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the route file, we define what component angular will load when a specific route is being accessed by the user. For example, for visiting the login route the LoginComponent will load. When a user visits the application without any path, in that scenario, the LoginComponent will be loaded by default.

Explaining The AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';

import { JwtModule } from '@auth0/angular-jwt';
import { HttpClientModule } from '@angular/common/http';

export function tokenGetter() {
  return localStorage.getItem('id_token');
}

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter,
        headerName: 'x-auth-token'

      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the above code snippet, we have used a new module named "auth0/angular-jwt", so that we can automatically attach a JSON web token as an authorization header. The browser attaches this header when the application sent the HTTP request.

The main role of tokenGetter function is to get the JSON web token from the of the current user from the browser's local storage. Angular fetches this token with the key "id_token".

Building The Backend With Express JS

Let's create the backend part of our application. We will be using the Express Js framework for creating the REST API. For storing user information we will use a MongoDB database.

Project Dependencies At a Glance

We are using the lightweight non-opinionated framework of Node i.e, Express Js. The body-parser module will take care of handling incoming request bodies with a middleware. The "jsonwebtoken" module will handle the JSON web token.

"passport" module will take care of authentication and "passport-facebook-token" will specifically handle the Facebook authentication. "mongoose" will communicate with MongoDB database. The "dotenv" module facilitates the use of environmental variables and the "cors" module will help to enable CORS on our server.

Creating The Node Server

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const jwt = require('jsonwebtoken');
const expressJwt = require('express-jwt');
require('dotenv').config();
const router = express.Router();
const cors = require('cors');
const User = require('./models/user');

// mongoose connection defined as IIFE( immediately invoked function expression)
(async function() {
    try {
        await mongoose.connect(`mongodb://${process.env.DB_HOST}:${process.env.DB_PORT}/${process.env.DB_DATABASE}`, { useNewUrlParser: true, useUnifiedTopology: true });
        console.log('Connected to mongodb successfully');
    } catch(error) {
        console.log('Error connecting to mongodb');
    }
})();

const app = express();

const corsOption = {
    origin: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    credentials: true,
    exposedHeaders: ['x-auth-token']
};
app.use(cors(corsOption));
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());

// middleware for handling token
const authenticate = expressJwt({
    secret: process.env.EXPRESS_JWT_SECRET,
    requestProperty: 'auth',
    getToken: (req) => {
        if(req.headers['x-auth-token']) {
            return req.headers['x-auth-token'];
        }
        return null;
    }
});

const getCurrentUser = async (req, res, next) => {
    try {   
        const user = await User.findById(req.auth.id);
        req.user = user;
        next();
    } catch(error) {
        next(error);
    }
};

const getSingle = (req, res) => {
    const user = req.user.toObject();
    delete user['facebook'];
    delete user['__v'];
    res.json(user);
};

app.use('/users', require('./routes/users'));

router.route('/auth/me')
      .get(authenticate, getCurrentUser, getSingle);

app.use('/api', router);

const port = process.env.PORT || 8000;
app.listen(port, () => console.log(`Server running on port ${port}`));

module.exports = app;

In the above code snippet, at first all the dependencies are declared, then while configuring the CORS middleware in line number 23, we make sure that the "x-auth-token" header is visible to the angular client.

This step is necessary otherwise our angular client would ignore this custom header. It is done with the "exposedHeaders" property.

To connect with the MongoDB database, in line number 12, we have used the IIFE (Immediately Invoked Function Expression). If you don't know what it is, you can know more about it here.

In line number 36, we want to validate JWT(JSON Web Token) in every frontend request. If we find that the JSON Web Token is valid, then "req.auth" will be set with the decoded JSON object. Later the middleware that will perform authorization will use this object.

In line number 47, the user data is fetched by user id, and then that user data is stored in the request object within the "user" property. Finally in line 57, to extract only selected data from the user object, we removed two properties namely "facebook" and "__v".

Creating The user Routes File

const express = require('express');
const router = express.Router();
const passport = require('passport');
var passportConfig = require('../config/passport');

//setup configuration for facebook login
passportConfig();

const userController = require('../controllers/users');

router.route('/auth/facebook')
      .post(passport.authenticate('facebookToken', { session: false }), userController.facebookOAuth);

module.exports = router;

In line number 8, we invoked the passportConfig function, which has the actual implementation of how passport js module will handle facebook login functionality.

In this file, we have defined the route where we have configured to use passport js's token-based strategy for authenticating with Facebook login. That's why, in line number 13, you will notice that we have set to authenticate with "facebookToken", we set "session" as false.

Then we invoked the userController's facebookOAuth function.

Creating The passport.js File

const passport = require('passport');
const facebookTokenStrategy = require('passport-facebook-token');
const User = require('../models/user');
module.exports = function () {
    passport.use('facebookToken', new facebookTokenStrategy({
        clientID: process.env.FACEBOOK_APP_ID,
        clientSecret: process.env.FACEBOOK_APP_SECRET
    }, async (accessToken, refreshToken, profile, done) => {
        try {

            const existingUser = await User.findOne({ 'facebook.id': profile.id });

            if(existingUser) {
                return done(null, existingUser);
            }

            const newUser = new User({
                method: 'facebook',
                facebook: {
                    id: profile.id,
                    email: profile.emails[0].value,
                    token: accessToken
                }
            });

            await newUser.save();
            done(null, newUser);

        } catch(error) {
            done(error, false);
        }
    }));
};

In this file, we are checking if any user exists in the database, if one user is found, we simply return the user object. Otherwise, we create a new user and then return that user object instead.

Creating users Controller File

const JWT = require('jsonwebtoken');
const User = require('../models/user');
const JWT_SECRET = process.env.JWT_SECRET;

createToken = auth => {
    return JWT.sign({
        id: auth.id
    }, JWT_SECRET, { expiresIn: 60 * 120 });
}

module.exports = {
    facebookOAuth: async (req, res, next) => {

        if(!req.user) {
            return res.send(401, 'User not authenticated');
        }

        req.token = createToken(req.user);
        res.setHeader('x-auth-token', req.token);
        res.status(200).json(req.token);
    }
};

In the above code snippet, we are storing the user's id in a token. That token is known as JSON Web Token (JWT). After generating JWT, we send it to the frontend (i.e, angular application). We send the token with the help of a custom header i.e, "x-auth-token".

Creating user Model File

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

var userSchema = new Schema({
    method: {
        type: String,
        enum: ['facebook'],
        required: true
    },
    facebook: {
        id: {
            type: String
        },
        email: {
            type: String
        },
        token: {
            type: String
        },
        select: false
    }
});

var User = mongoose.model('User', userSchema);

module.exports.User = User;

Conclusion

Finally, you have a complete application that enables users to login with their existing Facebook account. You have created that app that follows the OAuth2 protocol in order to build this application.

For developing the frontend part we used Angular. Then the frontend will communicate with a backend that is built using Express Js. If you find this article helpful, consider sharing this with others. Thank you!

Implementing Oauth2 Social Login With Facebook Part 1

Nilesh Sanyal — Thu, 17 Oct 2019 18:44:22 +0000

Read the original article here

In this article, you will have a clear understanding of how to use oauth2 authentication to implement facebook login with node js. Adding social login to your application has a lot of advantages. First of all, users of your application don't need to fill up a long registration form containing 10 or even more input fields.

Also while attempting to login to any application, they often forget their password. They, don't want to go through the password recovery process, as they find it tedious to do so.

The solution to this problem is if are able to register and login users to our application with their social network accounts in which they already have accounts. We can implement this functionality with the help of an authentication scheme known as Oauth2.

You can check out my article on the callback function here.

What is Oauth2

As per the official site of Oauth: OAuth 2.0 is the industry-standard protocol for authorization. OAuth 2.0 supersedes the work done on the original OAuth protocol created in 2006. OAuth 2.0 focuses on client developer simplicity while providing specific authorization flows for web applications, desktop applications, mobile phones, and living room devices.

In simple words, it is an authentication and authorization scheme in which users on the internet are able to access their information on other websites, without providing their account credentials ( username and/or password).

Only one requirement exists; that is, the user must authorize the application to access their data for a selected OAuth provider.

Why OAuth2 is Used

Users don't need to remember their credentials

Users can sign up or log in to any application that are using OAuth2 without using any credentials such as email id and/or password. They simply need to authorize the application to access their information for a selected OAuth provider. This step is done for one-time only.

Prevents security holes

In the Oauth2 mechanism, the user doesn't provide passwords to sign in or sign up for the application. So, from the development point of view, developers don't need to store a user's password. This, in fact, prevents inappropriate use of storing passwords.

Developer friendly

Developers can easily implement oauth2 in an application. They just need to go through the technical documentation for the specific OAuth provider. For example, if sign in and/or sign up with facebook functionality needs to be implemented, the developer needs to visit the official docs page for facebook OAuth provider.

Ability to handle non-web clients

In the OAuth2 authorization process, the program that sends requests to the authorization server is known as the client. The client can be a browser, a mobile app or any other device. That's how OAuth2 is able to handle non-web clients also.

How OAuth2 Works

Before discussing how OAuth2's working principle, it would be better if we discuss the key roles played by each component in this protocol.

Resource Owner: It refers to the user who gives permission to authorize an application in order to access their account. The authorization's scope determines the application's access to the user's account.
Resource or Authorization Server: The authorization server is responsible for verifying the identity of the user. Resource server refers to a server that hosts the protected user's accounts.
Client: It refers to the application that accesses the user's account. But, in order to do so, it must be authorized by the user, and that authorization process must go through a validation process carried by an API.

Now, you know the roles played by each component; let's discuss the overall workflow of OAuth2 in simple words.

The client or the application sends requests for authorization to access resources from the resource server.
If the user accepts the request, the application receives permission to access the user's data as per the scope of the permission.
The client requests an access token from the authorization server or API representing the authenticity of its own identity. These access tokens life span is very short, think of their life span in terms of hours and minutes.
If the authorization server authenticates the application's identity, then the server generates an access token to the application.
The application requests the resource from the resource server or API. Then it sends the access token to the server for authentication.
If the resource server finds that the access token is valid then it serves the resource to the application.

You need to register your application before using OAuth2 with it. It can be done by visiting the service's website's developer portion. The following details are required in order to do this.

Application Name
Application Website
Callback or redirect URL

What is Redirect URL in OAuth2

Redirect URL means where the service will redirect users after they authorize or deny your application. It also points to the route where you will write codes to handle access tokens.

What is Client Id in OAuth2

After registering the application, the service issues client credentials in the form of client id that is nothing but a unique string to identify the application and it is used by the service itself. Also, it helps to create an authorization URL that is displayed to the users.

What is Client Secret in OAuth2

The client secret's role is to authenticate the identity of the application to the service API when the application requests to access a user's account. The value of the client secret must be kept as a secret and should not be disclosed to anyone.

What is Refresh Token in OAuth2

We already discussed that the access token has a very short life-span. When the access token expires then refresh token enables the client to reauthorize without asking the resource owner to reauthenticate.

Alright, we discussed basics about what OAuth actually is, why we need it and what is the internal working principle behind OAuth2. Let's get down to building a node js application having facebook login built inside it that uses OAuth protocol.

Creating OAuth2 Facebook Application

At first, we need to create a facebook application, to do so visit the facebook developers page. Then log in with your Facebook account, this step is necessary because after doing this you will be able to get an application id and application secret that is mandatory for connecting our node js application with Facebook.

1) After login click on the "Get Started" button, then you will something similar as shown in the screenshot below.

2) Click on the "Next" button, then you need to choose your job role. Choose "Developer" (recommended).

3) You need to create an app first, the screen-shot for this step is shown below.

4) Click on "I am not a robot" option checkbox.

5) After this step, you will be redirected to the "Add Product" page. On that page, click on the "Setup" button.

6) Then you need to choose the platform for which you want to add facebook login functionality. Select "www" option.

7) Then you need to enter the URL of your website. If you do not have a site in production, you can definitely use "localhost". I used "http://localhost:8000" for my this application. Click the "Save" button.

8) Then skip the rest of the steps, click the "Settings" option in the left-hand menu.

9) In the Settings page, you need to add redirect URL in order to tell facebook where a user will be redirected back after authorization. Here, again I am using localhost for doing this. I have added "http://localhost:8000/auth/facebook/callback" as the redirect URL. Click on the "Save" Changes button.

10) Then go to the main settings link in the top-left position. That is highlighted in the screen-shot shown below.

11) You will see app id and app secret keys, copy these and paste them somewhere. We will need them later.

That's it, you have successfully created a facebook application which is the first step for integrating facebook login to the node js application that we will create.

Conclusion

I hope now you have a clear understanding of how oauth2 can be used to provide facebook login to a node js application. If you find this article helpful, consider sharing it with others. Thank you.

Facts You Need To Know About Javascript This Object Today

Nilesh Sanyal — Sun, 06 Oct 2019 04:09:18 +0000

Read the original article here

All of us know that javascript supports object-oriented programming features. So we can say that an object is a basic building block of OOP ( object-oriented programming). There is one special object available in javascript, "this" object.

In this article, we will learn how "this" keyword actually works, how the value of "this" object is helpful in different situations.

But, before diving more deeply about "this" object, we need to know the fundamentals of how the browser executes js code.

Understanding Execution Context

As we all know, javascript is a scripting language. So, naturally, the interpreter interprets javascript code. Then that the code gets executed line by line. The scope in which the code is executed is known as the execution context.

Let's understand this concept with an example in real-life scenarios. Suppose you were asked about your role in the project in which you are currently working. Then in response to this question, you will briefly explain your role. So, you gave your answer in the context for which the question was asked. A similar concept is applicable in javascript's execution context.

When any code is executed in javascript, it is evaluated as one of the following.

Global context: In this environment, your code is run for the first time.
Function context: It is applicable whenever the flow of execution enters a function body.
Internal context: Text that will be executed inside the internal eval function falls under this scope.

In the above screenshot, the red border indicates global context, green one refers to a function or local context. Global context can be accessed from any other context in the javascript code.

When a function is called it creates a private scope, in which anything declared inside of the function can not be directly accessed from outside the current function scope.

But, a function can easily access a variable that is declared outside of its current context. This is the fundamental concept of the execution context.

Role of Javascript this Object in Execution Context

Now, you have a clear concept on execution context, let's discuss how "this" object plays its role in it.

We already know that javascript is executed as a single thread, that means only one statement will run in the browser. Other actions will be stored in a stack which is known as the execution context.

The execution context is changed depending on the item that is present at the top of this stack. The object that "this" refers to changes every time when the execution context is changed.

"this" object refers to the global object. Whenever a code is run as part of a function call, then "this" refers to the global object.

For example, when we run javascript in the browser, the window object is considered a global object. In Node Js environment, a unique object "global" will be the value of "this".

What Does this in Javascript Mean

The keyword has different meanings and these depend on exactly where "this" keyword is used.

It refers to the global object that is global if is called in a Node Js environment and it belongs to the window object if it is executed in the browser environment.
At the time when a function is executed as a property of an object, then "this" refers to the parent object.
When a function is called with the "new" operator, then "this" refers to the newly created instance.
When a function is executed with apply and call method then at that time "this" refers to the value passed as the first parameter of apply or call method.

Let's discuss these use cases one by one.

Javascript this Object Use Cases

In IIFE(Immediately Invoked Function Expression) :

If you don't know what is IIFE, you can know more about it here. If "use strict" option is turned on, then the value of "this" will be undefined. Also, the global object refers to undefined in case of the window object.

Refers To a Current Instance

When we define a class in javascript, and if we define a constructor there, then that constructor will return a new instance of that class. For that scenario, "this" keyword will refer to the current instance of the newly created class.

Refers To Parent Object

In javascript, the property of an object can be a value or a simple method. At the time when the method that belongs to an object is called then "this" refers to the object that contains the method which will be executed.

In the above code snippet, when user.showMessge() method of user instance is called, "this" keyword refers to the user object instead of the global object. That's why it displayed "false" as output.

But, when only showMessage() method is called, "this" keyword refers to the global object. So, that time "true" is displayed. At the time when fun1() is called, it displayed "true" as it was treated as a normal function.

Uses With call() and apply() Methods

Javascript function is known to have 3 unique functions, those are call(), apply() and bind() functions. With the help of these functions, we can explicitly specify what should be referenced by "this" keyword within the calling function.

The main difference between call and apply method is that call() function expects parameters to be passed individually, where apply() function expects them to be passed as an array of parameters.

Final Words

I hope that I am able to clear all your doubts regarding javascript "this" object. If this article proves beneficial to you, share it among others.

Javascript Callback Functions In Depth Guide for 2019

Nilesh Sanyal — Sat, 21 Sep 2019 05:23:09 +0000

Read the original article here

Javascript callback functions; another important concept you must need to understand. Otherwise, you might face lot of struggles for becoming a successful javascript developer. But I am sure that after reading this article thoroughly you will be able to overcome any obstacles you previously had with callbacks.

Before, I will talk more about callback function, but at first, you need to have some minimal level of knowledge about functions. I mean you should know what a function is, how it actually works, what are different types of functions etc.

A Quick Recap: Javascript Function

What is a Function?

A function is a logical building block inside of which a set of codes are written in order to perform a specific task. Practically, functions allow writing codes in more organized way that is also easy to debug and maintain. Functions also allow code reuse.

You define function once, and call it when you need to without writing the same codes again and again.

Syntax for Declaring a Function

We talked a little about what a function is. Now, let's see how to declare a function in javascript.

Using Function Constructor: In this approach, the function is created with the help of "Function" constructor. Technically, this approach is less efficient than declaring function with the function expression syntax and function declaration statement syntax.

Using Function Expression: Typically, this approach is same as variable assignment. In simple words, the function body is considered as an expression and that expression is assigned to a variable. Functions defined with this syntax can be either named or anonymous.

A function that have no name is known as anonymous function. Anonymous function are self invoked, means it calls itself automatically. This behavior is also known as immediately invoked function expression(IIFE).

Using Function Declaration Statement: Actually, this method is the old school method that is used commonly in javascript. Here, after the keyword "function" you have to specify the name of the function. After that, if the function accepts multiple parameters or arguments; you need to mention them too. Although this part is completely optional.

In the body of the function, the function must return a value to the caller. After a return statement is found, the function will stop executing. Inside the function, the parameters will act as a local variable.

Also, the variables that are declared inside the function will be local to that function. Local variables can be accessed within that function only, so variables with the same name can easily be used in different functions.

Invoking a Function

The function declared before will be invoked when any one of the following occurs:

When an event occurs for example, user clicks on a button or user selects some option from the dropdown list etc.
When the function is called from the javascript code.
The function can also be invoked automatically, we already discussed that in anonymous function expression.

The () operator invokes the function.

What is Javascript Callback Function?

As per MDN: A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

I know after reading this technical definition, you are confused and hardly able to understand what is actually a callback function.

Let me clarify this with simple words, a callback function is a function that will be executed just after another function has finished executing. Callback function is a function that is passed as an argument to another javascript function. That callback function is executed inside of the function it was passed into.

In javascript, functions are treated as first-class objects. By saying first-class object, we mean that a number or a function or a variable, can be treated as same as any other entity in the language. Being a first-class object, we can pass functions to other functions as variables and functions can be returned from other functions too.

Functions that can do this is known as higher order functions. A callback function is actually a pattern. The word "pattern" means some sort of proven methodology to solve a common problem in software development. There it is better to call the use of callback function as a callback pattern.

Why We Need Javascript Callback?

The client-side javascript runs in browser and the main browser process is a single threaded event loop. If we try to execute long-running operations within a single-threaded event loop, the process is blocked. This is technically bad because the process stops processing other events while waiting for your operation to complete.

For example, "alert" statement is considered as one of the blocking codes in javascript in the browser. If you run alert; you can no longer do any interaction within the browser, until you close the alert dialog window. In order to prevent blocking on long-running operations, callback is used.

Let's dive deep so that you will understand exactly in which scenario callback is used.

In the above code snippet, getMessage() function is executed at first and then displayMessage() is executed. Both displayed a message in the browser's console window and both of them executed immediately.

But in certain situations, some codes are not executed immediately. For example, if we assume that getMessage() function performs an API call where we have to send the request to server and wait for the response, then how we will be able to deal with it ?

Simple, to handle that kind of scenario, we need to use callback functions in javascript.

How To Use Javascript Callback Function?

Rather than telling you about the syntax of javascript callback functions, I think it would be better if we try to implement callback function on our previous example. The code snippet is shown below in the following screen shot.

In order to use callback function, we need to perform some sort of task that will not be able to display results immediately. To emulate this behavior, we are using javascript's setTimeout() function. That function will take 2 seconds to display the message "Hi, there" to the console window.

After this message is displayed, then "Displayed message" will be shown in the console window of browser. So in this scenario, at first we are waiting for the getMessage() function and after this function is executed successfully, we are executing displayMessage() function.

How Javascript Callback Works?

Let me explain what actually happened behind the scene in the previous example.

As you can see from the previous example, in the getMessage() function, we are passing two arguments; first argument is the "msg" variable which gets displayed in the browser's console window and second argument is the "callback" function.

Now, you may wonder why "callback" function is passed as the argument. It's because to implement callback function, we must pass a function as an argument to another function.

After getMessage() function finishes it's task, we are calling that "callback()" function. After that when we are calling getMessage() function, we passed reference to "displayMessage()" function, which is treated as a callback function.

Note carefully that, when getMessage() function is called, we are only passing the reference to the "displayMessage" function. That's why, you will not see the function invoke operator i.e, "()" beside it.

Is Javascript Callback Asynchronous?

Javascript is considered as a single threaded scripting language. By the term "single threaded" it means that javascript execute one code block at a time. When javascript is busy executing one block, it is not possible for it to move to next block.

In other words, we can say that javascript code is always blocking in nature. But this blocking nature, prevents us to write code in certain situations when we are not able to get immediate result after running some specific tasks.

I am talking about tasks such as following.

Sending API call to certain endpoint for getting data.
Sending network request to get some resource (for example, text file, image file, binary file etc. ) from a remote server.

To handle these situations, we must write asynchronous codes and callback function is one approach to deal with these situations. So, callback functions are asynchronous in nature.

What is Javascript Callback Hell ?

Callback hell occurs when multiple asynchronous functions are executed one after another. It is also known as pyramid of doom.

Let's assume, you want to get list of all github users, then among the users you want to search for only top contributors for javascript repository. Then among the persons, you want to get details of the person whose name is Jhon.

To implement this functionality with the help of callbacks, the code snippet will be similar as shown below.

http.get('https://api.github.com/users', function(users) {
  /* Display all users */
  console.log(users);
  http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc', function(contributors) {
  /* Display all top contributors */
    console.log(contributors);
    http.get('https://api.github.com/users/Jhon', function(userData) {
    /* Display user with username 'Jhon' */
      console.log(userData);
    });
  });
});

From the above code snippet, you can see that the code becomes harder to understand, harder to maintain and also harder to modify. This happens due to nesting of all the callback functions.

How do you stop Callback Hell?

Multiple techniques can be used to avoid callback hell there are as follows.

By using promises.
With the help of async await.
By using async.js library.

I have already discussed, how to work with promises and how async await can be helpful to avoid callback hell.

By Using Async.js Library

Let's talk about working with async.js library in order to avoid callback hell.

As per the official website of async.js : Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript.

Async.js provides near about 70 functions in total. For now, we will discuss only two of them i.e, async.waterfall() and async.series().

async.waterfall()

It is useful when you want to run some tasks one after the other and then pass the result from the previous task to the next task. It takes an array of functions "tasks" and a final "callback" function that is called after all functions in "tasks" array have completed or a "callback" is called with an error object.

var async = require('async');
async.waterfall([
    function(callback) {
      /*  
        Here, the first argument value is null, it indicates that
        the next function will be executed from the array of functions.
        If the value was true or any string then final callback function
        will be executed, other remaining functions in the array 
        will not be executed.
      */
        callback(null, 'one', 'two');
    },
    function(param1, param2, callback) {
        // param1 now equals 'one' and param2 now equals 'two'
        callback(null, 'three');
    },
    function(param1, callback) {
        // param1 now equals 'three'
        callback(null, 'done');
    }
], function (err, result) {
    /*
      This is the final callback function.
      result now equals 'done'
    */
});

async.series()

This function is helpful when you want to run functions and then you need to get the results after all the functions have executed successfully. Main difference between async.waterfall() and async.series() is that async.series() dont pass the data from one function to another function.

async.series([
    function(callback) {
        // do some stuff ...
        callback(null, 'one');
    },
    function(callback) {
        // do some more stuff ...
        callback(null, 'two');
    }
],
// optional callback
function(err, results) {
    // results is now equal to ['one', 'two']
});

Javascript Callback vs Closure

Closure

In technical terms, a closure is the combination of a function that are bundled together having references to its surrounding state.

Simply saying, a closure allows access to outer function's scope from an inner function.

To use a closure, we need to define a function inside another function. Then we need to return it or pass it to another function.

Callback

Conceptually callbacks are similar to closure. A callback is basically where a function accepts another function as an argument.

Final Words

I hope this article clears all your doubts on javascript callback functions. If you find this article as helpful, share it among others.

Promises In Javascript A Complete Guide For 2019

Nilesh Sanyal — Sat, 21 Sep 2019 05:19:37 +0000

Read the original article here

Promises in javascript is an important concept that is essential for a javascript developer to understand. If this concept is clear, the developer can utilize this in a variety of ways in their day-to-day lives.

There are lot of articles, tutorials available on the web about promises. But, very few of them act as a comprehensive guide to make use of promises. In this article, I will try to elaborate promises in depth. So you won't need to go through other resources.

What is a promise?

As per MDN documentation: A promise is an object that represents the eventual completion or failure of an asynchronous operation, and it's resulting value.

Why Do We Use Promises In JavaScript?

Generally speaking, javascript is a scripting language that is synchronous in nature. In order to perform asynchronous operations, promises are of great help. Before promises were invented, when dealing with multiple asynchronous tasks, callbacks were used a lot.

But multiple callback functions lead to unmanageable code that produced something known as callback hell. To solve this issue, promises are used.

That's a lot of technical jargon, right! But, I think you would understand promises better if the discussion goes in a non technical approach.

How Does Promises in Javascript Actually Work?

You can think of javascript promises similar to promises you make in real life.

Imagine, you made a promise to your girlfriend that you will buy her an expensive gift. You don't know whether you will be able to keep your promise. May be you will be able to keep your promise or may be not.

So, if you promised but still didn't manage to purchase the gift, the promise is in pending state. If you are able to keep your promise, then your promise is fulfilled. But, if for some reason, you are unable to do so, your promise is in rejected state.

When Was Promise Introduced in Javascript?

Promises aren't a brand-new concept. In fact, they have been around since 1976, when the term was first introduced. In the starting of 2011, the concept of it were made popular by jQuery deferred objects. The concept of deferred objects are similar to promises, but they do not follow the exact technical specification as stated in the ECMA script 2015 for promises.

Finally, promises were officially added in the ECMA script 2015 specification and has also implemented in all of the latest browsers and in Node Js.

Different States In A Promise

The same concepts apply to promises as well. A promise has any one of the following states. These are as follows:

Pending : The task relating to the promise hasn't fulfilled or rejected yet.
Fulfilled: The task relating to the promise succeeded.
Rejected: The task relating to the promise failed.

One important point to note here is that, the function that creates the promise is able to keep track of the promise states.

Getting To Know More About The Promise Object

var isPossibleToPurchaseGift = true;
var giftPromise = new Promise(function(resolve, reject) {
  if(isPossibleToPurchaseGift) {
     resolve('You are able to keep your promise');
  } else {
     reject('You are unable to keep your promise');
  }
});
console.log(giftPromise);

In the code above, we created a promise, if the value of variable "isPossibleToPurchaseGift" is set to true then the promise is resolved. Finally, we are displaying that promise's resolved state in the browser's console window.

If we look closer in the console window, we are able to expand the Promise object, then if we expand the highlighted portion as shown in the screen shot below, we are able to get same as shown in the screen shot below.

If we expand further, we will see something similar as shown below. Note, the highlighted portions in the image.

Static Methods in Promise Object

Promise.all(promises) : It waits for all promises to resolve and returns the array of all the results of the promises. Important point to note here is that, if any of the promises is not fulfilled, then that becomes the error of the Promise.all and all other results are ignored.

Promise.allSettled(promises) : It is recently added method. It's purpose is to wait for all promises to settle and return their results as array of objects with state ( that could be either 'fulfilled' or 'rejected' ) and value ( if fulfilled ) or reson (if rejected).

Promise.race(promises) : It waits for the first promise to resolve and its outcome or error becomes the result.

Promise.resolve(value) : It produces a resolved promise with the given value.

Promise.reject(error) : It generates a rejected promise with the given error.

Creating A Promise In Javascript

var isPossibleToPurchaseGift = true;

var willGetNewGift = new Promise(function(resolve, reject) {
    if(isPossibleToPurchaseGift) {
      var gift = {
         ring: true,
         flowers: true
      };
       resolve(gift);
    } else {
       var error = new Error('Left my wallet!!');
       reject(error);
    }
});

In the code above, we have created a promise called "willGetNewGift". The promise constructor takes two parameters, first is resolve function and the second one is reject function.

What is Promise Resolve in Javascript?

In simple words, resolve function indicates if the promise is succeeded then the promise object is resolved with a given value. So, in the above code snippet, if "willGetNewGift" variable is set to true then the promise will return a gift object.

What is Promise Reject in Javascript ?

The reject function returns a promise object that is rejected with an error message. In, the above code snippet if "willGetNewGift" variable is set to false, then this promise will return an error object.

Invoking The Promise In Javascript

var getNewGift = function() {
  willGetNewGift
    .then(function(gift) {
    console.log(gift);

  })
  .catch(function(error) {
    console.log(error.message);
  });
}; 

getNewGift();

In the code above, we are calling the promise named "willGetNewGift" and then in order to get the value of the fulfilled promise we are using then() function. We set the variable "isPossibleToPurchaseGift" to true. If the value is true we are considering that the promise is resolved. So, that we are able to display the gift object inside then() function. The complete code of it is shown below.

var isPossibleToPurchaseGift = false;
var willGetNewGift = new Promise(function(resolve, reject) {
  if(isPossibleToPurchaseGift) {
    var gift = {
      ring: true,
      flowers: true
    };
    resolve(gift);
  } else {
    var error = new Error('Left my wallet!!');
    reject(error);
  }
});

var getNewGift = function() {
  willGetNewGift
    .then(function(gift) {
      console.log(gift);
    })
    .catch(function(error) {
      console.log(error.message);
    });
};

getNewGift();

Chaining Promises in Javascript

Non Technical Point of View

Let's assume after making a promise to your girlfriend to buy her an expensive gift, then you would also like to attend dinner with her and finally you would love to go on a long drive with her. Imagine, the situation here, after keeping your first promise, you will have to keep your second and third promise too.

To handle these kind of situations you would need to chain multiple promises together. So promise chanining comes handy in these situations.

Technical Point of View

The promise object is capable of performing asynchronous tasks in javascript. Each asynchronous task will return a promise object and each promise object will have a then function that can take two parameters, a success handler and an error handler.
The then function will also return a promise, so that it is possible to chain multiple promises.
Each of the handlers (success or error) can also return a value, which will be passed to the next function as a parameter, in the chain of promises.
If a handler returns a promise, then the next handler will be called only after that request is finished.

Let's justify what we said earlier with an example.

Implementing Promise Chaining in Javascript

var isPossibleToPurchaseGift = true;

var willGetNewGift = new Promise(function(resolve, reject) {
    if(isPossibleToPurchaseGift) {
      var gift = {
         ring: true,
         flowers: true
      };
       resolve(gift);
    } else {
       var error = new Error('Left my wallet!!');
       reject(error);
    }
});

var willAttendDinner = function(expensiveGift) {
  return new Promise(function(resolve, reject) {
    var message = 'You kept your promise by giving her an expensive ring';
    resolve(message);
  });
};

var willGoOnALongDrive = function(dinnerAttended) {
  return new Promise(function(resolve, reject) {
    var message = 'You kept your last promise by going on a long drive!';
    resolve(message);
  });
};

var getNewGift = function() {
  willGetNewGift
    .then(willAttendDinner)
    .then(willGoOnALongDrive)
    .then(function(longDrive) {
    console.log(longDrive);
  });
};

getNewGift();

In the above code snippet, we defined 3 separate functions, first function "willGetNewGift" returns a promise object, the other functions also return promises.

Let me explain exactly what happened. At first, "willGetNewGift" function is called that returns a promise then that promise object is passed to the next function "willAttendDinner", similarly it also returns a promise object. Again, that object is passed to "willGoOnALongDrive" function. Finally, the result of the function is displayed on the console. That's why you will be able to see "You kept your last promise by going on a long drive!" this message.

What is Promise.all()?

In simple words, promise.all() is a method that is beneficial when we have multiple promises and we have to wait for each individual promises to complete before the next promise can be executed.

As per MDN documentation: The Promise.all() method returns a single Promise that resolves when all of the promises passed as an iterable have resolved or when the iterable contains no promises. It rejects with the reason of the first promise that rejects.

So, one fact is clear from the documentation that, if any one of the promise object in the array gets rejected, the entire Promise.all() method gets rejected.

How Does Promise.all() Work?

From the MDN docs, we know that Promise.all() method takes an iterable object. By iterable object, it means that the object can be iterated easily. String and arrays are examples of such kind of iterable objects.

Generally, this method returns a pending promise object that gets resolved or rejected in an asynchronous way as soon as the promise in the given iterable object have resolved or rejected.

After promise is resolved successfully, the values of the respective promises will be there in same order at the time they are passed in the promise all method. If any of the promises in the iterable gets rejected, all the promises gets rejected. This incident will take place even if rest of the promises are resolved successfully.

Implementing Promise.all() in Javascript

var isPossibleToPurchaseGift = true;
var willGetNewGift = function() {
   return new Promise(function(resolve, reject) {
    if(isPossibleToPurchaseGift) {
      var gift = {
         ring: true,
         flowers: true
      };
       resolve('You bought an expensive ring and flowers');
    } else {
       var error = new Error('Left my wallet!!');
       reject(error);
    }
  });
};
var willAttendDinner = function(expensiveGift) {
  return new Promise(function(resolve, reject) {
    var message = 'You kept your promise';
    resolve(message);
  });
};
var willGoOnALongDrive = function(dinnerAttended) {
  return new Promise(function(resolve, reject) {
    var message = 'You kept your last promise by going on a long drive!';
    resolve(message);
  });
};
var getNewGift = function() {
  Promise.all([
    willGetNewGift(),
    willAttendDinner(),
    willGoOnALongDrive()
  ]).then(function(result) {
    console.log(result);
  });
};
getNewGift();

In the above code snippet, we created 3 functions each of them returns a promise object. Then we called each of them in Promise.all() function, which returned result of the promises inside an array. The output of this is shown below.

If any one of the promise fails to resolve, the result will generate an error. The code snippet is shown below.

var isPossibleToPurchaseGift = false;
var willGetNewGift = function() {
   return new Promise(function(resolve, reject) {
    if(isPossibleToPurchaseGift) {
      var gift = {
         ring: true,
         flowers: true
      };
       resolve('You bought an expensive ring and flowers');
    } else {
       var error = new Error('Left my wallet!!');
       reject(error);
    }
  });
};
var willAttendDinner = function(expensiveGift) {
  return new Promise(function(resolve, reject) {
    var message = 'You kept your promise';
    resolve(message);
  });
};
var willGoOnALongDrive = function(dinnerAttended) {
  return new Promise(function(resolve, reject) {
    var message = 'You kept your last promise by going on a long drive!';
    resolve(message);
  });
};
var getNewGift = function() {
  Promise.all([
    willGetNewGift(),
    willAttendDinner(),
    willGoOnALongDrive()
  ]).then(function(result) {
    console.log(result);
  }).catch(function(error){
    console.log(error.message);
  });
};
getNewGift();

The output of the code is shown below.

What is Promise.race()?

If we need to return the result of the first resolved promise or rejected promise as soon as it is available, then we should use this function.

As per MDN documentation, The Promise.race() method returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise.

Implementing Promise.race() in Javascript

var isPossibleToPurchaseGift = true;
var willGetNewGift = function() {
   return new Promise(function(resolve, reject) {
    if(isPossibleToPurchaseGift) {
      var gift = {
         ring: true,
         flowers: true
      };
      setTimeout(function(){
       resolve('You bought an expensive ring and flowers'); 
      }, 500);

    } else {
       var error = new Error('Left my wallet!!');
       reject(error);
    }
  });
};
var willAttendDinner = function(expensiveGift) {
  return new Promise(function(resolve, reject) {
    var message = 'You kept your promise';
     setTimeout(function(){
        resolve(message);
     }, 2000);
  });
};
var willGoOnALongDrive = function(dinnerAttended) {
  return new Promise(function(resolve, reject) {
    var message = 'You kept your last promise by going on a long drive!';
    setTimeout(function(){
       resolve(message);
    },3000);
  });
};
var getNewGift = function() {
  Promise.race([
    willGetNewGift(),
    willAttendDinner(),
    willGoOnALongDrive()
  ]).then(function(result) {
    console.log(result);
  }).catch(function(error){
    console.log(error.message);
  });
};
getNewGift();

In above code snippet, we can see that from the 3 functions that return promise objects upon successful execution, only willGetNewGift() function took 500 milliseconds to execute. So the result of this promise is returned after running this code block.

Are Javascript Promises Synchronous or Asynchronous?

At first, you should know that javascript is a single threaded scripting language. Single threaded means that it must execute one block of code before moving to execute the next code block. In simple words, javascript code is always blocking in nature.

Sometimes we need to perform some tasks, and we are not sure exactly when that task will be complete and it's result will be returned. But, at the same time we need to guarantee that some blocks of code must be executed when we get a successful result or if failure occurs we need to handle that scenario too.

To tackle these situations, we need to write asynchronous codes in javascript. Promises allow writing codes in asynchronous way. So, obviously we can say that promises are asynchronous.

Let's justify with an example that promises are asynchronous.

var isPossibleToPurchaseGift = true;

// willGetNewGift promise definition

// willAttendDinner promise definition

// willGoOnALongDrive promise definition

var getNewGift = function() {
  console.log('Before giving gift');
  willGetNewGift
    .then(willAttendDinner)
    .then(willGoOnALongDrive)
    .then(function(longDrive) {
    console.log(longDrive);
  });
   console.log('After giving gift');
};

// call our promise
getNewGift();

Probably, you expected following output.

Before giving gift
You kept your last promise by going on a long drive!
After giving gift

But, the actual output is shown in the screen shot below.

Implementing Javascript Promises in Cleaner Way

All the examples in this article uses the syntax of promise wrapper. We used this syntax so that you can understand promises easily, but practically we can write promises in a lot of better way. If we write promises in that approach, maintaining promises for complex tasks will be lot easier.

Let me explain what I mean by promise wrapper. In promise wrapper, you write codes that resolves or rejects a promise depending on whether a promise successfully executed or not.

return new Promise(function(resolve, reject){
      // codes to execute
});

Above code snippet is the example of promise wrapper.

Following code snippet explains how you can write promises in a better way.

var isPossibleToPurchaseGift = true;
//var isPossibleToPurchaseGift = false;
var willGetNewGift = function() {
    if(isPossibleToPurchaseGift) {
       return Promise.resolve('It is possible to purchase gift');
    } else {
       var error = new Error('Left my wallet!!');
       return Promise.reject(error);
    }
};

var willAttendDinner = function(purchasedGift) {
//   purchasedGift = false;
  if(purchasedGift) {
    return Promise.resolve('It is possible to attend dinner');
  } else {
    return Promise.reject(new Error('Unable to attend dinner!!'));
  }

};

var willGoOnALongDrive = function(attendedDinner) {
//   attendedDinner = false;
  if(attendedDinner) {
    return Promise.resolve('It is possible to go on a long drive');
  } else {
    return Promise.reject(new Error('Unable to go on a long drive!!'));
  }

};

willGetNewGift()
  .then(willAttendDinner)
  .then(willGoOnALongDrive)
  .then(function(response){
  console.log(response);
}).catch(function(error){
  console.log(error.message);
});

Try uncommenting each of the commented statement one at a time, then run the codes again. I am sure you will understand the differences pretty easily.

Writing Javascript Promises With ES6/ES2015, ES7

ES6 or ES2015 introduced "let", "const" and "fat arrow" syntax. Using that you can write promises in a better way.

We can rewrite previous example in a better way with ES6. The code snippet is shown below.

const isPossibleToPurchaseGift = true;
// const isPossibleToPurchaseGift = false;
var willGetNewGift = ()=> {
    if(isPossibleToPurchaseGift) {
       return Promise.resolve('It is possible to purchase gift');
    } else {
       const error = new Error('Left my wallet!!');
       return Promise.reject(error);
    }
};

var willAttendDinner = (purchasedGift)=> {
//   purchasedGift = false;
  if(purchasedGift) {
    return Promise.resolve('It is possible to attend dinner');
  } else {
    return Promise.reject(new Error('Unable to attend dinner!!'));
  }

};

var willGoOnALongDrive = (attendedDinner) => {
//   attendedDinner = false;
  if(attendedDinner) {
    return Promise.resolve('It is possible to go on a long drive');
  } else {
    return Promise.reject(new Error('Unable to go on a long drive!!'));
  }

};

willGetNewGift()
  .then(willAttendDinner)
  .then(willGoOnALongDrive)
  .then(response =>console.log(response))
  .catch(error =>console.log(error.message));

You can play around the code snippet better if you uncomment the commented lines.

ES7 introduced async and await syntax. After applying this to our ES6 code it would be easier for us to understand. Also, we don't need to use then and catch functions. For error handling you need to use try...catch syntax of javascript.

const isPossibleToPurchaseGift = true;
// const isPossibleToPurchaseGift = false;
var willGetNewGift = ()=> {
    if(isPossibleToPurchaseGift) {
       return Promise.resolve('It is possible to purchase gift');
    } else {
       const error = new Error('Left my wallet!!');
       return Promise.reject(error);
    }
};

var willAttendDinner = (purchasedGift)=> {
  // purchasedGift = false;
  if(purchasedGift) {
    return Promise.resolve('It is possible to attend dinner');
  } else {
    return Promise.reject(new Error('Unable to attend dinner!!'));
  }

};

var willGoOnALongDrive = (attendedDinner) => {
  // attendedDinner = false;
  if(attendedDinner) {
    return Promise.resolve('It is possible to go on a long drive');
  } else {
    return Promise.reject(new Error('Unable to go on a long drive!!'));
  }

};
async function callFunctions() {
  try {
    willGetGift = await willGetNewGift();
    attendDinner = await willAttendDinner(willGetGift);
    willGoOnALongDrive = await willGoOnALongDrive(attendDinner);
     console.log(willGoOnALongDrive); 

  } catch(error) {
    console.log(error.message);
  }
} 

callFunctions();

Again, to understand the code better I would advise you to uncomment commented codes one at a time. This way you will understand better.

Conclusion

I hope after reading this article you will understand javascript promises in depth. If you find this article as helpful, don't forget to share it among others. Thank you!

Step By Step Guide On Cross Site Scripting

Nilesh Sanyal — Thu, 05 Sep 2019 17:27:34 +0000

Read the original article here

This post is the final part of the cross site scripting series. If you have missed the first part for some reason, you can read it here.

Important Note

Please note that, all the information provided in this article is solely meant for educational purposes only.

What We Will Be Creating

We will create two pages; a post creation and post listing page.

Screen shot of post listing page is shown below.

Screen shot of post creation page is shown below.

In order to follow along with this article, you need to create a post table in your database using php myadmin.

The table structure for the post table is as follows.

Following screen shot is the code for the db.php file that contains database connectivity codes.

Download the entire project by clicking here.

Explanation of posts.php:

In the posts.php file, the post title and description is saved into post table. Before saving post, we make sure that our application is safe from sql injection. In order to do so, we used mysqli_real_escape_string() function. If you don't know anything about sql injection, you can read it here.

Exploiting The Application By Stored Cross Site Scripting

We finished adding post creation functionality for this application. Let's see how to exploit this application so that when anyone visits this page, his or her session cookie will be stolen and send to the attacker.

In the screen shot below, attacker injects the javascript code in the comment box, that executes a php code via AJAX call.

We can see from the above screen shot that, after adding jquery cdn link, reference to a file known as evil.js is added. For getting this example to work successfully, you need to create a file evil.js in the js folder of the root directory of the current project.

Explanation of evil.js:

The evil.js file collects cookies that is stored in the browser, and then it sends that in getCookiedata.php file.

Explanation of getCookiedata.php:

Stolen cookie information is stored in "cookie_data.txt" file. If the code executes for the first time, then that file will be created in root directory of the application. If already this file exists, then new content will be appended to the file.

To make sure that you understand the stored xss attack, we stored the cookie_data.txt file in the root of the application. But, generally, attacker stores the information to his or her own server.

Getting Session Cookie Value

After attacker injects the javascript codes, nothing is displayed as post description in the post listing page as we can see from the screen shot below.

But, if we open the "cookie_data.txt" file, we can see the session cookie content is present there!

Preventing Cross-Site Scripting Attack

We saw, how an attacker can make use of xss to steal session cookie in previous screen shot. Now, we will stop the attacker from doing that.

Make the changes in "save_post.php" file that are highlighted in red as shown below.

Explanation:

We used, htmlspecialchars() function, that will convert some special characters to HTML entities so that xss will no longer work. For example, ">" will be converted to ">".

Now, if we clear the contents of cookie_data.txt file, previous post record that stores the injected javascript code in post table and then again try to repeat what we did earlier, then see what will happen!

After pressing Save Post button, if we open the post table, we will see something similar to the screen shot below.

Now, if we open the "cookie_data.txt" file, we will no longer see any content inside of it. It is completely empty.

Final Words

If you find this article helpful, please share it among others.

Never Mess With Cross Site Scripting And Here'is The Reason Why

Nilesh Sanyal — Sat, 31 Aug 2019 17:54:03 +0000

Read the original article here

In a Cross-site Scripting attack, also known as xss, client-side code is injected into the output of a web page, in form of a html attribute, and executed within the user’s browser. The impact of successful exploitation varies.

Why do I care about Cross-site Scripting?

Cross-Site Scripting vulnerabilities may be utilized by an offender to accomplish an extended list of potential wicked goals, including:

Steal your session identifier so that they will impersonate you and access the online application.
Redirect you to a phishing page that gathers sensitive data.
Install malware on your pc (usually needs a zero day vulnerability for your browser and OS).
Perform tasks on your behalf (i.e. produce a brand new administrator account with the attacker's credentials).

Different Types Of Cross-site Scripting Explained

There are 3 types of xss these are as follows...

Reflected Cross-Site Scripting:

In this type of attack, a vulnerable page will be used to execute impulsive code. This type of xss doesn't persist the attack code across multiple requests.

Since an attacker has to send a user to a specially crafted link for the code to run, reflective XSS sometimes needs some social engineering to execute the attack successfully.

Real world scenario of reflected cross-site scripting:

Let's assume, Sam is an attacker, he found a refected xss vulnerability in www.site.com. Jhon is a user of this website, Sam sends a fake email to Jhon that he is the lucky winner of an Iphone and to claim it he needs to click on the link provided in the email.

Jhon clicks the link while logged into www.site.com. The script gets executed in Jhon's browser, it steals Jhon's session cookies associated to www.site.com and sends to Sam.

Using the session cookie, Sam can easily access Jhon's personal information and other data such as credit card or debit card data by compromising Jhon's account.

Stored xss:

In this type attack, malicious data supplied by the attacker will be stored in the server. It is more dangerous compared to reflected xss for following reasons.

First, a stored xss attack will be automatic. A script that visits thousands of websites, can exploit a vulnerability on every web site and drops a stored xss payload.

Second, victims don’t need to take any action apart from visiting the affected web site. Anyone that visits the affected page on the site will become a victim as a result of the stored malicious code. It happens beacuse the script will load in their browser The victims don't need to take an extra action.

Real world scenario of stored xss:

Suppose, www.techforum.com is a forum having thousands of users, users can post on different technical topics, and they can also comment on each post. Sam decides to get user credentials by exploiting the commenting functionality. He, writes few lines as comment and then crafts a malicious link that acts as a read more link.

When users of the forum reads few lines of his comments, and curious to read the rest of it, they will click on read more link. That link will activate a javascript file, that will steal users session cookies.

DOM Based xss:

This type of attack generally involves around the DOM(Document Object Model). In other types of attacks, infected code comes from the server-end to the client-end. But, in this type of attack, javascript code is used to manipulate the DOM.

How DOM Based xss is possible ?

This is possible partially as a result of advanced javaScript-based applications take bits of information from different places and process them. Generally that process ends up in the creation of DOM objects or direct JavaScript execution within the browser.

DOM xss comprises of two facts: Source and Sink. Source is something that contains user input. Sink is known as the place where user input gets executed by the browser.

Conclusion:

In this article, I discussed in brief why you should not neglect cross site scripting. I hope, you will find this article helpful for you.

A Complete Guide To Passport JS Part 1

Nilesh Sanyal — Sat, 24 Aug 2019 15:04:18 +0000

Read the original article here

In simple words, passport js is a middleware for the express js framework. It allows developers to integrate different types of authentication strategies with very little amount of code. For example: developers can add various types of sign in functionality with different services like google, facebook, twitter, github etc, also developers can add their own custom strategy by authenticating users with email and password.

We can also combine all of the strategies so that users can login with any one of the selected strategies. It is much quicker to use passport js rather than building a custom authentication strategy from scratch.

When I first started working with passport js, it took me several days to fully understand the inner-workings of it. I went through the official documentation, searched for tutorials, looked in stack overflow for help, after doing all these extra work I was able to understand it.

Topics Covered In This Article

Setting up callback function for configuring passport strategy.
Importance of passport.authenticate() function in callback url.
Setting up middleware to check if a user is already logged in or not.
How serializeUser() and deserializeUser() actually works.

Ok, so let's get started.

Setting up callback function for configuring passport strategy

Take a look at the code below. Here, we have required the module for passport local strategy, we added two routes; one for displaying login page and another for handling the callback url. After "/login" route is called, we request users to enter their email id and password.

If email id and password submitted by the user matches with these values, we return the email id of the user. If no match is found then we return false to indicate that authentication failed.

This is possible with the help of done() function. It is an internal passport js function that takes care of supplying user credentials after user is authenticated successfully. This function attaches the email id to the request object so that it is available on the callback url as "req.user".

It will be available for the dashboard route, where you would set the session for the user and then to another part of your web application.

Importance of passport.authenticate() function

This function is internally used by passport js to make sure that users are logged in before they are going to that url directly. It should be used in such a situation when they must be logged in order to access a protected url of the application. For example, to access dashboard page user must be logged in first.

Setting up middleware to check if a user is already logged in or not

To check if someone is logged in we need to check if req.session.user value is set. Then we need to use this function as middleware on GET route(s) that we want to grant access to only logged in users. The code for middleware is given below.

const LocalStrategy = require('passport-local').Strategy;

app.get('/login', (req, res) => {
        res.render('login');
});

app.post('/login', passport.authenticate('local', {
        failureRedirect: '/login',
        successRedirect: '/dashboard'
}));

passport.use(new LocalStrategy(
     (username, password, done) => {
         if(username === 'test@gmail.com' && password === '1234') {
             return done(null, {username: 'test@gmail.com'});
         } else {
             return done(null, false);
         }
      }
 ));

function isLoggedIn(req ,res, next){
  if(req.isAuthenticated()){
    return next();
  }else{
    return res.redirect('/login');
}

In the above code, we checked to see if the user is authenticated or not using passport js's built in isAuthenticated() function. If user is authenticated, the request continues as next() function is called. Otherwise, user is redirected to login page.

We want to allow only logged in users to visit the dashboard page, the code for doing so is given below.

 app.get('/dashboard', isLoggedIn, (req, res) => {
      res.render('dashboard');
 });

In the code above, we have added the isLoggedIn() function that we created earlier to the dashboard route. It will act as a middleware to allow only logged in users to visit the dashboard page.

How serializeUser() and deserializeUser() actually works

After successful authentication, passport attaches user's email id to the req.user object. It is possible due to the existence of serializeUser() and deserializeUser() functions.

Previously, when we configured passport js by setting up the callback function, we passed the email value in done() callback function. This step was necessary, as passport needs to take the email id and store it internally in req.session.passport object which is passport's way of keeping track of things.

For accomplishing this task, serializeUser() function must be defined. The code for this function is provided below.

passport.serializeUser(function(user, done) {
    done(null, user.username);
});

In the deserializeUser() function, the email id is given as the first parameter which is same email id that was passed in the serializeUser() function. Then this function makes a request to the database to find email id of the user by invoking done() function. After this step, the email id of the user is attached to the req.user object.

passport.deserializeUser((username, done) => {
    done(null, {username: username});
});

Finally, The Application That We Will Build

We will be building a simple web application that will explain how to work with passport local module which is a package provided by passport js itself. We won't be storing user credentials in any database. We are doing this intentionally so that you can focus on the essential concepts related to passport js. But, in real world application, a database must be used.

Note: To follow along with this tutorial, you need to download the project file here. Then make sure you have installed node js in your computer. After download is finished extract the downloaded rar file. Open terminal or command prompt in the location where you downloaded the project. Run this command "npm install", then run "npm start", open a web browser and type "http://localhost:8000/login" to run the application.

Overall Project Structure

Discussion on project structure

app.js file: The main gateway to our express js application. Here, we will set all the dependencies, all middlewares required for the application and error handling codes etc.
routes/index.js file: In this file, we are storing all the routes for our application.
views folder: It stores all the dynamic pages for our application. For generating dynamic content for our pages, we are using handlebars as the template engine. For now, it contains two pages i.e, dashboard.hbs and login.hbs.
public folder: This folder stores all the static resource files(i.e, css,js, image files etc) required by the dashboard.hbs and login.hbs pages.
package.json file: It stores various modules that are required for building the application.

Creating The Node Server

const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');
const passport = require('passport');
const path = require('path');
const app = express();
const port = 8000;

// setup for body-parser module
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

// express session middleware setup
app.use(session({
    secret: 'W$q4=25*8%v-}UV',
    resave: true,
    saveUninitialized: true
}));

// passport middleware setup ( it is mandatory to put it after session middleware setup)
app.use(passport.initialize());
app.use(passport.session());

// setup for loading static resources from 'public' directory
app.use(express.static(path.join(__dirname,'public')));

// view engine setup
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname,'views'));

require('./routes/index')(app, passport);

app.listen(port, () => console.log(`Server is running on port ${port}`));

Explanation of the app.js file

In app.js, we need to store all the references to third party modules that are used for the application. Then we need to configure them accordingly. One important note I would like to mention here, if we are using express-session module in our application, then we must configure passport middleware just after express-session middleware setup.

Configuring Passport

const LocalStrategy = require('passport-local').Strategy;

module.exports = (app, passport) => {

    app.get('/dashboard', isLoggedIn, (req, res) => {
        res.render('dashboard');
    });

    app.get('/login', (req, res) => {
        res.render('login');
    });

    app.get('/logout', (req, res) => {
        req.logout();
        res.redirect('/login');
    });

    app.post('/login', passport.authenticate('local', {
        failureRedirect: '/login',
        successRedirect: '/dashboard'
    }));

    passport.use(new LocalStrategy(
        (username, password, done) => {
            if(username === 'test@gmail.com' && password === '1234') {
                return done(null, {username: 'test@gmail.com'});
            } else {
                return done(null, false);
            }
        }
    ));

    passport.serializeUser((user, done) => {
        done(null, user.username);
    });

    passport.deserializeUser((username, done) => {
        done(null, {username: username});
    }); 

    function isLoggedIn(req, res, next) {
        if(req.isAuthenticated()) {
            return next();
        } else {
            return res.redirect('/login');
        }
    }
};

I already explained how this configuration actually works. If you want to revisit that section, go to the heading entitled "Topics Covered In This Article".

Creating The Login Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Material Login Form</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="css/login-style.css">

</head>
<body>

    <div class="materialContainer">

   <div class="box">
      <div class="title">LOGIN</div>
      <form action="/login" method="post">
        <div class="input">
            <label for="name">Email</label>
            <input type="text" name="username" id="name">
            <span class="spin"></span>
        </div>

        <div class="input">
            <label for="pass">Password</label>
            <input type="password" name="password" id="pass">
            <span class="spin"></span>
        </div>

        <div class="button login">
            <button><span>Log In</span> <i class="fa fa-check"></i></button>
        </div>

      </form>  

   </div>

</div>

    <script src="js/jquery.min.js"></script>
    <script src="js/script.js"></script>

</body>
</html>

Creating The Dashboard Page


<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Material Admin</title>
  <link rel="stylesheet" href="css/materialdesignicons.min.css">

  <link rel="stylesheet" href="css/style.css">
  <link rel="shortcut icon" href="images/favicon.png" />
</head>

<body>
  <div class="body-wrapper">
    <aside class="mdc-persistent-drawer mdc-persistent-drawer--open">
      <nav class="mdc-persistent-drawer__drawer">
        <div class="mdc-persistent-drawer__toolbar-spacer">
          <a href="javascript:void(0);" class="brand-logo">
                        <img src="images/logo.svg" alt="logo">
                    </a>
        </div>
        <div class="mdc-list-group">
          <nav class="mdc-list mdc-drawer-menu">
            <div class="mdc-list-item mdc-drawer-item">
              <a class="mdc-drawer-link" href="javascript:void(0);">
                <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">desktop_mac</i>
                Dashboard
              </a>
            </div>
            <div class="mdc-list-item mdc-drawer-item">
              <a class="mdc-drawer-link" href="#">
                <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">track_changes</i>
                Forms
              </a>
            </div>
            <div class="mdc-list-item mdc-drawer-item" href="javascript:void(0);" data-toggle="expansionPanel" target-panel="ui-sub-menu">
              <a class="mdc-drawer-link" href="#">
                <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">dashboard</i>
                UI Features
                <i class="mdc-drawer-arrow material-icons">arrow_drop_down</i>
              </a>
              <div class="mdc-expansion-panel" id="ui-sub-menu">
                <nav class="mdc-list mdc-drawer-submenu">
                  <div class="mdc-list-item mdc-drawer-item">
                    <a class="mdc-drawer-link" href="javascript:void(0);">
                      Buttons
                    </a>
                  </div>
                  <div class="mdc-list-item mdc-drawer-item">
                    <a class="mdc-drawer-link" href="javascript:void(0);">
                      Typography
                    </a>
                  </div>
                </nav>
              </div>
            </div>
            <div class="mdc-list-item mdc-drawer-item">
              <a class="mdc-drawer-link" href="javascript:void(0);">
                <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">grid_on</i>
                Tables
              </a>
            </div>
            <div class="mdc-list-item mdc-drawer-item">
              <a class="mdc-drawer-link" href="javascript:void(0);">
                <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">pie_chart_outlined</i>
                Charts
              </a>
            </div>
            <div class="mdc-list-item mdc-drawer-item" href="#" data-toggle="expansionPanel" target-panel="sample-page-submenu">
              <a class="mdc-drawer-link" href="#">
                <i class="material-icons mdc-list-item__start-detail mdc-drawer-item-icon" aria-hidden="true">pages</i>
                Sample Pages
                <i class="mdc-drawer-arrow material-icons">arrow_drop_down</i>
              </a>
              <div class="mdc-expansion-panel" id="sample-page-submenu">
                <nav class="mdc-list mdc-drawer-submenu">
                  <div class="mdc-list-item mdc-drawer-item">
                    <a class="mdc-drawer-link" href="javascript:void(0);">
                      Blank Page
                    </a>
                  </div>
                  <div class="mdc-list-item mdc-drawer-item">
                    <a class="mdc-drawer-link" href="javascript:void(0);">
                      403
                    </a>
                  </div>
                  <div class="mdc-list-item mdc-drawer-item">
                    <a class="mdc-drawer-link" href="javascript:void(0);">
                      404
                    </a>
                  </div>
                  <div class="mdc-list-item mdc-drawer-item">
                    <a class="mdc-drawer-link" href="javascript:void(0);">
                      500
                    </a>
                  </div>
                  <div class="mdc-list-item mdc-drawer-item">
                    <a class="mdc-drawer-link" href="javascript:void(0);">
                      505
                    </a>
                  </div>
                  <div class="mdc-list-item mdc-drawer-item">
                    <a class="mdc-drawer-link" href="javascript:void(0);">
                      Login
                    </a>
                  </div>
                  <div class="mdc-list-item mdc-drawer-item">
                    <a class="mdc-drawer-link" href="javascript:void(0);">
                      Register
                    </a>
                  </div>

                </nav>
              </div>
            </div>
          </nav>
        </div>
      </nav>
    </aside>
    <!-- partial -->
    <!-- partial:partials/_navbar.html -->
    <header class="mdc-toolbar mdc-elevation--z4 mdc-toolbar--fixed">
      <div class="mdc-toolbar__row">
        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
          <a href="#" class="menu-toggler material-icons mdc-toolbar__menu-icon">menu</a>
          <span class="mdc-toolbar__input">
            <div class="mdc-text-field">
              <input type="text" class="mdc-text-field__input" id="css-only-text-field-box" placeholder="Search anything...">
            </div>
          </span>
        </section>
        <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
          <div class="mdc-menu-anchor">
            <a href="#" class="mdc-toolbar__icon toggle mdc-ripple-surface" data-toggle="dropdown" toggle-dropdown="notification-menu" data-mdc-auto-init="MDCRipple">
              <i class="material-icons">notifications</i>
              <span class="dropdown-count">3</span>
            </a>
            <div class="mdc-simple-menu mdc-simple-menu--right" tabindex="-1" id="notification-menu">
              <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
                <li class="mdc-list-item" role="menuitem" tabindex="0">
                  <i class="material-icons mdc-theme--primary mr-1">email</i>
                  One unread message
                </li>
                <li class="mdc-list-item" role="menuitem" tabindex="0">
                  <i class="material-icons mdc-theme--primary mr-1">group</i>
                  One event coming up
                </li>
                <li class="mdc-list-item" role="menuitem" tabindex="0">
                  <i class="material-icons mdc-theme--primary mr-1">cake</i>
                  It's Aleena's birthday!
                </li>
              </ul>
            </div>
          </div>
          <div class="mdc-menu-anchor">
            <a href="#" class="mdc-toolbar__icon mdc-ripple-surface" data-mdc-auto-init="MDCRipple">
              <i class="material-icons">widgets</i>
            </a>
          </div>
          <div class="mdc-menu-anchor mr-1">
            <a href="#" class="mdc-toolbar__icon toggle mdc-ripple-surface" data-toggle="dropdown" toggle-dropdown="logout-menu" data-mdc-auto-init="MDCRipple">
              <i class="material-icons">more_vert</i>
            </a>
            <div class="mdc-simple-menu mdc-simple-menu--right" tabindex="-1" id="logout-menu">
                <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
                  {{!-- <li class="mdc-list-item" role="menuitem" tabindex="0">
                    <i class="material-icons mdc-theme--primary mr-1">settings</i>
                    Settings
                  </li> --}}
                  <li class="mdc-list-item" role="menuitem" tabindex="0">
                    <i class="material-icons mdc-theme--primary mr-1">power_settings_new</i>
                    <a href="/logout">Logout</a>
                  </li>
                </ul>
            </div>
          </div>
        </section>
      </div>
    </header>
    <!-- partial -->
    <div class="page-wrapper mdc-toolbar-fixed-adjust">
      <main class="content-wrapper">
        <div class="mdc-layout-grid">
          <div class="mdc-layout-grid__inner">
            <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-12">

            </div>

            <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-4">
              <div class="mdc-card d-flex flex-column">
                <div class="mdc-layout-grid__inner flex-grow-1">
                  <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3"></div>
                  <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-6 d-flex align-item-center flex-column">
                    <h2 class="mdc-card__title mdc-card__title--large text-center mt-2 mb-2">Time, Practice</h2>
                    <div id="currentBalanceCircle" class="w-100"></div>
                  </div>
                  <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3"></div>
                </div>
                <div class="mdc-layout-grid__inner">
                  <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-12">
                    <section class="mdc-card__action-footer mt-4 bg-red w-100">
                      <div class="col mdc-button" data-mdc-auto-init="MDCRipple">
                        <i class="mdi mdi-store icon-md"></i>
                      </div>
                      <div class="col mdc-button" data-mdc-auto-init="MDCRipple">
                        <i class="mdi mdi-phone-plus icon-md"></i>
                      </div>
                      <div class="col mdc-button" data-mdc-auto-init="MDCRipple">
                        <i class="mdi mdi-share-variant icon-md"></i>
                      </div>
                      <div class="col mdc-button" data-mdc-auto-init="MDCRipple">
                        <i class="mdi mdi-autorenew icon-md"></i>
                      </div>
                    </section>
                  </div>
                </div>
              </div>
            </div>
            <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-4">
              <div class="mdc-card card--with-avatar">
                <section class="mdc-card__primary">
                  <div class="card__avatar"><img src="images/faces/face1.jpg" alt=""></div>
                  <h1 class="mdc-card__title">Daniel Russel</h1>
                  <h2 class="mdc-card__subtitle">@danielrussel</h2>
                  <span class="social__icon-badge mdc-twitter mdi mdi-twitter"></span>
                </section>
                <section class="mdc-card__supporting-text pt-1">
                  <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum sem non mauris euismod hendrerit.Aliquam condimentum sem non mauris euismod hendrerit.</p>
                  <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum.</p>
                </section>
                <section class="mdc-card__social-footer bg-blue">
                  <div class="col">
                    <small>TWEETS</small>
                    <p>768.8k</p>
                  </div>
                  <div class="col">
                    <small>FOLLOWING</small>
                    <p>186.8k</p>
                  </div>
                  <div class="col">
                    <small>FOLLOWING</small>
                    <p>25.8k</p>
                  </div>
                </section>
              </div>
            </div>
            <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-8">
              <div class="mdc-card px-2 py-2">
                <div id="js-legend" class="chartjs-legend mb-2"></div>
                <canvas id="dashboard-monthly-analytics" height="205"></canvas>
              </div>
            </div>
            <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-12">
              <div class="mdc-card table-responsive">
                <div class="table-heading px-2 px-1 border-bottom">
                  <h1 class="mdc-card__title mdc-card__title--large">Employee status</h1>
                </div>
                <table class="table">
                  <thead>
                    <tr>
                      <th class="text-left">Product</th>
                      <th>Cost</th>
                      <th>Sales amount</th>
                      <th>Shipping cost</th>
                      <th>Units sold</th>
                      <th>Profit generated</th>
                      <th>Left in stock</th>
                      <th>Returns</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-left">T-shirts</td>
                      <td>250</td>
                      <td>300</td>
                      <td>60</td>
                      <td>3453</td>
                      <td>76</td>
                      <td>453643</td>
                      <td>300</td>
                      <td><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-heart text-blue"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-forum text-yellow"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-delete text-red"></i></div></td>
                    </tr>
                    <tr>
                      <td class="text-left">Baseball Hat</td>
                      <td>457</td>
                      <td>204</td>
                      <td>35</td>
                      <td>6754</td>
                      <td>35</td>
                      <td>345623</td>
                      <td>546</td>
                      <td><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-heart text-blue"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-forum text-yellow"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-delete text-red"></i></div></td>
                    </tr>
                    <tr>
                      <td class="text-left">Tennis Racket</td>
                      <td>250</td>
                      <td>350</td>
                      <td>38</td>
                      <td>3289</td>
                      <td>45</td>
                      <td>54662</td>
                      <td>278</td>
                      <td><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-heart text-blue"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-forum text-yellow"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-delete text-red"></i></div></td>
                    </tr>
                    <tr>
                      <td class="text-left">Gloves</td>
                      <td>250</td>
                      <td>300</td>
                      <td>60</td>
                      <td>3453</td>
                      <td>76</td>
                      <td>453643</td>
                      <td>300</td>
                      <td><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-heart text-blue"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-forum text-yellow"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-delete text-red"></i></div></td>
                    </tr>
                    <tr>
                      <td class="text-left">Shoes</td>
                      <td>673</td>
                      <td>457</td>
                      <td>56</td>
                      <td>4467</td>
                      <td>98</td>
                      <td>345723</td>
                      <td>350</td>
                      <td><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-heart text-blue"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-forum text-yellow"></i></div><div class="col mdc-button" data-mdc-auto-init="MDCRipple"><i class="mdi mdi-delete text-red"></i></div></td>
                    </tr>
                    </tbody>
                  </table>
              </div>
            </div>
          </div>
        </div>
      </main>
      <!-- partial:partials/_footer.html -->
      <footer>
        <div class="mdc-layout-grid">
          <div class="mdc-layout-grid__inner">
            <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-6">
              <span class="text-muted">Copyright © 2018 <a class="text-green" href="javascript:void(0);" target="_blank">Bootstrap Dash</a>. All rights reserved.</span>
            </div>
            <div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-6 d-flex justify-content-end">
              <span class="mt-0 text-right">Hand-crafted &amp; made with <i class="mdi mdi-heart text-red"></i></span>
            </div>
          </div>
        </div>
      </footer>
      <!-- partial -->
    </div>
  </div>
  <!-- body wrapper -->
  <!-- plugins:js -->
  <script src="js/material-components-web.min.js"></script>
  <script src="js/jquery3.4.1.min.js"></script>
  <!-- endinject -->
  <!-- Plugin js for this page-->
  <script src="js/Chart.min.js"></script>
  <script src="js/progressbar.min.js"></script>
  <!-- End plugin js for this page-->
  <!-- inject:js -->
  <script src="js/misc.js"></script>
  <script src="js/material.js"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="js/dashboard.js"></script>
  <!-- End custom js for this page-->
</body>

</html>

Conclusion

Thank you for going through this article. If you learn something new and exciting, please share this article among others.

SQL Injection Step By Step Part 2

Nilesh Sanyal — Wed, 21 Aug 2019 18:00:09 +0000

This post was originally posted on my personal blog, visit the post here.

This post is the final part of sql injection series. If you missed the first part, you can read it here.

What We Will Be Creating

We will create a post listing page, where user can search any post by entering post title or description.

Creating The Posts Table

You may wonder that how the posts are displayed in the post page. If you see the screenshot above, user is unable to create posts, as no form is provided for the them to do that.

Well, I did it intentionally, so that you can focus on learning the inner-workings of sql injection in depth.

To make the posts visible in that way, we need to create the posts table using php myadmin utility that we can use by entering this url "http://localhost/phpmyadmin/" in the browser, after we start apache server and mysql database service from the XAMPP control panel.

The table structure for the posts table is as follows.

The data for the posts table is as follows.

Codes for posts.php page is given below.

<?php session_start(); ?>
<?php
    if($_SESSION['session_username'] !='' && !empty($_SESSION['session_username'])){
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Posts Page</title>
        <link href="css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <link href="css/dashboard.css" rel="stylesheet">
        <link rel="stylesheet" href="css/datatable/dataTables.bootstrap4.min.css">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
            <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav navbar-sidenav">
                    <a class="nav-link navlogo text-center" href="dashboard.php">
                        <img src="images/WS_Logo.png">
                    </a>
                    <li class="nav-item">
                        <a class="nav-link sidefrst" href="dashboard.php">
                            <span class="textside">  Dashboard</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link sidesecnd active-nav-item" href="posts.php">
                            <span class="textside">  Posts</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link sidesthrd" href="add_comment.php">
                            <span class="textside">  Comments</span>
                        </a>
                    </li>
                </ul>

                <ul class="navbar-nav2 ml-auto">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome <?php echo $_SESSION['session_username']; ?></a>
                        <ul class="dropdown-menu">
                            <li class="resflset"><a href="logout.php"><i class="fa fa-fw fa-power-off"></i> Logout</a></li>
                        </ul>
                    </li>
                </ul>

            </div>
        </nav>
        <div class="content-wrapper">
            <div class="container-fluid">
                <div class="row"> <br>
                    <div class="col-md-12 text-right" style="margin-top: 3px;">
                        <a class="btn btn-primary btn-md" href="add_post.php">Add Post</a>
                    </div>
                    <div class="col-md-12">
                        <form method="get" action="">
                            <div class="form-group">
                                <label>Search for a post</label>
                                <input type="text" name="title" placeholder="Enter post title or description" class="form-control">

                            </div>
                            <input type="submit" value="Search" name="searchBtn" class="btn btn-sm btn-success">
                        </form>
                    </div>
                    <div class="col-md-12" style="margin-top:10px;">
                        <table id="post_tbl" class="table table-hover table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Post Date</th>
                                </tr>
                            </thead>


                            <?php 
                                $conn = mysqli_connect("localhost", "root", "", "hacking_db");
                                if(!$conn){
                                    die("connection error");
                                 }

                                $search_keyword = isset($_GET['title']) ? mysqli_real_escape_string($conn,  $_GET['title']) : '' ;

                                $posts_sql = "select * from `posts` WHERE title LIKE '%$search_keyword%' OR description LIKE '%$search_keyword%' ";

                                $posts = mysqli_query($conn,$posts_sql);

                             ?>

                            <tbody>

                                 <?php
                                    if(!$posts) { ?>

                                        <tr>
                                            <td><?php die("Error: " . mysqli_error($conn)); ?></td>
                                        </tr>

                                <?php   } ?>




                                <?php 
                                    if(mysqli_num_rows($posts) != 0){
                                        while($postsRow = mysqli_fetch_array($posts)) {
                                 ?>
                                        <tr>
                                            <td><?php echo isset($postsRow['title']) ? $postsRow['title'] : ''; ?></td>
                                            <td>
                                                <?php echo isset($postsRow['description']) ? mb_strimwidth($postsRow['description'], 0, 35, "...") : ''; ?>
                                            </td>
                                            <td>
                                                <?php echo isset($postsRow['post_date']) ? $postsRow['post_date'] : ''; ?>
                                            </td>
                                        </tr>
                                <?php 
                                        }
                                    }  else {

                                ?> 

                                <tr>
                                    <td colspan="3">No posts found!</td>
                                </tr>

                                <?php   
                                    }
                                    mysqli_close($conn);
                                ?>


                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>
<?php } else {
    header('Location: login.php');
} ?>

Explanation of posts.php

In this page, at first we checked if the user is already logged in or not. If the user is logged in then he or she can view the posts page, otherwise he or she is redirected to the login page.

We took the search keyword from the textbox, when user submits the form, we collect the textbox content through GET request.

Then, we checked if any match is found by comparing post's title or description with the search keyword. If any match is found we display the results in a table. If no posts exist matching the exact keyword, we displayed a message "No posts found!".

If for some reason, the database is unable to process the search keyword, we displayed a sql error to the user.

Extracting The Complete Database Details

We completed the posts search functionality for this application. Let's see how to exploit this application, so that we can get the complete database details from it. For this purpose, we will be using UNION operator of MySQL database.

Basics Of UNION Operator

UNION operator is used so that we can chain together multiple results of two or more sql statements.
Each SELECT statement withing UNION, must have equal number of columns.

So, we now know, what are the basic requirements to run UNION statements successfully. Let's see how we can do that.

To do that, we need to use ORDER BY clause of MySQL. We will enter a specific ORDER BY statement in search textbox and see if any sql error is displayed. If this happens, then we will simply decrease the numeric value that we used in that ORDER BY clause.

If we saw, "No posts found!" message, then it's ok, we can check again by increasing the numeric value that we used in the ORDER BY clause. After completing this step, we can get total number of columns in the posts table.

The screen shot of first attempt is shown below.

The screen shot of final attempt is shown below.

From the above screen shot, we saw the error message. So, we know that, the posts table contains exactly 4 columns.

Let's use this information to get a lot of information about the database that is being used in this application.

Getting MySQL Database Name

Getting MySQL Database Tables

Getting Columns Of users Table

Getting id, username and password Columns Of users Table

Preventing SQL Injection

If you want to prevent SQL Injection, then this section will help you to understand preventing SQL Injection completely. If you don't know what is sql injection, you can read it here.

In order to prevent SQL injection, you will able to get a set of practical examples, so that you won't find it difficult to understand the concept.

What We Will Do

Previously, we saw how an attacker used sql injection to bypass login, exploit the database and was able to get detail information about the database. Now, we will stop the attacker from doing that.

Protecting The Login Page

In the following screen shot, the highlighted text marked in white color, will protect all types of sql injection attacks.

After making those changes, refresh the login page, and try doing that login bypass attack again, you will see something like the screen shot shown below.

Protecting The Posts Page

Simply, add marked code as shown in the screen shot below.

After completing this step, try executing sql injection attacks that used union statement. You will see similar outcome as shown in screen shot below.

Final Words

If you find this post about learning sql injection step by step part 2 as helpful, please share it with others. Thank you!