Forem: Dhruv Prajapati

How Is Docker Used For Cloud Infrastructure Automation?

Dhruv Prajapati — Fri, 05 Mar 2021 14:59:56 +0000

Cloud Infrastructure Automation explained:

In this article we will be looking at the main issues associated with how is Docker used for cloud infrastructure automation.
There are two broad types of cloud-based computing, VMWare and Amazon Web Services, both of which provide open-source software to their customers, but they also work in a partnership relationship with other software vendors.
The container is a software specification for creating virtualized software components in order to help with the performance management of applications.
VMWare is a leader in this area with its proprietary technologies and recently acquired Helion Cloud Foundation to form what they describe as a developer community around the container-based technologies.
To get the best out of container-based applications, the service providers must integrate these technologies with their software and some have introduced plug-ins to provide more functionality for the end-user.
The container platform, part of the company’s Open Container Alliance is one such example. It also provides a command-line tool that a user can use to access containers such as apps and docker.
This is perhaps the most important issue for those looking at how is Docker used for cloud infrastructure automation.
It is because, like VMWare’s Helion platform, it creates a way for the end-user to run containers through a web browser, using the commands included in the platform to allow the integration of services, as well as advanced automation capabilities.
It is also interesting to note that when the system was first launched, it was designed for developers, to enable developers to create containers without the need for extensive knowledge of the underlying operating system.
The vendor has developed container-as-a-service to enable developers to quickly create containers and to automate them through the use of various tools such as Jenkins.
When you understand how is Docker used for cloud infrastructure automation, you will have a good understanding of how cloud services are powered, and you will have a greater understanding of how you can make your application more automated.
For example, you can enable your business to reduce the cost of running applications by automating the applications themselves.

The working of it:

The entire process of how is Docker used for cloud infrastructure automation starts with the knowledge of how is Docker used for cloud infrastructure automation? Once you understand how is Docker used for cloud infrastructure automation, then you can look at a range of different problems that may be faced by businesses around the world.
By adopting the standards of the market, such as VMWare Helion, and the principles of cloud infrastructure automation, such as application-centric programming and elastic web frameworks, you will be able to use the basic knowledge of these technologies to tailor the application to fit the needs of your business. Once you have mastered these techniques, then you will be able to automate the processes to suit your business.
In the same way that VMWare Helion has developed its own ecosystem and applications, the cloud infrastructure automation project also has an application programming interface or API that it has created for itself.
In addition, a number of these applications have been developed to provide end-users with the ability to automate their own applications.
The automation suite itself has very few requirements for end-users, and there is a range of automated solutions available.
The fact that the whole process can be carried out entirely from a web browser makes it possible for a business to develop and manage the automation process from the comfort of their own office, and from a position of relative ease.
The real issue for those who are looking at how is Docker used for cloud infrastructure automation is the ability to integrate the process. While the underlying technologies of containers and orchestration make it possible to automate various aspects of a certain set of applications, only a small number of these technologies support the capability to integrate other services and systems through an application.
If you are interested in how is Docker used for cloud infrastructure automation, and automation of your application, you should be looking at using the available services of the automation suite for your system. VMWare’s Helion platform is just one example of this available service.

Master NumPy In Just A Few Minutes!

Dhruv Prajapati — Wed, 06 Jan 2021 13:41:51 +0000

The objective of this article is to give brief knowledege about NumPy.

What is NumPy?

NumPy is a library for the Python programming language, adding support for large, multi-dimensional arrays and matrices, along with a large collection of high-level mathematical functions to operate on these arrays.
NumPy is the fundamental package for scientific computing in Python.NumPy stands for Numerical Python.

What is the purpose of NumPy?

NumPy arrays facilitate advanced mathematical and other types of operations on large numbers of data. Typically, such operations are executed more efficiently and with less code than is possible using Python's built-in sequences.
NumPy is written in C Language.

Installing NumPy

You can install NumPy using pip and if you are using anaconda than you can also install using conda .

pip install numpy

conda install numpy

