Captcha

Angular Bootstrap 5 Captcha plugin

Captcha is a form validation component based on Recaptcha. It protects you against spam and other types of automated abuse.
Official documentation.

Note: Read the API tab to find all available options and advanced customization

Basic example

Note: You need to include Google API script in your project in order to Captcha to work. 

        
            
          <script src="https://www.google.com/recaptcha/api.js"></script>       
          <mdb-captcha
          [sitekey]="'YOUR_SITEKEY'"
          ></mdb-captcha>

Dark theme example

You can use dark theme by adding [theme]="'dark'" input.

        
            
        <script src="https://www.google.com/recaptcha/api.js"></script>       
        <mdb-captcha
          [sitekey]="'YOUR_SITEKEY'"
          [theme]="'dark'"
        ></mdb-captcha>

Captcha - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

        
            
     npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/captcha

Import

        
            
          import { MdbCaptchaModule } from 'mdb-angular-captcha';
          …
          @NgModule ({
            ...
            imports: [MdbCaptchaModule],
            ...
          })

Inputs

Name Type Values Default Description
sitekey String - null Required. Defines your sitekey.
theme String light
dark 		light Optional. Defines theme for Captcha.
size String normal
compact 		normal Optional. Defines the size of the widget.
tabindex Number - 0 Optional. Defines the tabindex of the widget and chellenge. If other elements in your page use tabindex, it should be set to make user navigation easier.
lang String "pl", "en", "es" etc. en Optional. Defines the language of the widget.

Outputs

Name Type Description
captchaExpire EventEmitter<void> Emmited when CAPTCHA response expires and the user needs to solve a new CAPTCHA.
captchaError EventEmitter<void> Emmited when CAPTCHA encounters an error.
captchaSuccess EventEmitter<string> Emmited when user submits a successful CAPTCHA response. 
        
            
            <mdb-captcha
            (captchaSuccess)="onSuccess($event)"
            [sitekey]="'YOUR_SITEKEY'"
          ></mdb-captcha>                             
            
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              onSuccess(response: string): void {
                console.log('success solving captcha', response);
              }
            }

Methods

Name Description Example
getResponse Returns the Captcha response key. captcha.getResponse()
reset Resets the Captcha plugin. captcha.reset() 
        
            
          <mdb-captcha #captcha [sitekey]="'YOUR_SITEKEY'"></mdb-captcha>
          <button class="btn btn-primary" (click)="getResponseFromCaptcha()">
            Get Response
          </button>
          <button class="btn btn-primary" (click)="resetCaptcha()">Reset</button>                   
          
        
    
        
            
          import { Component, ViewChild } from '@angular/core';
          import { MdbCaptchaComponent } from 'mdb-angular-captcha';
          
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            @ViewChild('captcha') captcha!: MdbCaptchaComponent;
          
            resetCaptcha(): void {
              this.captcha.reset();
            }
            getResponseFromCaptcha(): string | null {
              const response = this.captcha.getResponse();
              console.log('captcha response: ', response);
              return response;
            }
          }