How to Implement Invisible CAPTCHA on Angular

Prerequisites

First, you should get your Captcha ID and Captcha Div ID
Please visit for more information: Displaying Lemin CAPTCHA

Installation

Install captcha wrapper with npm:

npm i @leminnow/ng-lemin-cropped-captcha

Also, you can install captcha wrapper with yarn:

yarn add @leminnow/ng-lemin-cropped-captcha

Integration

Import LeminCroppedCaptchaModule on your module.ts:

import { LeminCroppedCaptchaModule } from "@leminnow/ng-lemin-cropped-captcha";

@NgModule({
  imports: [
    LeminCroppedCaptchaModule
  ],
})
export class AppModule {}

Use LeminCroppedCaptcha component in your View:

Lemin Captcha must be placed inside of a “form” element.

<form>
  <lemin-cropped-captcha
    containerId="..." // your captcha div id
    captchaId="CROPPED_..." // your captcha id
  ></lemin-cropped-captcha>
</form>

This component prepares the lemin captcha and marks where the captcha will appear if necessary.

Please ensure that your captcha-div-id is the same as the captcha-div-id you've set before. If you set a captcha-div-id for your Lemin Captcha in the advanced settings, this div must have that same captcha-div-id. (default: "lemin-cropped-captcha")

Usage Examples

Automatically bind the challenge to a button

Please ensure you set the id field of your form submit element to "leminSubmitButton"

If this method is not suitable for you, consider using the programmatically invoke the challenge method.

Using with component ref:

<form (ngSubmit)="onSubmit()">
  <lemin-cropped-captcha
    containerId="..."
    captchaId="CROPPED_..."
  ></lemin-cropped-captcha>

  <button id="leminSubmitButton" class="btn btn-primary" type="submit">
    Submit
  </button>
</form>

import { LeminCroppedCaptchaComponent } from "@leminnow/ng-lemin-cropped-captcha";

@Component({
  selector: "app-root",
  templateUrl: "./src/app.component.html",
  styleUrls: ["./src/app.component.css"],
})
export class AppComponent {
  @ViewChild(LeminCroppedCaptchaComponent) leminCroppedCaptcha!: LeminCroppedCaptchaComponent;

  onSubmit() {
    const captchaValues = this.leminCroppedCaptcha.getCaptchaValue();

    const isCaptchaValid = captchaValues.answer && captchaValues.challenge_id;

    if (isCaptchaValid) {
      //execute your method
    }
  }
}

Programmatically invoke the challenge

To use this feature, you need to have a version of the @leminnow/ng-lemin-cropped-captcha package that is greater or equal than 0.3.0.

If you use programmatically invoke challenge method, make sure that your submit button id is NOT as "leminSubmitButton"

If you wish to have more control over when Invisible CAPTCHA runs, you can use the execute method in leminCroppedCaptcha object.

import { LeminCroppedCaptchaComponent } from "@leminnow/ng-lemin-cropped-captcha";

@Component({
  selector: "app-root",
  templateUrl: "./src/app.component.html",
  styleUrls: ["./src/app.component.css"],
})
export class AppComponent {
  @ViewChild(LeminCroppedCaptchaComponent) leminCroppedCaptcha!: LeminCroppedCaptchaComponent;

  async onYourHandler() {

    this.leminCroppedCaptcha.execute().then(async ({ answer, challenge_id }) => {
      const isCaptchaValid = answer && challenge_id;

      if (isCaptchaValid) {
        //execute your method
      }
    });
  }
}