hCaptcha Component for Angular
npm install ng-hcaptcha
ng-hcaptcha currently supports Angular v9 to v20.
shell
NPM
npm install --save ng-hcaptcha
Yarn
yarn add ng-hcaptcha
`
> You can use the tag 'next' to get the latest beta version.
$3
`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
`
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