ng-hcaptcha - hCaptcha Component for Angular 7+

ng-hcaptcha provides an easy to use component for hCaptcha.

This component is contributed and maintained by the hCaptcha community. You can find the upstream repo here.

Table of Contents

• Installation
• Usage
• Bugs? Ideas?
• Support me

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.
}

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:

Contribute

You can reach out to us on telegram

Support me (note from the original author)

If you would like to support me for free, just create your hCaptcha account using my referral link :relaxed: https://hCaptcha.com/?r=4afcb2d42338