Forem: David Mendez Guardado

Angular 18.1 - Create a simple login using Angular Material

David Mendez Guardado — Sun, 04 Aug 2024 23:32:10 +0000

We have some new project in our team... we need to learn about code into angular to create and i become some difficulties to get a rapid learning and creating.

As a team we trying to find some rapid tutorials about some functionality, the login was one and is so difficult to find we create this login using multiple web pages to bring the functionality we need in our project.

Create base project

First thing we need to do is to install NodeJS if not have on our computer, got the latest evrsion from official site: NodeJS Download.

Then install the latest version of angular.

npm install -g @angular/cli

Then following the documentation in angular official site, we need to create a project.

ng new <project-name>

You will be presented with some configuration options for your project. Use the arrow and enter keys to navigate and select which options you desire.

If you don't have any preferences, just hit the enter key to take the default options and continue with the setup.

After you select the configuration options and the CLI runs through the setup, you should see the following message:

✔ Packages installed successfully.
 Successfully initialized git.

At this point, you're now ready to run your project locally!, to do this we need to move into the project folder we created and then run the follow line on the terminal:

ng serve

After successfully loads the proyect you can go into http://localhost:4200/ to see your application running, now you see the follow view.

Install Angular Material

To install angular Material 18.1, we need to run the follow line on the terminal.

ng add @angular/material

Then the terminal ask you to: select the theme, select if you want to install globally the material font, and select if you want to install the Angular Material animations, the follow are the files this installation modify.

Add project dependencies to package.json
Add the Roboto font to your index.html
Add the Material Design icon font to your index.html
Add a few global CSS styles to:
- Remove margins from body
- Set height: 100% on html and body
- Set Roboto as the default application font

You're done! Angular Material is now configured to be used in your application.

Create login component

Now we need to create a new folder in the project inside folder /app called authentication

Then we need to create the new component, writing the follow line on terminal:

ng g c /authentication/login

And you see the follow output on the terminal:

CREATE src/app/authentication/login/login.component.html (21 bytes)
CREATE src/app/authentication/login/login.component.spec.ts (608 bytes)
CREATE src/app/authentication/login/login.component.ts (243 bytes)
CREATE src/app/authentication/login/login.component.scss (0 bytes)

The follow step in the component was to set the styles, i suggest the follow:

login.component.css

mat-card {
    max-width: 400px;
    margin: 2em auto;
    text-align: center;
}

mat-form-field {
    display: block;
}

.card-title {
    color: #646464;
}

