Angular | CAPTCHACAT

Integration guide for Angular applications.

Full Example

See the complete working example on GitHub: Captchacat-Integrations/Angular

Installation#

npm install @captchacat/angular

Usage#

Standalone Component (Recommended)

app.component.ts

import { Component, signal } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CaptchacatComponent } from "@captchacat/angular";
 
@Component({
  selector: "app-root",
  standalone: true,
  imports: [FormsModule, CaptchacatComponent],
  template: `
    <form (ngSubmit)="handleSubmit()">
      <input [(ngModel)]="username" name="username" type="text" placeholder="Username" />
      <input [(ngModel)]="password" name="password" type="password" placeholder="Password" />
 
      <captchacat [siteKey]="'YOUR_SITE_KEY'" (verified)="handleVerify($event)" />
 
      <button type="submit" [disabled]="!isVerified()">Login</button>
    </form>
  `,
})
export class AppComponent {
  username = "";
  password = "";
  token = "";
  isVerified = signal(false);
 
  handleVerify(token: string) {
    this.token = token;
    this.isVerified.set(true);
  }
 
  async handleSubmit() {
    // Send token to your server for validation
  }
}

With NgModule

app.module.ts

import { NgModule } from "@angular/core";
import { CaptchacatModule } from "@captchacat/angular";
 
@NgModule({
  imports: [CaptchacatModule],
})
export class AppModule {}

Inputs#

Input	Type	Required	Description
`siteKey`	`string`	Yes	Your Captchacat site key

Outputs#

Output	Type	Description
`verified`	`EventEmitter<string>`	Emits token when verification succeeds

Server Validation#

server/validate.ts

import { validateCaptchacatToken } from "@captchacat/angular";
 
async function validateCaptcha(token: string) {
  const result = await validateCaptchacatToken({
    apiKey: process.env.CAPTCHACAT_API_KEY!,
    token,
  });
 
  if (!result.valid) {
    throw new Error("Captcha validation failed");
  }
 
  // Captcha valid - proceed with request
}

Or using NestJS:

server/submit.controller.ts (NestJS)

import { Controller, Post, Body, HttpException, HttpStatus } from "@nestjs/common";
import { validateCaptchacatToken } from "@captchacat/angular";
 
@Controller("api")
export class SubmitController {
  @Post("submit")
  async submit(@Body() body: { username: string; password: string; token: string }) {
    const result = await validateCaptchacatToken({
      apiKey: process.env.CAPTCHACAT_API_KEY!,
      token: body.token,
    });
 
    if (!result.valid) {
      throw new HttpException("Captcha verification failed", HttpStatus.BAD_REQUEST);
    }
 
    // Process the login
    return { success: true };
  }
}