After setting up numpy let's start exploring numpy.
I am using Jupyter Notebook for NumPy and Python Programming, but if you do not have Anaconda than you can use Visual Studio Code as well.

Import Numpy

import numpy as np

Array() Function

This function is used to convert python array or python list into the numpy array.
We can also convert python multi-dimensional array into numpy array using this function.

Arange Function

When working with data, you will often come across use cases where you need to generate data.
NumPy has an “arrange()” method with which you can generate a range of values between two numbers. The arrange function takes the start, end, and an optional distance parameter.

Zeros and Ones Function

You can also generate an array or matrix of zeroes or ones using NumPy.
Also, Both these functions support n-dimensional arrays as well. You can add the shape as a tuple with rows and columns.

Identity Matrix

You can also generate an identity matrix using a built-in NumPy function called “eye”.

Linspace Function

NumPy has a linspace method that generates evenly spaced points between two numbers. It takes 3 arguments as starting point, ending point and jump.

Random Number Generation

When you are working on machine learning problems, you will often need to generate random numbers. NumPy has in-built functions for that as well.
First, let's look at two major types of distributions.

Normal Distribution

The normal distribution is a very important concept in statistics since it seen in many natural phenomena. It is also called a “bell curve”.

Uniform Distribution

If the values in the distribution have the probability as a constant, it is called a uniform distribution.
For example, a coin toss has a uniform distribution since the probability of getting either heads or tails in a coin toss is the same.
To generate random numbers in a uniform distribution, use the rand() function from np.random.

To generate random numbers in a normal distribution, use the randn() function from np.random.

To generate random integers between a low and high value, use the randint() function from np.random.

A seed value is used if you want your random numbers to be the same during each computation.
Whenever you use a seed number, you will always get the same array generated without any change.

Reshaping Arrays

As a data scientist, you will work with re-shaping the data sets for different types of computations.
To get the shape of an array, use the shape property.

To reshape an array, use the reshape() function.
Also, reshape only works if the existing structure makes sense. You cannot reshape a 2x2 array into a 3x1 array.

Slicing Data

Let's look at fetching data from NumPy arrays. NumPy arrays work similarly to Python lists during fetch operations.

If you look at the above example, even though we assigned the slice of “myarr” to the variable “sliced”, changing the value of “sliced” affects the original array. This is because the “slice” was just pointing to the original array.
To make an independent section of an array, use the copy() function.

Slicing multi-dimensional arrays work similarly to one-dimensional arrays.

Array Computations

NumPy is known for its speed when performing complex computations on large multi-dimensional arrays.

For zero division errors, Numpy will convert the value to NaN (not a number).
There are also a few in-built computation methods available in NumPy to calculate values like mean, standard deviation, variance, and others.

Sum — np.sum()
Square Root — np.sqrt()
Mean — np.mean()
Variance — np.var()
Standard Deviation — np.std()

While working with 2d arrays, you will often need to calculate row wise or column-wise sum, mean, variance, and so on.
You can use the optional axis parameter to specify if you want to choose a row or a column.

Conditional Operations

You can also do conditional filtering with NumPy using the square bracket notation.

Conclusion

NumPy package has lot more capabilities and especially when working with higher-dimensional data. NumPy is very Fast, Easy to Use and Robust library to work with Data, Manipulating the data.
You can find complete jupyter notebook with the contents of this post.
There are lot more functionalities I have not covered as above are mostly used. If you are interested to learn NumPy i would recommend NumPy Official Documentation.
I want to Thank You very much for reading this post.

Building Flask User Authentication with JWT

Dhruv Prajapati — Tue, 15 Sep 2020 07:03:00 +0000

This is the last part of Flask Series.
Part 1 in which i have explained what is REST API and HTTPS and then implemented RESTAPI with Flask.
Part 2 we implemented simple Login Registration with Flask.
Today we will implement Token based authentication using JWT in Flask.
Modules which i have used to implement JWT based authentication are given below



