Angular component for Cloudflare Turnstile
npm install ngx-turnstileAn easy to use component for implementing Cloudflare Turnstile in Angular.
Add this library to your Angular project using npm or yarn.
``bash`
yarn add ngx-turnstile
npm install ngx-turnstile --save
To start, import the TurnstileModule in your app module.
`typescript
// app.module.ts
import { TurnstileModule } from "ngx-turnstile";
import { BrowserModule } from "@angular/platform-browser";
import { MyApp } from "./app.component.ts";
@NgModule({
bootstrap: [MyApp],
declarations: [MyApp],
imports: [BrowserModule, TurnstileModule],
})
export class MyAppModule {}
`
After that, you are free to use the component anywhere:
`typescript
// app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
template: ,Resolved captcha with response: ${captchaResponse}
})
export class MyApp {
sendCaptchaResponse(captchaResponse: string) {
console.log();`
}
}
The component supports these options as input:
- siteKeyaction
- cData
- theme
- tabIndex
-
These options are well documented in the Cloudflare Docs. The letter cases are adapted to camelCase to facilitate easy migration from ng-recaptcha.
- resolved(response: string). Occurs when the CAPTCHA resolution value changed.
For those who prefer examples over documentation, simply clone the repository and run
`bash``
$ yarn install
$ ng build ngx-turnstile
$ ng serve ngx-turnstile-demo