Asymmetric cryptography using Angular 9 and Asp.net Web Api

Introduction

Nothing better than to learn something new during our free time. A new programming language, why not. Thus to make my mind busy as a geek i tried to learn Angular 9 and create a small application nothing fancy at all and called it Asymmetric cryptography. In simple words using Angular 9 to create the client side application and hooked it up with an ASP.NET web api. To conclude i deployed the application on Microsoft azure.

How it works

Key generation

Asymmetric cryptography uses 2 key pairs to encryption and decryption data. The 2 keys consist of a private key and a public key. To produce a cipher text (encryption), the public key alongside with the plain text will be used. In the same way, in order to produce a plain text (decryption) the cipher text will be used with the private key.

The images below illustrate how asymmetric cryptography works:

To use the application first select the key length namely:

• 512 bit
• 1024 bit
• 2048 bit
• 4096 bit

Click on generate to generate a new key pairs. To copy those keys simply click on the button on the right of each key.

Encryption

1. Use the public key previously generated
2. enter a plain text that you want to encrypt
3. Click on the encryption button
4. The cipher text will be generated using the public key and plaint text
5. Snack bar to indicate if the process was successful

Decryption

1. Select the decrypt tab
2. Enter the private key generated in previously
3. Enter the cipher text which was generated previously also. 
4. Click on decrypt button
5. Using the private key to revert the cipher text to the origin plain text 

Source code

Client side 

Generate keys

 ngOnInit(): void {
    var retrievedObject = localStorage.getItem(this.sLocalObjectName);
    var jsonObject = JSON.parse(retrievedObject);
    if(jsonObject.token_private != ""){
      this.sPrivateKey = jsonObject.token_private
    }
    if(jsonObject.token_public != ""){
      this.sPublicKey = jsonObject.token_public
    }
  }
 
  // Click events
  GenerateKeyClick(){
 
    if(this.sSelectBitType == '-1'){
      this.DisplaySnackBar("Please select key mode")
      return
    }
   
    // fetch from api
    this._apiService.GenerateKey(Number(this.sSelectBitType)).subscribe(
      (response) => {                           
        console.log(response)
        this.sPrivateKey = response.PrivateKey
        this.sPublicKey = response.PublicKey
        
        var slocalObject = {'token_private': response.PrivateKey, 'token_public': response.PublicKey}
        localStorage.setItem(this.sLocalObjectName, JSON.stringify(slocalObject))
 
        this.DisplaySnackBar("Keys generated")
      },
      (error) => {                              
        console.error(error)
        this.DisplaySnackBar("Fail to generate asymmetric keys")
      }
    )
    
  }
 
  // Private funtions
  DisplaySnackBar(message:string){
    this._snackBar.open(message, "Ok", {
      duration: 2000,
    });
  }

KeyGeneration - Snippet hosted by

RAW

Encryption and decryption

EncryptClick(){
    if(this.sEncryptPlainText == ""){
      this.DisplaySnackBar("Invalid plaintext")
    }
 
    if(this.sEncryptPublicKey == ""){
      this.DisplaySnackBar("Invalid public key")
    }
 
    this._apiService.Encrypt(this.sEncryptPublicKey, this.sEncryptPlainText).subscribe(
      (response) => {                           
        console.log(response)
        this.DisplaySnackBar("Encryption successfull")
        this.sEncryptCiphertext = response
      },
      (error) => {                              
        console.error(error)
        this.DisplaySnackBar("Fail to Encrypt data")
      }
    )
 
  }
 
  DecryptClick(){
    if(this.sDecryptCiphertext == ""){
      this.DisplaySnackBar("Invalid ciphertext")
    }
 
    if(this.sDecryptPrivateKey == ""){
      this.DisplaySnackBar("Invalid private key")
    }
 
    this._apiService.Decrypt(this.sDecryptPrivateKey, this.sDecryptCiphertext).subscribe(
      (response) => {                           
        console.log(response)
        this.DisplaySnackBar("Decryption successfull")
        this.sDecryptPlainText = response
      },
      (error) => {                              
        console.error(error)
        this.DisplaySnackBar("Fail to decrypt data")
      }
    )
  }
 
  // Private funtions
  DisplaySnackBar(message:string){
    this._snackBar.open(message, "Ok", {
      duration: 2000,
    });
  }

EncryptionDecryption - Snippet hosted by

RAW

Links

Client side source code:  https://github.com/kaveer/AsymetricCryptogrsphy.git

Api source code: https://github.com/kaveer/AsymetricCryptographyApi.git

Application link on Azure: https://aymmetric.azurewebsites.net/

Buy me a coffee: https://www.paypal.com/paypalme2/Rajcoomar