Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/verto-health/ngx-turnstile
Cloudflare Turnstile for Angular
https://github.com/verto-health/ngx-turnstile
angular captcha cloudflare cloudflare-turnstile hacktoberfest turnstile
Last synced: 8 days ago
JSON representation
Cloudflare Turnstile for Angular
- Host: GitHub
- URL: https://github.com/verto-health/ngx-turnstile
- Owner: verto-health
- License: mit
- Created: 2022-10-13T21:29:47.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-24T21:57:05.000Z (7 months ago)
- Last Synced: 2024-04-25T21:01:45.837Z (7 months ago)
- Topics: angular, captcha, cloudflare, cloudflare-turnstile, hacktoberfest, turnstile
- Language: TypeScript
- Homepage: https://ngx-turnstile.pages.dev/
- Size: 551 KB
- Stars: 48
- Watchers: 5
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-angular - ngx-turnstile - Cloudflare Turnstile for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-turnstile - Cloudflare Turnstile for Angular. (Table of contents / Third Party Components)
README
# Cloudflare Turnstile Component for Angular
## ngx-turnstile
An easy to use component for implementing [Cloudflare Turnstile](https://blog.cloudflare.com/turnstile-private-captcha-alternative/) in Angular.
## Installation
Add this library to your Angular project using npm or yarn.
```bash
yarn add ngx-turnstile
npm install ngx-turnstile --save
```## Quickstart
To start, import the NgxTurnstileModule in your app module.
```typescript
// app.module.ts
import { NgxTurnstileModule } from "ngx-turnstile";
import { BrowserModule } from "@angular/platform-browser";
import { MyApp } from "./app.component.ts";@NgModule({
bootstrap: [MyApp],
declarations: [MyApp],
imports: [BrowserModule, NgxTurnstileModule],
})
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: ``,
})
export class MyApp {
sendCaptchaResponse(captchaResponse: string) {
console.log(`Resolved captcha with response: ${captchaResponse}`);
}
}
```## Usage with @angular/forms
Import both NgxTurnstileModule and NgxTurnstileFormsModule modules in your app module.
```typescript
import { NgxTurnstileModule, NgxTurnstileFormsModule } from "ngx-turnstile";
```Then import either FormsModule or ReactiveFormsModule from @angular/forms depending on the type of form you want to use.
You can then use the ngModel, formControl or formControlName directives on the component depending on which module you imported from @angular/forms.
### Reactive Form Example
```html
```
### Template Driven Form Example
```html
```
The component is read-only, meaning that you should not update the control with a custom value. Updating the control value will reset the component
## API
The component supports these options as input:
- `siteKey`
- `action`
- `cData`
- `theme`
- `tabIndex`These options are well documented in the [Cloudflare Docs](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations). The letter cases are adapted to camelCase to facilitate easy migration from `ng-recaptcha`.
### Events
- `resolved(response: string)`. Occurs when the CAPTCHA resolution value changed.
- `errored(errorCode: string)`. Occurs when the CAPTCHA widget returned an [error code](https://developers.cloudflare.com/turnstile/troubleshooting/client-side-errors/#error-codes).### Example
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
```