Flask -> Building Web Application
Flask-JWT-Extended -> To work with JWT Tokens
Flask-RESTful -> To Build RestAPIs
Flask-SqlAlchemy -> Provide support for SQLAlchemy to your application
passlib -> Password Hasing Library
PyJWT -> To Encode and Decode Json Web Token
SQLAlchemy -> Provide ORM for our Application
Werkzeug -> WSGI Web Application Library, it will provide security to encrypt password and matching Password

To install modules use pip install <module-name>

What is JWT?

JWT stands for JSON WEB TOKEN
It is used to transfer information securely between parties as a JSON object.
This information can be verfied at both the end because it is digitally signed.
We can use Public key cryptography or Private key cryptography to signed JWTs.

JSON WEB TOKEN Structure

JWT is made up from Three parts
Header
Paylod
Signature

Header

Header consist two parts:The Type of JWT Token and Hashing Algorithm For Example: ```

{
"alg": "RS256",
"typ": "JWT"
}


**Payload**

* Payload is nothing but User Data such as Username, subject, birthdate etc...
For Example:

{
"sub": "123456789",
"name": "Dhruv Prajapati",
"admin": true,
}


**Signature**

* To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.
For Example:

HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
secret)

You can understand more about [JWT from here](https://jwt.io/)

* So let's start building over project.

* Create Directory named as `Flask-JWT-Authentication`. Our Folder Structure is as given below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c6lslamk7a1jmr609es0.PNG)

* First we will create basic structure of our application such as creating Flask Application, API Class Object, Database class Object, JWT Manager Object and other application configuration.

* Let's create `app.py` and put below code.

```python



from flask import Flask

from flask_restful import Api

from flask_sqlalchemy import SQLAlchemy

from flask_jwt_extended import JWTManager

# Making Flask Application
app = Flask(__name__)

# Object of Api class
api = Api(app)

# Application Configuration
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:root@localhost/jwt_auth'

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

app.config['SECRET_KEY'] = 'ThisIsHardestThing'

app.config['JWT_SECRET_KEY'] = 'Dude!WhyShouldYouEncryptIt'

app.config['JWT_BLACKLIST_ENABLED'] = True

app.config['JWT_BLACKLIST_TOKEN_CHECKS'] = ['access', 'refresh']

# SqlAlchemy object
db = SQLAlchemy(app)

# JwtManager object
jwt = JWTManager(app)

we will create models for our web application. so create models.py inside the directory we just created. models.py contains two models. One is UserModel and other one is RevokedTokenModel




from app import db

from passlib.hash import pbkdf2_sha256 as sha256


class UserModel(db.Model):
    """
    User Model Class
    """

    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)

    username = db.Column(db.String(120), unique=True, nullable=False)

    password = db.Column(db.String(120), nullable=False)

    """
    Save user details in Database
    """
    def save_to_db(self):

        db.session.add(self)

        db.session.commit()

    """
    Find user by username
    """
    @classmethod
    def find_by_username(cls, username):

        return cls.query.filter_by(username=username).first()

    """
    return all the user data in json form available in DB
    """
    @classmethod
    def return_all(cls):

        def to_json(x):

            return {

                'username': x.username,

                'password': x.password

            }

        return {'users': [to_json(user) for user in UserModel.query.all()]}

    """
    Delete user data
    """
    @classmethod
    def delete_all(cls):

        try:

            num_rows_deleted = db.session.query(cls).delete()

            db.session.commit()

            return {'message': f'{num_rows_deleted} row(s) deleted'}

        except:

            return {'message': 'Something went wrong'}

    """
    generate hash from password by encryption using sha256
    """
    @staticmethod
    def generate_hash(password):

        return sha256.hash(password)

    """
    Verify hash and password
    """
    @staticmethod
    def verify_hash(password, hash_):

        return sha256.verify(password, hash_)

User Model contains two fields: Username and Password. To save the user details in Database model contains save_to_db method. find_by_username method will find user by it's username. return_all and delete_all method is used to return all users and delete all users respectively. generate_hash method will generate hash from user password and verify_hash method will verify hash and password at login time.



# User Model
# ...

