Angular CAPTCHA Integration

Create a user account or log in with an existing one. Then create a new CAPTCHA or pick an existing one. If you want to try TrustCaptcha first, every plan comes with a 14-day free trial.

The CAPTCHA overview page shows your site key and license key, and you create your API key there. Add your website’s domains to the authorized domains in the CAPTCHA security rules so they can use your CAPTCHA.

The following steps show roughly how to add the TrustCaptcha widget to an Angular frontend. For the full instructions, read the CAPTCHA integration guide for Angular in our documentation.

First, install our TrustCaptcha Angular package:

npm i @trustcomponent/trustcaptcha-angular

Then add the CAPTCHA widget, the trustcaptcha-component HTML tag, to any HTML form:

import {Component} from '@angular/core';
import {TrustcaptchaComponent} from '@trustcomponent/trustcaptcha-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TrustcaptchaComponent],
  template: `
    <form>
      <!-- your input fields -->
      <trustcaptcha-component
        sitekey="<your_site_key>"
        (captchaSolved)="solved($event)"
        (captchaFailed)="failed($event)"
      ></trustcaptcha-component>
      <!-- further input fields / submit button -->
    </form>
  `,
})
export class AppComponent {

  solved(event: Event): void {
    const verificationToken = (event as CustomEvent).detail;
    // handle success
  }

  failed(event: Event): void {
    const errorMessage = (event as CustomEvent).detail;
    // handle error
  }
}

The CAPTCHA widget will now be displayed on your Angular website:

Need detailed information about the Angular CAPTCHA integration?
Our Angular CAPTCHA integration guide has the detailed instructions, and our CAPTCHA samples repository on GitHub has a complete integration example.

Other frontend technology instead of Angular?
If you build with something other than Angular, or run several websites and apps, pick a different framework or platform here. If we have no pre-built integration for your frontend technology yet, your developers can integrate the CAPTCHA themselves using our documentation or ask our support team for a pre-built integration.

When the CAPTCHA is complete, send the verification token to your backend. There, fetch the verification result from our servers and check it. How you proceed depends on the bot risk. You can find details on backend integration and result validation in our documentation.

Pre-built backend integrations
Our pre-built integrations add the CAPTCHA validation to your backend service. If there is none for your backend technology yet, your developers can integrate the validation themselves using our documentation or ask our support team for a pre-built integration.

TrustCaptcha is now active. Send a test request and check that it goes through.