:host {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

footer {
    width: 100%;
    font-size: .9em;
    color: darkgray;
    text-align: center;
}

Also we add the follow html code to:

login.component.html

<mat-card>
    <mat-card-header>
        <h2>Sistema Soluciones Telcel</h2>
    </mat-card-header>
    <mat-card-content>
        <form #loginForm="ngForm" (submit)="login()">
            <h4 class="card-title">Acceso</h4>
            <mat-error *ngIf="!loginValid">
                El usuario y contraseña no son correctos!.
            </mat-error>
            <mat-form-field>
                <mat-label>Usuario</mat-label>
                <input matInput placeholder="Usuario" [(ngModel)]="user" name="username" required>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Contraseña</mat-label>
                <input matInput type="password" placeholder="Contraseña" [(ngModel)]="password" name="password"
                    required>
            </mat-form-field>
            <button mat-raised-button color="primary" [disabled]="!loginForm.form.valid">Login</button>
        </form>
    </mat-card-content>
</mat-card>

<footer>
    Copyright © {{year}}
    <a href="#" rel="" target="_blank" title="Retrogemu">Retrogemu</a>
</footer>

And need to write the follow code on the latest file, this code have all the imports needed to get the angular material on the view, and handle the login functionality calling an API we created previously in our team or handle locally in our angular porject.

login.component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { RouterOutlet, Router } from '@angular/router';
import { AuthService } from '../../core/services/auth.service';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';

const materialModules = [
  RouterOutlet,
  FormsModule,
  CommonModule,
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatFormFieldModule
];

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [materialModules],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export default class LoginComponent {
  user: string = '';
  password: string = '';
  loginValid: boolean = true;
  year: number = new Date().getFullYear();

  constructor(private authService: AuthService, private router: Router) {

  }

  login(): void {
    this.authService.login(btoa(this.user), btoa(this.password)).subscribe({
      next: () => {
        this.loginValid = true;
        this.router.navigate(['index']);
      },
      error: (err) => this.loginValid = false
    });
  }
}

Now we have a functional login for our project in Angular 18.1 and Angular Material 18.1, also have a user and password handler to send into API or local movement.

Create DOCX file

David Mendez Guardado — Wed, 10 Jan 2024 04:44:39 +0000

Microsoft Word files are a standard for exchanging rich text documents. Images, tables and lists, among other types of resources, can be included in them. In addition, it is a format that the rector can easily edit, unlike PDF files. So having the possibility of creating Word documents with Python can make it easier for us to create reports in this format.

Install libraries

To handle word documents we need to install the library docx.

pip install python-docx

Create word file

Import libraries

Here import the libraries needed.

from docx import Document
from docx.shared import Cm, Pt

Create Microsoft word document

Follow we need to add the document object to code, after add this line you able to add header, title, subtitle, images, text, and styles to word document.

Create main object

doc = Document()

Add header to file

With the next code add the header to file.

# Header
header = doc.sections[0].header
paragraph = header.paragraphs[0]
paragraph.add_run("Retrogemu docx file")

Add title to file

Like you see in the next part of the code we able to insert a title inside the file and set the title font size.

# Title
title = doc.add_heading("Title 1", level = 1)
title_font = title.runs[0].font
title_font.size = Pt(18)

Add paragraph to file

With follow code add a paragraph to file.

# Paragraph
paragraph_1 = doc.add_paragraph("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip")

Add bold text

if you need to remark some text, the follow code would help you to do that.

# Bold text
paragraph_1.add_run("ex ea commodo consequat.").bold = True
paragraph_1.add_run("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")

Add subtitle and image

Also we able to add subtitle and images in the document.

# Subtitle
subtitle_1 = doc.add_heading("Profile image", level = 2)
doc.add_paragraph()
doc.add_picture('assets/img/profile_image.png', width=Cm(2), height=Cm(2))
paragraph_2 = doc.add_paragraph()
paragraph_2.add_run("@Retrogemu").bold = True

Save file

As last step in this code, is to save the file.

# Save file
doc.save("profile_example.docx")

Complete file

Now here is the complete code in one file, don't forget put the image in the folder assets\img\profile_image.png to get from code.

from docx import Document
from docx.shared import Cm, Pt

doc = Document()

# Header
header = doc.sections[0].header
paragraph = header.paragraphs[0]
paragraph.add_run("Retrogemu docx file")

# Title
title = doc.add_heading("Title 1", level=1)
title_font = title.runs[0].font
title_font.size = Pt(18)

# Paragraph
paragraph_1 = doc.add_paragraph(
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip")

# Bold text
paragraph_1.add_run(" ex ea commodo consequat.").bold = True
paragraph_1.add_run("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")

# Subtitle
subtitle_1 = doc.add_heading("Profile image", level=2)
doc.add_paragraph()
doc.add_picture('assets/img/profile_image.png', width=Cm(2), height=Cm(2))
paragraph_2 = doc.add_paragraph()
paragraph_2.add_run("@Retrogemu").bold = True

# Save file
doc.save("profile_example.docx")

Result file

Powershell Music Player

David Mendez Guardado — Thu, 31 Oct 2019 17:37:40 +0000

Powershell music player

In this post will be create a Powershell script that play a list of songs in a folder you specified.

I take the example code form the Music Player v1.0.1 by -Powershell Gallery

This Music player only takes 7.65KB in space.

In RAM like you supposed is between 20MB and 30MB.

First we need to create a Powershell file call what ever you want, i call them "PlayMusic.ps1".

Next start to coding the script, we need to receive 5 parameters:

Music path
If is on Shuffle playing mode
If is on Loop playing mode
If you want to Stop
File type of songs

with this parameters now will have all the configuration to start plating music, so you ask how to use this parameters in Powershell, yes!! like this:

Param (
    [Alias('P')]  [String] $PathMusic,
    [Alias('Sh')] [switch] $Shuffle, 
    [Alias('St')] [Switch] $Stop, 
    [Alias('L')]  [Switch] $Loop,
    [Alias('Ft')] [String] $fileType
)

Next to this at the end of the file we need to put all the logic(right now is a mess) for the terminal input; maybe now works if you put all in one line but i'm no time to try, let's try by yourself's.

#Start-MediaPlayer

If ($Stop. IsPresent) {

    Start-MediaPlayer -St $Stop

}
ElseIf ($PathMusic) {

    If ($Shuffle.IsPresent) {
        If ($fileType) {
            Start-MediaPlayer $ -P $PathMusic -Sh $Shuffle -Ft $fileType
        }
        Else {
            Start-MediaPlayer $ -P $PathMusic -Sh $Shuffle -Ft ".flac"
        }
    }
    ElseIf ($Loop.IsPresent) {
        If ($fileType) {
            Start-MediaPlayer -P $PathMusic -L $Loop -Ft $fileType
        }
        Else {
            Start-MediaPlayer -P $PathMusic -L $Loop -Ft ".flac"
        }
    }    
    Else {
        Start-MediaPlayer -P $PathMusic -Ft ".flac"
    }

}
Else {

    Start-MediaPlayer -Ft ".flac"

}

Like you see in the code i use the ".flac" format as default, because this is my prefered music file type.

Summary

Here you have all the complete code for this script it takes 161 code lines.

# Create a playlist of files from folder

Param(

    [Alias('P')]  [String] $PathMusic,
    [Alias('Sh')] [switch] $Shuffle, 
    [Alias('St')] [Switch] $Stop, 
    [Alias('L')]  [Switch] $Loop,
    [Alias('Ft')] [String] $fileType

)

function Start-MediaPlayer { 

    Param( 
        [Alias('P')]  [String] $Path, 
        [Alias('Sh')] [switch] $Shuffle, 
        [Alias('St')] [Switch] $Stop, 
        [Alias('L')]  [Switch] $Loop,
        [Alias('Ft')] [String] $fileType
    ) 



    If ($Stop.IsPresent) { 
        Write-Host "Stoping any Already running instance of Media in background." 
        Get-Job MusicPlayer -ErrorAction SilentlyContinue | Remove-Job -Force 
    } 
    Else {        
        #Caches Path for next time in case you don't enter Path to the music directory 
        If ($Path) { 
            $Path | out-file C:\Temp\Musicplayer.txt 
        } 
        else { 
            If ((Get-Content C:\Temp\Musicplayer.txt -ErrorAction SilentlyContinue).Length -ne 0) { 
                Write-Host "You've not provided a music directory, looking for cached information from Previous use." 
                $Path = Get-Content C:\Temp\Musicplayer.txt 



                If (-not (Test-Path $Path)) { 
                    Write-Host "Please provide a Path to a music directory.\nFound a cached directory $Path from previous use, but that too isn't accessible!" 
                    # Mark Path as Empty string, If Cached Path doesn't exist 
                    $Path = ''      
                } 
            } 
            else { 
                Write-Host "Please provide a Path to a music directory." 
            } 
        } 



        #initialization Script for back ground job 
        $init = { 
            # Function to calculate duration of song in Seconds 
            Function Get-SongDuration($FullName) { 
                $Shell = New-Object -COMObject Shell.Application 
                $Folder = $shell.Namespace($(Split-Path $FullName)) 
                $File = $Folder.ParseName($(Split-Path $FullName -Leaf)) 

                [int]$h, [int]$m, [int]$s = ($Folder.GetDetailsOf($File, 27)).split(":") 

                $h * 60 * 60 + $m * 60 + $s 
            } 

            # Function to Notify Information balloon message in system Tray 
            Function Show-NotifyBalloon($Message) { 
                [system.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms') | Out-Null             
                $Global:Balloon = New-Object System.Windows.Forms.NotifyIcon             
                $Balloon.Icon = [System.Drawing.Icon]::ExtractAssociatedIcon((Get-Process -id $pid | Select-Object -ExpandProperty Path))                     
                $Balloon.BalloonTipIcon = 'Info'            
                $Balloon.BalloonTipText = $Message             
                $Balloon.BalloonTipTitle = 'Now Playing'             
                $Balloon.Visible = $true             
                $Balloon.ShowBalloonTip(1000) 
            } 

            Function PlayMusic($Path, $Shuffle, $Loop) { 
                # Calling required assembly 
                Add-Type -AssemblyName PresentationCore 

                # Instantiate Media Player Class 
                $MediaPlayer = New-Object System.Windows.Media.Mediaplayer 

                # Crunching the numbers and Information 
                $FileList = Get-ChildItem $Path -Recurse -Include *$fileType* | Select-Object fullname, @{n = 'Duration'; e = { get-songduration $_.fullname } } 
                $FileCount = $FileList.count 
                $TotalPlayDuration = [Math]::Round(($FileList.duration | Measure-Object -Sum).sum / 60) 

                # Condition to identifed the Mode chosed by the user 
                if ($Shuffle.IsPresent) { 
                    $Mode = "Shuffle" 
                    $FileList = $FileList | Sort-Object { Get-Random }  # Find the target Music Files and sort them Randomly 
                } 
                Else { 
                    $Mode = "Sequential" 
                } 

                # Check If user chose to play songs in Loop 
                If ($Loop.IsPresent) { 
                    $Mode = $Mode + " in Loop" 
                    $TotalPlayDuration = "Infinite" 
                } 

                If ($FileList) {     
                    '' | Select-Object @{n = 'TotalSongs'; e = { $FileCount }; }, @{n = 'PlayDuration'; e = { [String]$TotalPlayDuration + " Mins" } }, @{n = 'Mode'; e = { $Mode } }  
                } 
                else { 
                    Write-Host "No music files found in directory $Path."  
                } 

                Do { 
                    $FileList | ForEach-Object { 
                        $CurrentSongDuration = New-TimeSpan -Seconds (Get-SongDuration $_.fullname) 
                        $Message = "Song : " + $(Split-Path $_.fullname -Leaf) + " `nPlay Duration : $($CurrentSongDuration.Minutes) Mins $($CurrentSongDuration.Seconds) Sec` nMode : $Mode"
                        $MediaPlayer.Open($_.FullName)                    # 1. Open Music file with media player 
                        $MediaPlayer.Play()                                # 2. Play the Music File 
                        Show-NotifyBalloon ($Message)                   # 3. Show a notification balloon in system tray 
                        Start-Sleep -Seconds $_.duration                # 4. Pause the script execution until song completes 
                        $MediaPlayer.Stop()                             # 5. Stop the Song 
                        $Balloon.Dispose(); $Balloon.visible = $false                            
                    } 
                }While ($Loop) # Play Infinitely If 'Loop' is chosen by user 
            } 
        } 



        # Removes any already running Job, and start a new job, that looks like changing the track 
        If ($(Get-Job Musicplayer -ErrorAction SilentlyContinue)) { 
            Get-Job MusicPlayer -ErrorAction SilentlyContinue | Remove-Job -Force 
        } 



        # Run only if Path was Defined or retrieved from cached information 
        If ($Path) { 
            Write-Host "Starting a background Job to play Music files" 
            Start-Job -Name MusicPlayer -InitializationScript $init -ScriptBlock { playmusic $args[0] $args[1] $args[2] } -ArgumentList $Path, $Shuffle, $Loop | Out-Null 
            Start-Sleep -Seconds 3       # Sleep to allow media player some breathing time to load files 
            Receive-Job -Name MusicPlayer | Format-Table @{n = 'TotalSongs'; e = { $_.TotalSongs }; alignment = 'left' }, @{n = 'TotalPlayDuration'; e = { $_.PlayDuration }; alignment = 'left' }, @{n = 'Mode'; e = { $_.Mode }; alignment = 'left' } -AutoSize 
        } 
    }      

}

#Start-MediaPlayer
If ($Stop. IsPresent) {

    Start-MediaPlayer -St $Stop

}
ElseIf ($PathMusic) {

    If ($Shuffle.IsPresent) {
        If ($fileType) {
            Start-MediaPlayer $ -P $PathMusic -Sh $Shuffle -Ft $fileType
        }
        Else {
            Start-MediaPlayer $ -P $PathMusic -Sh $Shuffle -Ft ".flac"
        }
    }
    ElseIf ($Loop.IsPresent) {
        If ($fileType) {
            Start-MediaPlayer -P $PathMusic -L $Loop -Ft $fileType
        }
        Else {
            Start-MediaPlayer -P $PathMusic -L $Loop -Ft ".flac"
        }
    }    
    Else {
        Start-MediaPlayer -P $PathMusic -Ft ".flac"
    }

}
Else {

    Start-MediaPlayer -Ft ".flac"

}

PBKDF2 Hash a secure password

David Mendez Guardado — Fri, 04 Oct 2019 17:14:05 +0000

Hashing a secure password to safe storage

In this paper i'll show you how to create a secure password to storage in your DB or whatever you want, an example of the secure password we create here was:

// this pass is "SecurePassword"
hAQSI9Feddid/DX3F71SPeL7doHAGeRKgefJ7XImpY4QyOcUh9Ypew==

Let's start with the coding challenge

Explanation about PBKDF2

by Wikipedia - PBKDF2

PBKDF2

In cryptography, PBKDF1 and PBKDF2 (Password-Based Key Derivation Function 2) are key derivation functions with a sliding computational cost, used to reduce vulnerabilities to brute force attacks.

PBKDF2 is part of RSA Laboratories' Public-Key Cryptography Standards (PKCS) series, specifically PKCS #5 v2.0, also published as Internet Engineering Task Force's RFC 2898. It supersedes PBKDF1, which could only produce derived keys up to 160 bits long. RFC 8018 (PKCS #5 v2.1), published in 2017, recommends PBKDF2 for password hashing.

Purpose and operation

PBKDF2 applies a pseudorandom function, such as hash-based message authentication code (HMAC), to the input password or passphrase along with a salt value and repeats the process many times to produce a derived key, which can then be used as a cryptographic key in subsequent operations. The added computational work makes password cracking much more difficult, and is known as key stretching.

When the standard was written in the year 2000 the recommended minimum number of iterations was 1, 000, but the parameter is intended to be increased over time as CPU speeds increase. A Kerberos standard in 2005 recommended 4, 096 iterations; Apple reportedly used 2, 000 for iOS 3, and 10, 000 for iOS 4; while LastPass in 2011 used 5000 iterations for JavaScript clients and 100, 000 iterations for server-side hashing.

Having a salt added to the password reduces the ability to use precomputed hashes (rainbow tables) for attacks, and means that multiple passwords have to be tested individually, not all at once. The standard recommends a salt length of at least 64 bits. The US National Institute of Standards and Technology recommends a salt length of 128 bits.

Alternatives to PBKDF2

One weakness of PBKDF2 is that while its number of iterations can be adjusted to make it take an arbitrarily large amount of computing time, it can be implemented with a small circuit and very little RAM, which makes brute-force attacks using application-specific integrated circuits or graphics processing units relatively cheap. The bcrypt password hashing function requires a larger amount of RAM (but still not tunable separately, i. e.fixed for a given amount of CPU time) and is slightly stronger against such attacks, while the more modern scrypt key derivation function can use arbitrarily large amounts of memory and is therefore more resistant to ASIC and GPU attacks.

Code for the secured password generation

For create a secure password we need to follow the next steps.

One of the important thing you need to know is the password we hashed is on One-Way-Hash so this means the result string can't do a reversible hashing, so you can't obtain the password from the hash string.

1.-create a salt

we need to create a salt this will be the unique byte array that will be used to create a hash, when you need to check if the password was correct you need this array of bytes to recreate the secure password.

// 1.-Create the salt value with a cryptographic PRNG
byte[] salt;
new RNGCryptoServiceProvider().GetBytes(salt = new byte[20]);

2.-Create a hash

in this part we get a hash from password using the salt created in the last step.

// 2.-Create the RFC2898DeriveBytes and get the hash value
var pbkdf2 = new Rfc2898DeriveBytes(password, salt, 10000);
byte[] hash = pbkdf2.GetBytes(20);

3.-Combine salt and hash password

in this step we combine the salt and the hash password in an array of bytes.

// 3.-Combine the salt and password bytes for later use
byte[] hashBytes = new byte[40];
Array.Copy(salt, 0, hashBytes, 0, 20);
Array.Copy(hash, 0, hashBytes, 20, 20);

4.-Get the string password

here is the finish of the creating a secured password, in this step we gets the string from the password generated.

// 4.-Turn the combined salt+hash into a string for storage
hashPass = Convert.ToBase64String(hashBytes);

Code validation for the secured password

next to password generation we need to create a hashed password validation, because we use this code in a login or something like you brain imagine.

One important thing you need to know is

to verify if the password was correct you need to follow this steps:

get the hashed password from your storage, i.e. Database, JSON file, etc.
convert to array of bytes.
get the salt from the array.
hash the password entered from user with the salt you get from the array.
compare if the hash you get is the same as the hashed password.

1.-Extract the bytes from stored hash

first, we need to convert into bytes the hashed password.

// Extract the bytes
byte[] hashBytes = Convert.FromBase64String(hashPass);

2.-Get the salt

second, we need to get the salt from the bytes array.

// Get the salt
byte[] salt = new byte[20];
Array.Copy(hashBytes, 0, salt, 0, 20);

3.-Computhe the hash

next, we need to compute the hash with the password entered by user and the salt we got.

// Compute the hash on the password the user entered
var pbkdf2 = new Rfc2898DeriveBytes(password, salt, 10000);
byte[] hash = pbkdf2.GetBytes(20);

4.-Compare the user password with hash stored

to finish, we need to compare the user entered password we hashed and the stored hash.

// compare the results
for (int i = 0; i < 20; i++)
{
    if (hashBytes[i + 20] != hash[i])
    {
        throw new UnauthorizedAccessException();
    }
}

Conclusion

As a conclusion for this paper, the use of the Password-Based Key Derivation Function 2 is a good way to secure our data, but like wikipedia says now is unsecure, because the malintended people can use a cheap hardware to decript our hashed password.

also i think if you add a one more level of security especifically for your business maybe becomes secure.

Summary of the PasswordCryptography class

This class was wrote in C#.

public class PasswordCryptographyPbkdf2
{
    /// <summary>
    /// Get the hash of the password
    /// </summary>
    /// <param name="password">string password</param>
    /// <returns>Hash secured password</returns>
    public string GetHashPassword(string password)
    {
        string hashPass = string.Empty;

        // 1.-Create the salt value with a cryptographic PRNG
        byte[] salt;
        new RNGCryptoServiceProvider().GetBytes(salt = new byte[20]);

        // 2.-Create the RFC2898DeriveBytes and get the hash value
        var pbkdf2 = new Rfc2898DeriveBytes(password, salt, 100000);
        byte[] hash = pbkdf2.GetBytes(20);

        // 3.-Combine the salt and password bytes for later use
        byte[] hashBytes = new byte[40];
        Array.Copy(salt, 0, hashBytes, 0, 20);
        Array.Copy(hash, 0, hashBytes, 20, 20);

        // 4.-Turn the combined salt+hash into a string for storage
        hashPass = Convert.ToBase64String(hashBytes);

        return hashPass;
    }

    /// <summary>
    /// Check if the password is valid
    /// </summary>
    /// <param name="password">Entered by user</param>
    /// <param name="hashPass">Stored password</param>
    /// <returns>True if is Valid.</returns>
    public bool IsValidPassword(string password, string hashPass)
    {
        bool result = true;

        // Extract the bytes
        byte[] hashBytes = Convert.FromBase64String(hashPass);
        // Get the salt
        byte[] salt = new byte[20];
        Array.Copy(hashBytes, 0, salt, 0, 20);
        // Compute the hash on the password the user entered
        var pbkdf2 = new Rfc2898DeriveBytes(password, salt, 100000);
        byte[] hash = pbkdf2.GetBytes(20);
        // compare the results
        for (int i = 0; i < 20; i++)
        {
            if (hashBytes[i + 20] != hash[i])
            {
                throw new UnauthorizedAccessException();
            }
        }

        return result;
    }
}

Face Detection in Python

David Mendez Guardado — Wed, 17 Jul 2019 22:23:20 +0000

Hi in this post i'll show you how to use OpenCV library to detect faces inside a picture, in a future post i'll show you how to detect in a Real-Time video that was amazing stuff to practice the visual recognition.

well let's start

Requirements

check your version of python or install python 3.6.

python--version

then we need to install OpenCV library by searching in the official webpage, in my local environment i use the OpenCV v4.1 you can use instead a previous version v3.X, i recommend you to follow the official
instructions to install in the documentation.

Code the Face Detection solution

Now we start coding the face detection program. First need to import the OpenCV library and the system library(could be optional, i use this library to get a parameter when i run the python code).

import cv2
import sys

Next to import statements, we need to get the parameter passed from the user, this parameter was the picture to test in the face detection program.

# Get user supplied values
imagePath = sys.argv[1]

In the next part we need to add in our code the magic for face detection this part is called Haar Cascade feature; you maybe ask why is a haar cascade, well now i'll explain you what it is.

Object Detection using Haar feature-based cascade classifiers is an effective object detection method proposed by Paul Viola and Michael Jones in their paper, "Rapid Object Detection using a Boosted Cascade of Simple Features" in 2001. It is a machine learning based approach where a cascade function is trained from a lot of positive and negative images. It is then used to detect objects in other images. Here we will work with face detection. Initially, the algorithm needs a lot of positive images (images of faces) and negative images (images without faces) to train the classifier. Then we need to extract features from it. For this, haar features shown in below image are used. They are just like our convolutional kernel. Each feature is a single value obtained by subtracting sum of pixels under white rectangle from sum of pixels under black rectangle. Now we have an idea was the HaarCascade can continue with the code, i'm using the Haar cascade file created by Rainer Lienhart ( the file you found in the repository of the code), we need to add the file to the code.

by OpenCV docuentation

cascPath = "haarcascade_frontalface_default.xml"

Next, we need to train the OpenCV classifier with the haar cascade file.

# Create the haar cascade
faceCascade = cv2.CascadeClassifier(cascPath)

In the next step we need to read the image and set to gray color because OpenCV do better job with gray scale pictures with haar cascade classifier.

# Read the image
image = cv2.imread(imagePath)
gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)

In this part the magic is done, the OpenCV framework do the magic detecting the faces inside an image and return the position of the face in the image, you can adjust the parameters to get more detailed results or more crazy haha!!!.

# Detect faces in the image
faces = faceCascade.detectMultiScale(
    gray,
    scaleFactor = 1.05,
    minNeighbors = 5,
    minSize = (30, 30),
    flags = cv2.CASCADE_SCALE_IMAGE
)

To finish our code for face detection just print the number of faces found in the image and then draw a rectangle with the face inside them, and show a windows with the images and the faces rounded; for close the window press any key.

print("Found {0} faces!".format(len(faces)))

# Draw a rectangle around the faces
for (x, y, w, h) in faces:
    cv2.rectangle(image, (x, y), (x + w, y + h), (0, 255, 0), 2)

height, width, channels = image.shape
cv2.imshow("{0} Faces found".format(len(faces)), image)
cv2.waitKey(0)

This is an example of the result more accurate.

Like you see in the image they recognize a hand like a face, that was some of the issues i found, i try to set more accurate values but it detect less faces you can play with it to see how it works.

And this is another example, like you see detect many faces in a low resolution picture but have a lot of errors, in this image and this configurations only 1 face is not detected.

Complete code

Here is the complete code, like you see only takes 33 lines with white spaces, it is a really short program with powerfull applications.

import cv2
import sys

# Get user supplied values
imagePath = sys.argv[1]
cascPath = "haarcascade_frontalface_default.xml"

# Create the haar cascade
faceCascade = cv2.CascadeClassifier(cascPath)

# Read the image
image = cv2.imread(imagePath)
gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)

# Detect faces in the image
faces = faceCascade.detectMultiScale(
    gray,
    scaleFactor = 1.05,
    minNeighbors = 5,
    minSize = (30, 30),
    flags = cv2.CASCADE_SCALE_IMAGE
)

print("Found {0} faces!".format(len(faces)))

# Draw a rectangle around the faces
for (x, y, w, h) in faces:
    cv2.rectangle(image, (x, y), (x + w, y + h), (0, 255, 0), 2)

height, width, channels = image.shape
cv2.imshow("{0} Faces found".format(len(faces)), image)
cv2.waitKey(0)

Conclusion

For finish this post, like you see, if you use the actual solution the face detection you can develop a more detailed program like a doorbell or something like a cam in the traffic light to detect a face and maybe do a better
recognition of the person face.

Next to this you maybe try to do the same program but in a real video or wait for my next post to learn how to do it.

Back to University :) !!!

David Mendez Guardado — Tue, 09 Jul 2019 21:25:17 +0000

Hello to all i wrote this code using the book The Little Book of Algorithms by @MrLauLearning, and i remember my first code challenges in university that i felt in that moment a long and hard way, but now 7 years later, i now that was hard and a long way, but very interesting and funny way i took.

i'm getting back to check all the algorithms, i'm go to re-encounter with an amazing challenge and re-enforce my code i'll write.

REST API in NodeJS

David Mendez Guardado — Thu, 20 Jun 2019 16:59:18 +0000

Well!!, this is my first post here and now i'll show you how to create an API REST in NodeJS in a simple steps, we take about 30 min or less to create, if you have some knowledge about javascript it becomes easy to understand all the code.

Let's Start!!!
NOTE: I warning you that i'm beginner in NodeJS, i shared this with you because is a good entry into de API REST and NodeJS.

Create the Project

To start we need to create the NodeJS project, so you start creating a folder and then execute the following code in the terminal or cmd:

npm init
```



After you follow all the configuration steps by NodeJS next is install all the dependencies we need.



```
npm install body-parser --save
npm install cors --save
npm install express --save
npm install mysql --save
```



The 'CORS' dependency maybe you don't need to install but if you want to avoid some communication errors i recommend you install.

The 'MySQL' dependency, you can change for your preferred database.

### Files
We need to create a file called '**server.js**' and change in the '**package.json**' main property to this file name because there is set to '*index.js*'.

### Dependencies
We need to add the following dependencies to make work our API.

> **NOTE**: I use MySQL as database provider.
> **NOTE 2**: I create an API that make CRUD functions to the 'sakila' database in MySQL Server.



```
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mysql = require('mysql');
const cors = require('cors');
```



In this dependencies i add the 'cors' dependency because when i try to consume from Angular i have some problems to connect into the API.

### Initialization
Here we need to initialize some dependencies that i will use later in the API.

> **NOTE:** I suppose you'll have some knowledge about javascript, so i avoid the obvious parts about the code and explain the important things.



```
app.use(bodyParser.json());
app.use(cors());
app.use(bodyParser.urlencoded({
    extended: true
}));
```



### API  functions
Now will add all the API functions, in this point the users and the API will can communicate between each other.

#### Default Route


```
// default route
app.get('/', function(req, res) {
    return res.send({ error: true, message: 'hello' });
});
```



One thing to explain about this is i return a JSON object standardized in all the responses, because i think i have more control about the data the user gets.

> **NOTE:** the JSON is:

 ```{ error: true, data: data, [value1:value1,...] }```



This default route maybe if you need, the code becomes the token initialization or some message to check if the user connects and get data from the API correctly.

#### MySQL Configuration
Here you can change for you're preferred database.



```
// connection configurations
var dbConn = mysql.createConnection({
    host: 'localhost',
    user: 'admin',
    password: 'root',
    database: 'sakila'
});

// connect to database
dbConn.connect();
```



In the createConnection just add the login information for the database, and open the connection.

> **NOTE:** the database i use is sakila from the example data installed in MySQL server, and the table i work is staff.

#### Get User
This first entry point in our API i use to do a simple login in an Angular application i created for this API, and is not neccesary you add or maybe you have a better idea to do a user login, *in the comments put your solution fo this part*.



```
// Retrieve user with username 
app.get('/user/:username&:password', function(req, res) {
    const username = req.params.username;
    const password = req.params.password;
    if (!username) {
        return res.status(400).send({ error: true, message: 'Please provide username' });
    }
    dbConn.query('SELECT * FROM sakila.staff WHERE username="' + username + '" AND password="' + password + '";', function(error, results, fields) {
        if (error) throw error;
        if (results.length > 0) {
            return res.send({ error: false, data: results[0], username, password });
        } else {
            return res.send({ error: true, data: results[0], username, password });
        }
    });
});
```



Check in this code i use 'req.params.YOUR_PARAM' to get the parameter send in the API call, like you see is easy to get the data, one important thing is you can send in JSON format if you do a POST.

Here as you see is just a GET request, maybe is unsecure i would use a POST because i send a private data, but this is for learning and i want to show you how you have to pass some parameters in a GET request.

Like you see the connection to the database is simple like the query string and set the data i need.

#### Get all users
Now we add the entry point to get all the users in the database, check the following code:



```
// Retrieve all users 
app.get('/users/', function(req, res) {
    dbConn.query('SELECT * FROM sakila.staff', function(error, results, fields) {
        if (error) throw error;
        if (results.length > 0) {
            return res.send({ error: false, data: results });
        } else {
            return res.send({ error: true, data: results });
        }
    });
});
```



As you see is a simple select from all the table and all the data inside.

#### Get user by Id
This part is in case you need to get just one user instead of all.



```
// Retrieve user with id 
app.get('/user/:staff_id', function(req, res) {

    let user_id = req.params.staff_id;

    if (!user_id) {
        return res.status(400).send({ error: true, message: 'Please provide user_id' });
    }

    dbConn.query('SELECT * FROM sakila.staff where staff_id=?', user_id, function(error, results, fields) {
        if (error) throw error;
        if (results.length > 0) {
            return res.send({ error: false, data: results[0], user_id });
        } else {
            return res.send({ error: true, data: results[0], user_id });
        }
    });
});

```



Simple like that, i get a user with the id.

#### Add User
Here starts the magic because the previous code is just for get data but now we go to add a user.

here use the POST action in the HTTP call to send the private data more secure.

> **NOTE:** For more standardized and more maintainable API i will receive a JSON object with the user information and then insert directly the object into the database.



```
// Add a new user  
app.post('/add', function(req, res) {
    let user = req.body;
    console.log("add user");

    if (!user) {
        return res.status(400).send({ error: true, message: 'Please provide user' });
    }

    dbConn.query("INSERT INTO sakila.staff SET ? ", user, function(error, results, fields) {
        if (error) throw error;
        return res.send({ error: false, data: results, message: 'New user has been created successfully.' });
    });
});
```



Like you see in this part the most difficult to understand is the insert, because we add the complete object into de database, but like you see works correctly and is more easy to maintain this code and solve issues.

> **NOTE:** In this part i can't check in other database if works like MySQL sending a complete object.

#### Update User
As you see in the previous code in this is maybe the same thing, but we use the PUT action in the HTTP call instead of the POST action.



```
//  Update user with id
app.put('/update', function(req, res) {
    let user = req.body;

    if (!user.staff_id || !user) {
        return res.status(400).send({ error: user, message: 'Please provide user and user_id' });
    }

    dbConn.query("UPDATE sakila.staff SET ? WHERE staff_id = ?", [user, user.staff_id],
        function(error, results, fields) {
            if (error) throw error;
            return res.send({ error: false, data: results, message: 'user has been updated successfully.' });
        });
});
```



#### Delete user
Now add the code for delete a user using the DELETE action in the HTTP call.



```
//  Delete user
app.delete('/delete/:staff_id', function(req, res) {

    let user_id = req.params.staff_id;

    if (!user_id) {
        return res.status(400).send({ error: true, message: 'Please provide user_id' });
    }
    dbConn.query('DELETE FROM sakila.staff WHERE staff_id = ?', [user_id], function(error, results, fields) {
        if (error) throw error;
        return res.send({ error: false, data: results, message: 'User has been updated successfully.' });
    });
});
```



Now all the CRUD actions are complete.


### Finishing the file
Now to finish our API server file just need to add at the end of the file the following code:



```
// set port
app.listen(3000, function() {
    console.log('Node app is running on port 3000');
});

module.exports = app;
```



In this part just add the port and some log in the console to get notice that all works correctly.

At this point all the API is complete and now you can run with the following code:



```
npm start
```



Now you can use your own webpage or something software to make API calls, you should see all the data running and in your database the data modified.

## Conclusion
Now you have a complete API REST functionallity to use in all your projects, now your homework is to make secure the API using token authentication and make some improvements or adapt the code for you need.

I enjoy to make my first post here and start my dream help the people to enter into this wonderful path.