class RevokedTokenModel(db.Model):
    """
    Revoked Token Model Class
    """

    __tablename__ = 'revoked_tokens'

    id = db.Column(db.Integer, primary_key=True)

    jti = db.Column(db.String(120))

    """
    Save Token in DB
    """
    def add(self):

        db.session.add(self)

        db.session.commit()

    """
    Checking that token is blacklisted
    """
    @classmethod
    def is_jti_blacklisted(cls, jti):

        query = cls.query.filter_by(jti=jti).first()

        return bool(query)

RevokedToken Model contains jti field. add method is used to save token in Database and is_jti_blacklisted is used to check that JTI is blacklisted or not.
Now we will create resources for our APIs. So, let's create resource.py
First we will create UserRegistration and UserLogin Resources.




from flask_restful import Resource, reqparse

from models import UserModel, RevokedTokenModel

from flask_jwt_extended import (
    create_access_token,
    create_refresh_token,
    jwt_required,
    jwt_refresh_token_required,
    get_jwt_identity,
    get_raw_jwt
)

import pdb

# provide simple and uniform access to any variable
parser = reqparse.RequestParser()

parser.add_argument('username', help='username cannot be blank', required=True)

parser.add_argument('password', help='password cannot be blank', required=True)


class UserRegistration(Resource):
    """
    User Registration Api
    """

    def post(self):

        data = parser.parse_args()

        username = data['username']

        # Checking that user is already exist or not
        if UserModel.find_by_username(username):

            return {'message': f'User {username} already exists'}

        # create new user
        new_user = UserModel(

            username=username,

            password=UserModel.generate_hash(data['password'])

        )

        try:

            # Saving user in DB and Generating Access and Refresh token
            new_user.save_to_db()

            access_token = create_access_token(identity=username)

            refresh_token = create_refresh_token(identity=username)

            return {

                'message': f'User {username} was created',

                'access_token': access_token,

                'refresh_token': refresh_token

            }

        except:

            return {'message': 'Something went wrong'}, 500


class UserLogin(Resource):
    """
    User Login Api
    """

    def post(self):

        data = parser.parse_args()

        username = data['username']

        # Searching user by username
        current_user = UserModel.find_by_username(username)

        # user does not exists
        if not current_user:

            return {'message': f'User {username} doesn\'t exist'}

        # user exists, comparing password and hash
        if UserModel.verify_hash(data['password'], current_user.password):

            # generating access token and refresh token
            access_token = create_access_token(identity=username)

            refresh_token = create_refresh_token(identity=username)

            return {

                'message': f'Logged in as {username}',

                'access_token': access_token,

                'refresh_token': refresh_token

            }

        else:

            return {'message': "Wrong credentials"}

Now Let's create UserLogoutAccess and UserLogoutRefresh inside the resource.py




class UserLogoutAccess(Resource):
    """
    User Logout Api 
    """

    @jwt_required
    def post(self):

        jti = get_raw_jwt()['jti']

        try:
            # Revoking access token
            revoked_token = RevokedTokenModel(jti=jti)

            revoked_token.add()

            return {'message': 'Access token has been revoked'}

        except:

            return {'message': 'Something went wrong'}, 500


class UserLogoutRefresh(Resource):
    """
    User Logout Refresh Api 
    """
    @jwt_refresh_token_required
    def post(self):

        jti = get_raw_jwt()['jti']

        try:

            revoked_token = RevokedTokenModel(jti=jti)

            revoked_token.add()

            pdb.set_trace()

            return {'message': 'Refresh token has been revoked'}

        except:

            return {'message': 'Something went wrong'}, 500

We need to create TokenRefresh resource so, if token expired then user can get new access token from refresh token. Create TokenRefresh resource under the resource.py




class TokenRefresh(Resource):
    """
    Token Refresh Api
    """

    @jwt_refresh_token_required
    def post(self):

        # Generating new access token
        current_user = get_jwt_identity()

        access_token = create_access_token(identity=current_user)

        return {'access_token': access_token}

