@captchafox/angular

@captchafox/angular

Installation

Install the library using your prefered package manager

npm install @captchafox/angular

yarn add @captchafox/angular

pnpm add @captchafox/angular

bun add @captchafox/angular

Usage

First, add the CaptchaFoxModule to your apps imports and initialize it.

You can choose between using a global config for the whole app or specifing the config manually on each component.

import { CaptchaFoxModule } from '@captchafox/angular';

@NgModule({
  imports: [
    CaptchaFoxModule.forRoot({
      siteKey: '<YOUR_SITEKEY>'
    })
  ]
})
export class AppModule {}

Then you can use the ngx-captchafox component inside your template:

<ngx-captchafox
  (verify)="onVerify($event)"
  (error)="onError($event)"
  (expire)="onExpire($event)"
></ngx-captchafox>

Inputs

Name	Type	Description
siteKey	string	The site key for the widget
lang	string	The language the widget should display. Defaults to automatically detecting it.
mode	inline|popup|hidden	The mode the widget should be displayed in .
theme	light | dark | ThemeDefinition	The theme of the widget. Defaults to light.

Outputs

Name	Type	Description
verify	function	Called with the response token after successful verification.
fail	function	Called after unsuccessful verification.
error	function	Called when an error occured.
expire	function	Called when the challenge expires.
close	function	Called when the challenge was closed.
load	function	Called when the widget is ready

Using the verify event

<ngx-captchafox (verify)="onVerify($event)"></ngx-captchafox>

@Component({...})
export class YourComponent {
  onVerify(token: string) {
    // verify the token on the server / submit your form with it
  }
}

Using reactive forms

<form [formGroup]="yourForm" (ngSubmit)="onSubmit()">
  <ngx-captchafox formControlName="captchaToken" />
  ...
</form>

@Component({...})
export class YourComponent {
    public yourForm = new FormGroup({
        captchaToken: new FormControl(null, Validators.required),
        ...
    });

    public onSubmit() {
        // send an API request to your server using the form values
        console.log(this.yourForm.value.captchaToken);
        this.loginForm.reset();
    }
}

You can find more detailed examples in the GitHub repository.