Two Factor Google Authenticator Using ASP.NET Core And Angular

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-two-factor-authenticator',
  templateUrl: './two-factor-authenticator.component.html',
  styleUrls: ['./two-factor-authenticator.component.css']
})
export class TwoFactorAuthenticatorComponent {
  email: string;
  secretKey: string;
  qrCode: string;
  twoFactorCode: string;
  constructor(private http: HttpClient) { }
  generateSecretKey() {
    this.http.get('/api/twofactorauthenticator/generatesecretkey').subscribe((result: any) => {
      this.secretKey = result;
      this.qrCode = 'https://chart.googleapis.com/chart?chs=300x300&chld=M|0&cht=qr&chl=' + encodeURIComponent(result);
    });
  }
  validateTwoFactorCode() {
    this.http.post('/api/twofactorauthenticator/validatetwofactorcode', { secretKey: this.secretKey, twoFactorCode: this.twoFactorCode }).subscribe((result: any) => {
      if (result) {
        alert('Valid code!');
      } else {
        alert('Invalid code!');
      }
    });
  }
}

Step 4. In the Angular application, create a template for the "TwoFactorAuthenticatorComponent" component and add the following code.

<div>
  <label>Email:</label>
  <input type="text" [(ngModel)]="email">
</div>
<div>
  <button (click)="generateSecretKey()">Generate Secret Key</button>
</div>
<div *ngIf="secretKey">
  <img [src]="qrCode">
  <p>Secret Key: {{ secretKey }}</p>
</div>
<div>
  <label>Two Factor Code:</label>
  <input type="text" [(ngModel)]="twoFactorCode">
  <button (click)="validateTwoFactorCode()">Validate Two Factor Code</button>
</div>

Step 5. In the Asp Net Core application, create a controller named "TwoFactorAuthenticatorController" and add the following code.

using Microsoft.AspNetCore.Mvc;
using QRCoder;
using System;
using System.Drawing;
using TwoFactorAuthenticator;
namespace YourNamespace.Controllers
{
    public class TwoFactorAuthenticatorController : Controller
    {
        // Action method to generate the QR code for the user to scan and set up their Two-Factor Authentication
        public IActionResult GenerateQRCode()
        {
            // Generate the Two-Factor Authentication secret key
            var secretKey = new Base32Encoder().Encode(Encoding.ASCII.GetBytes(Guid.NewGuid().ToString().Replace("-", "").Substring(0, 10)));           
            // Generate the QR code for the user to scan
            var qrCodeGenerator = new QRCodeGenerator();
            var qrCodeData = qrCodeGenerator.CreateQrCode($"otpauth://totp/YourAppName:YourUserName?secret={secretKey}&issuer=YourAppName", QRCodeGenerator.ECCLevel.Q);
            var qrCode = new QRCode(qrCodeData);
            var qrCodeImage = qrCode.GetGraphic(20);

            // Return the QR code image to the user
            return File(qrCodeImage, "image/png");
        }
        // Action method to verify the user's Two-Factor Authentication code
        [HttpPost]
        public IActionResult VerifyCode(string code)
        {
            // Get the user's Two-Factor Authentication secret key from the database or other storage location
            var secretKey = "yourSecretKey";
            // Verify the One-Time Password (OTP) entered by the user
            var tfa = new TwoFactorAuthenticator();
            var result = tfa.ValidateTwoFactorPIN(secretKey, code);
            // If the OTP is valid, redirect the user to their account or other authorized page
            if (result)
            {
                return RedirectToAction("Index", "Home");
            }
            else
            {
                // If the OTP is invalid, return an error message to the user
                ModelState.AddModelError("code", "The code entered is invalid.");
                return View();
            }
        }
    }
}

Summary

This article discusses the implementation of a 2-Factor Google Authenticator using ASP Net Core and Angular in detail.