At last we will create getAllUsers and deleteAllUsers under the resources. also we will create starting point for authenticated resources secretResources. under secretResources you can create authenticated end points which will only accessible when user is authenticated.




class AllUsers(Resource):

    def get(self):
        """
        return all user api
        """
        return UserModel.return_all()

    def delete(self):
        """
        delete all user api
        """
        return UserModel.delete_all()


class SecretResource(Resource):

    """
    Secrest Resource Api
    You can create crud operation in this way
    """
    @jwt_required
    def get(self):
        return {'answer': 'You are accessing super secret blueprint'}

At the finishing up the project, create our APIs and database tables under the app.py



# above code
#...

# Generating tables before first request is fetched
@app.before_first_request
def create_tables():

    db.create_all()

# Checking that token is in blacklist or not
@jwt.token_in_blacklist_loader
def check_if_token_in_blacklist(decrypted_token):

    jti = decrypted_token['jti']

    return models.RevokedTokenModel.is_jti_blacklisted(jti)

# Importing models and resources
import models, resources

# Api Endpoints

api.add_resource(resources.UserRegistration, '/registration')

api.add_resource(resources.UserLogin, '/login')

api.add_resource(resources.UserLogoutAccess, '/logout/access')

api.add_resource(resources.UserLogoutRefresh, '/logout/refresh')

api.add_resource(resources.TokenRefresh, '/token/refresh')

api.add_resource(resources.AllUsers, '/users')

api.add_resource(resources.SecretResource, '/secret')

Here, our building section is completed. Let's run our project
To run the project in windows machine go to the project path in Command Prompt and use below commands.



set FLASK_APP=app.py

set FLASK_DEBUG=1

flask run --port=8080

To run the project in Unix Machinego to the project path in Terminal and use below commands.



export FLASK_APP=app.py

export FLASK_DEBUG=1

flask run --port=8080

Here, --port is optional flag.
Now, consume all the apis one by one. I have added some of api access in Postman.

UserRegistration Api

UserLogin Api

GetAllUsers

You can get whole code of this tutorial from My GitHub Repository

Thank you for Reading. Give like and follow me for more amazing tutorials.

Flask Login-Register-Logout Implementation

Dhruv Prajapati — Sat, 25 Jul 2020 17:04:07 +0000

This is the Part-2 of the Flask Series. I have explained What is Rest API and Implementation in Flask. Please refer that article first for better understanding of rest apis.
Today we are going to implement Login-Register Flow in Flask.So without any further let's jump into it. You can check whole code on Github Repository.
First of all, we will install dependencies which we are going to use are listed below.

Flask = Building Web Application
Flask-SQLAlchemy = Provide support for SQLAlchemy to your application
Flask-WTF = To Create Interactive User Interface
SQLAlchemy = Provide ORM for our Application
Werkzeug = WSGI Web Application Library, it will provide security to encrypt password and matching Password
WTForms = Form Validation and Generation Library
To install dependencies in your project use pip command.

pip install <library-name>

Now Create directory named as Flask-Login-Register. our project structure is like below image.

Now we create Login and Registration Forms using wtforms.
create forms.py file inside the directory.

# Importing Require Module

from wtforms import Form, BooleanField, StringField, PasswordField, validators, TextAreaField, IntegerField

from wtforms.validators import DataRequired

# Creating Login Form contains email and password
class LoginForm(Form):

    email = StringField("Email", validators=[validators.Length(min=7, max=50), validators.DataRequired(message="Please Fill This Field")])

    password = PasswordField("Password", validators=[validators.DataRequired(message="Please Fill This Field")])

# Creating Registration Form contains username, name, email, password and confirm password.

class RegisterForm(Form):

    name = StringField("Ad", validators=[validators.Length(min=3, max=25), validators.DataRequired(message="Please Fill This Field")])

    username = StringField("Username", validators=[validators.Length(min=3, max=25), validators.DataRequired(message="Please Fill This Field")])

    email = StringField("Email", validators=[validators.Email(message="Please enter a valid email address")])

    password = PasswordField("Password", validators=[

        validators.DataRequired(message="Please Fill This Field"),

        validators.EqualTo(fieldname="confirm", message="Your Passwords Do Not Match")
    ])

    confirm = PasswordField("Confirm Password", validators=[validators.DataRequired(message="Please Fill This Field")])

