ng-hcaptcha-transition
v2.2.0
Published
Needed until the real ng-hcaptcha supports Angular v17
Downloads
3
Readme
ng-hcaptcha - hCaptcha Component for Angular
ng-hcaptcha provides an easy to use component for hCaptcha.
Table of Contents
Installation
Step 1 - Install the ng-hcaptcha dependency
# 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
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:
<!-- Regular usage -->
<ng-hcaptcha (verify)="onVerify($event)"
(expired)="onExpired($event)"
(error)="onError($event)">
</ng-hcaptcha>
<!-- Usage in forms -->
<!-- The value of the form control will be the verification token -->
<form [formGroup]="formGroup" (submit)="onSubmit()">
<ng-hcaptcha formControlName="captcha"></ng-hcaptcha>
</form>
<!-- Invisible captcha -->
<button ngHcaptchaInvisibleButton
(verify)="onVerify($event)"
(expired)="onExpired($event)"
(error)="onError($event)">Click me</button>
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:
@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. If you have any ideas for new features or improvements, feel free to contribute or open an issue :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