Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leNicDev/ng-hcaptcha
:fire: hCaptcha Component for Angular
https://github.com/leNicDev/ng-hcaptcha
angular captcha hcaptcha human protocol verification
Last synced: about 2 months ago
JSON representation
:fire: hCaptcha Component for Angular
- Host: GitHub
- URL: https://github.com/leNicDev/ng-hcaptcha
- Owner: leNicDev
- License: mit
- Created: 2018-10-01T20:34:03.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-01T20:08:20.000Z (10 months ago)
- Last Synced: 2024-10-05T22:05:44.270Z (2 months ago)
- Topics: angular, captcha, hcaptcha, human, protocol, verification
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-hcaptcha
- Size: 1.98 MB
- Stars: 45
- Watchers: 8
- Forks: 35
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-hcaptcha - Provides an easy to use component for [hCaptcha](https://hcaptcha.com/). (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-hcaptcha - Provides an easy to use component for 🌎 [hCaptcha](hcaptcha.com/). (Table of contents / Third Party Components)
README
[](https://github.com/leNicDev/ng-hcaptcha/blob/master/LICENSE)Â
[](https://GitHub.com/leNicDev/ng-hcaptcha/issues/)Â
[](https://GitHub.com/leNicDev/ng-hcaptcha/pull/)
# ng-hcaptcha - hCaptcha Component for Angular
ng-hcaptcha provides an easy to use component for [hCaptcha](https://hcaptcha.com).
## Table of Contents
- [Supported Angular versions](#supported-angular-versions)
- [Installation](#installation)
- [Usage](#usage)
- [Execute hCaptcha programmatically](#execute-hcaptcha-programmatically)
- [Bugs? Ideas?](#bugs-ideas)
- [Support me](#support-me)
## Supported Angular versions
The latest version of `ng-hcaptcha` currently supports Angular v9 to v17.
## Installation
### Step 1 - Install the ng-hcaptcha dependency
```shell
# NPM
npm install --save ng-hcaptcha
# Yarn
yarn add ng-hcaptcha
```
> You can use the tag 'next' to get the latest beta version.
### Step 2 - Import the NgHcaptchaModule
```ts
import { NgHcaptchaModule } from 'ng-hcaptcha';
@NgModule({
imports: [
// Option #1
// Set the sitekey globally for every hCaptcha component
NgHcaptchaModule.forRoot({
siteKey: 'YOUR_SITEKEY',
languageCode: 'de' // optional, will default to browser language
}),
// Option #2
// This option requires you to set the [siteKey] property for every hCaptcha component
NgHcaptchaModule.forRoot()
]
})
```
## Usage
Template:
```html
Click me
```
TS:
```ts
onVerify(token: string) {
// The verification process was successful.
// You can verify the token on your server now.
}
onExpired(response: any) {
// The verification expired.
}
onError(error: any) {
// An error occured during the verification process.
}
```
## Execute hCaptcha programmatically
The hCaptcha verification process can also be executed programmatically:
```ts
@Component({
selector: 'hc-programmatically',
templateUrl: './programmatically.component.html',
styleUrls: ['./programmatically.component.scss']
})
export class ProgrammaticallyComponent {
constructor(private hcaptchaService: NgHcaptchaService) { }
verify() {
this.hcaptchaService.verify().subscribe(
(result) => {
console.log('SUCCESS', result);
},
(err) => {
console.log('FAILED', err);
},
() => {
console.log('COMPLETE');
}
);
}
}
```
## Properties
The properties below exist for all captcha components.
`siteKey` Allows you to set the site key per captcha instance.
`languageCode` Allows you to force a specific language. See https://docs.hcaptcha.com/languages
## Bugs? Ideas?
If you found a bug or something you don't like, feel free to [open an issue](https://github.com/leNicDev/ng-hcaptcha/issues/new). If you have any ideas for new features or improvements, feel free to contribute or [open an issue](https://github.com/leNicDev/ng-hcaptcha/issues/new) :wink:
## Support me
If you would like to support me for free, just create your hCaptcha account using my referral link :relaxed:
[https://hCaptcha.com/?r=4afcb2d42338](https://hCaptcha.com/?r=4afcb2d42338)