This file will create Forms when we will use Jinja2 Template to create our templates. Here, DataRequired function will throw an error if field is empty.
For password and confirm password we have used PasswordField function and to check that password and confirm password is same we have used EqualTo function.
Let's, generate our User model and API Endpoints. For the simplicity purpose i will write whole code in one file.
Create app.py under the directory and place below code inside the file.

# Importing require libraries
from flask import Flask, render_template, flash, redirect, request, session, logging, url_for

from flask_sqlalchemy import SQLAlchemy

from forms import LoginForm, RegisterForm

from werkzeug.security import generate_password_hash, check_password_hash

# Now create flask application object

app = Flask(__name__)

# Database Configuration and Creating object of SQLAlchemy

app.config['SECRET_KEY'] = '!9m@S-dThyIlW[pHQbN^'

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:root@localhost/auth'

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

# Create User Model which contains id [Auto Generated], name, username, email and password

class User(db.Model):

    __tablename__ = 'usertable'

    id = db.Column(db.Integer, primary_key=True)

    name= db.Column(db.String(15), unique=True)

    username = db.Column(db.String(15), unique=True)

    email = db.Column(db.String(50), unique=True)

    password = db.Column(db.String(256), unique=True)

Now create our first route, which will render the home page of our flask web application. put below code inside the app.py.

@app.route('/')
def home():

    return render_template('index.html')

It's time to create actual functionality for our web application. In our case it is endpoint for login and register.
put below code inside app.py. it will provide use User Registration Functionality.

# User Registration Api End Point
@app.route('/register/', methods = ['GET', 'POST'])
def register():
    # Creating RegistrationForm class object
    form = RegisterForm(request.form)

    # Cheking that method is post and form is valid or not.
    if request.method == 'POST' and form.validate():

        # if all is fine, generate hashed password
        hashed_password = generate_password_hash(form.password.data, method='sha256')

        # create new user model object
        new_user = User(

            name = form.name.data, 

            username = form.username.data, 

            email = form.email.data, 

            password = hashed_password )

        # saving user object into data base with hashed password
        db.session.add(new_user)

        db.session.commit()

        flash('You have successfully registered', 'success')

        # if registration successful, then redirecting to login Api
        return redirect(url_for('login'))

    else:

        # if method is Get, than render registration form
        return render_template('register.html', form = form)

Above API endpoint will check that is http request method is get, than render registration form but if the http request method is post, than it will check that form is valid or not, if form is valid, it will generate hash password from password and create new user object with that password and then it will save that object inside the Database.
Here, one thing to notice that, we do not need to check that password and confirm password is same or not by making login, we have checked that in our registration form generation class.
Now, Let's create our Login and Logout APIs. Put below code inside the app.py file.

# Login API endpoint implementation
@app.route('/login/', methods = ['GET', 'POST'])
def login():
    # Creating Login form object
    form = LoginForm(request.form)
    # verifying that method is post and form is valid
    if request.method == 'POST' and form.validate:
        # checking that user is exist or not by email
        user = User.query.filter_by(email = form.email.data).first()

        if user:
            # if user exist in database than we will compare our database hased password and password come from login form 
            if check_password_hash(user.password, form.password.data):
                # if password is matched, allow user to access and save email and username inside the session
                flash('You have successfully logged in.', "success")

                session['logged_in'] = True

                session['email'] = user.email 

                session['username'] = user.username
                # After successful login, redirecting to home page
                return redirect(url_for('home'))

            else:

                # if password is in correct , redirect to login page
                flash('Username or Password Incorrect', "Danger")

                return redirect(url_for('login'))
    # rendering login page
    return render_template('login.html', form = form)

