How To Add Mathematics Captcha In Angular

CAPTCHA stands for the completely automated public turing test to tell computers and humans apart. it helps you to protect from spam and password decryption by asking you to complete a simple test that proves you are human and not a computer trying to break into a password protected account.this tests are easy to slove for human.

Here is the source code for generating a captcha in angular project.you needs to install following npm in your project :

• npm i @binssoft/ngx-captcha

In app.module.ts

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {NgxCaptchaModule} from  '@binssoft/ngx-captcha';

 @NgModule({ declarations: [AppComponent],
 imports: [ BrowserAnimationsModule, BrowserModule, NgxCaptchaModule], 
 providers: [], bootstrap: [AppComponent] })

In app.component.ts

import { Component } from '@angular/core';
import { NgxCaptchaService } from '@binssoft/ngx-captcha';

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

  captchaConfig: any = {
    type: 2,
    length: 6,
    cssClass: 'custom',
    back: {
      stroke: "#2F9688",
      solid: "#f2efd2"
    },
    font: {
      color: "#000000",
      size: "35px"
    }
  };

  constructor(private captchaService: NgxCaptchaService) {
    this.captchaService.captchStatus.subscribe((status) => {
      this.captchaStatus = status;
      if (status == false) {
        alert("Opps!\nCaptcha mismatch")
      } else if (status == true) {
        alert("Success!\nYou are right")
      }
    });
  }

}

In app.component.html

<ngx-captcha [config]="captchaConfig"></ngx-captcha>

Output :