AES Encryption/Decryption With Angular 7

Most of the time, a developer requires encryption and decryption for encoding a message or information in such a way that only authorized person can retrieve that information. 

In this article, I will discuss the implementation of AES encryption and decryption with Angular 7 while developing an application.

So, the first question that comes in our mind is "What is AES?".

• AES stands for "Advanced Encryption Standard".
• It is a tool that is used to encrypt and decrypt the simple text using AES encryption algorithm.
• This algorithm was developed by two Belgian cryptographers, Joan Daemen and Vincent Rijmen.
• AES was designed to be efficient in both, hardware and software, and supports a block length of 128 bits and key lengths of 128, 192, and 256 bits.

When to use AES Encryption

• When you want to encrypt a confidential text into a decryptable format, for example - when you need to send some sensitive data in an e-mail.
• The decryption of the encrypted text is possible only if you know the right password.

Now, try to implement the AES encryption and decryption in Angular 7. It's very easy to implement in Angular 7 with the help of crypto-js.

First, we create a new project with the following command.

ng new EncryptionDescryptionSample

After that, install crypto.js file, by the following command.

npm install crypto-js --save

For better UI, we also install bootstrap by the following command.

npm install bootstrap --save

After running the above command, check the package.json file if it is installed or not. Your file should look like this.

 

 

Now, go to "app.component.html" file and replace the existing code with the below code.

<h1 class="text-center">Encrypt-Decrypt with AES</h1>

<br>
<div>
  <div class="row">
    <div class="col-sm-6">
      <button type="button" class="btn btn-primary btn-lg btn-block">
        Encryption
      </button>
      <br>
      <div class="form-group">
        <label for="txtTextToConvert">Plain Text</label>
        <input type="text" class="form-control" placeholder="Enter text you want to encrypt" [(ngModel)]="plainText">
      </div>

      <div class="form-group">
        <label for="txtPassword">Password</label>
        <input type="password" class="form-control" placeholder="Enter encryption password" [(ngModel)]="encPassword">
      </div>
      <textarea class="form-control" readonly rows="3">{{conversionEncryptOutput}}</textarea>
      <br>
      <button type="button" class="btn btn-success float-right" (click)="convertText('encrypt')">Encrypt</button>
    </div>
    <div class="col-sm-6">
      <button type="button" class="btn btn-dark btn-lg btn-block">
        Decryption
      </button>
      <br>
      <div class="form-group">
        <label for="txtTextToConvert">Encrypted Text</label>
        <input type="text" class="form-control" placeholder="Enter text you want to decrypt" [(ngModel)]="encryptText">
      </div>

      <div class="form-group">
        <label for="txtPassword">Password</label>
        <input type="password" class="form-control" placeholder="Enter decryption password" [(ngModel)]="decPassword">
      </div>
      <textarea class="form-control" readonly rows="3">{{conversionDecryptOutput}}</textarea>
      <br>
      <button type="button" class="btn btn-success float-right" (click)="convertText('decrypt')">Decrypt</button>
    </div>
  </div>
</div>

Now, visit "app.component.ts" file and write the below code,

import { Component } from '@angular/core';
import * as CryptoJS from 'crypto-js';

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

  plainText:string;
  encryptText: string;
  encPassword: string;
  decPassword:string;
  conversionEncryptOutput: string;
  conversionDecryptOutput:string;

  constructor() {
  }
  //method is used to encrypt and decrypt the text
  convertText(conversion:string) {
      if (conversion=="encrypt") {
        this.conversionEncryptOutput = CryptoJS.AES.encrypt(this.plainText.trim(), this.encPassword.trim()).toString();
      }
      else {
        this.conversionDecryptOutput = CryptoJS.AES.decrypt(this.encryptText.trim(), this.decPassword.trim()).toString(CryptoJS.enc.Utf8);

    }
  }
}

In the above code, we used the Encrypt method of AES and passed our plain text with a password to encrypt the string. Similarly, we used the Decrypt method of AES and passed our encrypted text with a password to decrypt the string. Be sure that both times, your password is the same. For using both of these methods, you need to import "CryptoJS" from crypto-js.

import * as CryptoJS from 'crypto-js';

Now, let us run the project by using the following command.

ng serve --o

Here is the output.

 

 

Conclusion

 

Now, we have learned what AES encryption and decryption are and how we can implement this feature with Angular. For practice purposes, the sample project called “EncryptionDecryptionSample” is attached which covers all the pieces of code mentioned in this article. We can download and modify this as per our different requirements. 

 

All the queries related to this article and sample project are always welcome. Thanks for reading.