
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
@captchafox/angular
Advanced tools
[](https://www.npmjs.com/package/@captchafox/angular)
Install the library using your prefered package manager
npm install @captchafox/angular
yarn add @captchafox/angular
pnpm add @captchafox/angular
bun add @captchafox/angular
Add the CaptchaFoxModule
to your app's 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 {}
In an application that uses standalone components, the setup is different.
First, add provideCaptchaFox
to providers
in your app.config.ts
and initialize it.
You can choose between using a global config for the whole app or specifing the config manually on each component.
import { provideCaptchaFox } from '@captchafox/angular';
export const appConfig: ApplicationConfig = {
providers: [
provideCaptchaFox({ siteKey: '<YOUR_SITEKEY>' }),
],
};
Then, import the CaptchaFoxModule in your component.
import { CaptchaFoxModule } from '@captchafox/angular';
@Component({
selector: 'example',
standalone: true,
imports: [CommonModule, CaptchaFoxModule],
...
})
export class ExampleComponent {
}
After the setup, you can use the ngx-captchafox
component inside your template:
<ngx-captchafox
(verify)="onVerify($event)"
(error)="onError($event)"
(expire)="onExpire($event)"
></ngx-captchafox>
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. |
nonce | string | Randomly generated nonce. |
i18n | object | Custom i18n configuration. |
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. |
<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
}
}
<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.
FAQs
[](https://www.npmjs.com/package/@captchafox/angular)
The npm package @captchafox/angular receives a total of 11 weekly downloads. As such, @captchafox/angular popularity was classified as not popular.
We found that @captchafox/angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.