Angular RSA Encryption - .NetCore WebApi Decryption (Public/Private Key Cryptography)

Angular RSA Encryption .NetCore Decryption

RSA encryption?!

Private, public keys? Let’s think about a door in a house. The door is the color red, that way we are all on the same page with the door color 😁. A door with a weird lock 🔐. A door that can only be locked with one key and can only be unlocked by a different key. Dumb down a lot- That is the same rules/principles that is being used with RSA encryption. Please read the wiki page for a full explanation

RSA algorithm

In this post we are going to use this encryption type (RSA) to encrypt data to look like this->

{userName: “Pieter@email.com”, password: “ThisIsAPassword”}

{“userName”:”JPvuJybOyhkYGZWikp9VVjjBXYOhyutPK3/UAKJI6h89mAxtf2DdBwSUlLyJerPi/iAs7eE8TdHXCVu0P0qIly5L+GwsDo4zIfceV4cM1Zvf8LE+eUqur0/pLvWDTorVapy6afTqq0bHDHPcwrMn+JO9G5Gn4HPdnEG3Ctcg9g0=”,”password”:”ScJYknMSSrog/qZVrkL3AHaYLLK03BfhF26ookZFFHxNTDfNKk2bSLy5fnhsjmIJ2fMuZ0ACDl/B6uxC3uQcXvWwB8w7bxDdFctIfNvkhVvImjyiKBnJSNe2+Fy6mrP43d39o17hxN14XUE5CRbOoI1fnzdypp0FTTDH1iNbGx8=”}

{“data”:”PyUD0znSNZ+hT2CmT+YDiyDF8N7qG/AHn9XlkGnBA+QkcKpXRk5WagMNSFigFxxgvVb5ZJJQ/j1PtFicwtBDb+/eIsUNV815zBV2tQkO8l6mC2wrBUt5UsX0br0RAl+39cuJSnzFz1qhaqw7xWlDhuldBD4tW4MdEXtU2yQa5qM=”}

Public and Private Key’s

The first thing we need to do is create a public and private key.

For this example, I am just going to create a plain and simple key using this awesome online tool:

Online RSA Key Generator

Once you made a copy of the two key’s and saved it somewhere securely, we can now start and do some coding.

Angular Setup

If you are reading this, you already have or know how to setup a angular project 😁 (Or please find the source code link at the bottom of the page)

NPM Packages you need

npm install node-forge
npm install @types/node-forge

RSA Helper

ONLY the public key should be in the source code of the angular application. If both private and public keys are on the same code/application you have missed the mark.

For this example I am just going to add the public key as a string in my service (On the dotnet part, I will create a .pem file):

publicKey: string = `-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCEKfugJmnCR4hvQdF59dOUKyW/
5TpNcN1p2dNqtDbEYM9od3/K0MmnN4wk5IGnkaejT1BISRjAIQ7LVUorr/c0UoPQ
AWdAXsX12DYxZIpaAQ/J+GMOHXNTcT3bWmZuZXUoR+usP1rlwYwlsimuPmdCXpNn
IZGLTEVLs5rFeafNbQIDAQAB
-----END PUBLIC KEY-----`;

Next we are going to use the Forge Package and the public key to encrypt our string value:

const rsa = Forge.pki.publicKeyFromPem(this.publicKey);
return btoa(rsa.encrypt(valueToEncrypt.toString()));

Full RSA Helper

HTTP Request

Basic Login

This does no encryption

Encrypted Login

This encrypts the username and the password

Encrypted Login (A bit more secure)

Converts the user object to json and then encrypts the json

.NetCore Setup (WebApi)

If you are reading this, you already have or know how to setup a WebApi project 😁 (Or please find the source code link at the bottom of the page)

NuGet Packages you need

RSA Helper

ONLY the private key should be in the source code of the WebApi application. If both private and public keys are on the same code/application you have missed the mark.

Save your Private key into a .pem file -> past the private key into the .pem file

Create a IRSAHelper Interface:

Create the RSAHelper:

*Remember to inject your helper class

HTTP Request

Create a UserController and inject the RSA Helper

Basic Login

Encrypted Login

Encrypted Login (A bit more secure)

Summary

If this helped you in any way or you just think this is cool, give it a 👍!

Pieter Linde - Software Developer - iOCO | LinkedIn

Git Repo

Angular Git Repo ->

https://github.com/pieterdlinde/Angular-RSA

.NetCore Web Api Git Repo ->

https://github.com/pieterdlinde/DotNet-AES-RSA