Here, if method is post and form is valid, than it will search user in Database using user's email. if user exist than it will compare the hashed password which is stored inside the database and simple password which is entered by user.
If both password matched then allow user to access and redirect user to home while saving username and email inside the session.
Let's write our last backend logic for Logout API and Running Server. Write below code inside the app.py.

@app.route('/logout/')
def logout():
    # Removing data from session by setting logged_flag to False.
    session['logged_in'] = False
    # redirecting to home page
    return redirect(url_for('home'))

if __name__ == '__main__':
    # Creating database tables
    db.create_all()
    # running server
    app.run(debug=True)

Now, let's make our frontend templates and static.
Create templates directory inside the Flask-Login-Register directory.
Let's create our layout file named as base.html inside the templates directory. It will provide basic layout for our front end.

<!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">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="stylesheet" href="../static/main.css">
    <title>Flask</title>
</head>
<body>

    <div class="container">

        {% block body %}

        {% endblock body %}
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <hr>
</body>
</html>

Create includes directory inside our templates directory and create formhelpers.html inside the includes directory.
formhelpers.html uses jinja2 macros functionality, through this we can dynamically render our error & success messages and html fields. write below html code inside the formhelpers.html.

{% macro render_field(field) %}
  <dt>{{ field.label }}
  <dd>{{ field(**kwargs)|safe }}
  {% if field.errors %}
    <ul class=errors>
    {% for error in field.errors %}
      <li>{{ error }}</li>
    {% endfor %}
    </ul>
  {% endif %}
  </dd>
{% endmacro %}

Now, create our index.html, login.html and register.html inside templates directory.
put below code inside the index.html.

{% extends "base.html" %}

{% block body %}

<div class="topnav">
    {% if session.logged_in %}
        <a href="/logout/">Logout</a>
    {% else %}
        <a href="/login/">Login</a>
        <a href="/register/">Sign up</a>
    {% endif %}
</div>
<hr>

{% if session['logged_in'] %}
    <h5>Welcome, {{session['username'] }}</h5>
{% endif %}

{% endblock body %}

In above code, it will check for logged_in flag. it it is true than it will show logout on navbar and if it is false than it will show login and signup on navbar.

Now, createlogin.html file.

{% extends "base.html" %}

{% block body %}

{% from "includes/formhelpers.html" import render_field %}

<h4>
    <strong>
        Login
    </strong>
</h4>
<hr>

<form method="POST">

    {{ render_field(form.email, class="form-control") }}
    {{ render_field(form.password, class="form-control") }}

    <button type="submit" class="btn btn-primary">Login</button>
</form>

<hr>

<a href="/register">Create a New Account!</a>

{% endblock body %}

Here, render field will render email and password by using jinja2 macro functionality.

Now, Create register.html.

{% extends "base.html" %}

{% block body %}

{% from "includes/formhelpers.html" import render_field %}

<h4>
    <strong>
        Register
    </strong>
</h4>
<hr>

<form method="POST">

    {{ render_field(form.name, class="form-control") }}
    {{ render_field(form.username, class="form-control") }}
    {{ render_field(form.email, class="form-control") }}
    {{ render_field(form.password, class="form-control") }}
    {{ render_field(form.confirm, class="form-control") }}

    <button type="submit" class="btn btn-primary">Register</button>
</form>

<hr>

<a href="/login">Login into existing account!</a>

{% endblock body %}

Now, let's create simple navigation bar for out project by applying css to the class.
Create static director inside Flask-Login-Register and create main.css file. Our main.css file will look like below.

/* Add a black background color to the top navigation */
.topnav {
    background-color: #172944;
    overflow: hidden;
}

  /* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

  /* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

  /* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

Here. our login-registration flow is completed.
Let's run our project.
To run project in windows use below command inside the Flask-Login-Register path of command prompt.

set FLASK_APP=app.py

set FLASK_DEBUG=1

flask run --port=8080

To run project in MacOs/Linux use below command inside the Flask-Login-Register path of terminal.

export FLASK_APP=app.py

export FLASK_DEBUG=1

flask run --port=8080

Here, --port is optional flag.
In next post i will explain what is jwt and implement jwt with flask.