Skip to content
master
Switch branches/tags
Go to file
Code
This branch is 7 commits ahead, 9 commits behind leNicDev:master.

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
e2e
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Build status  GitHub license  GitHub issues  GitHub pull-requests

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

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 😉

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 ☺️ https://hCaptcha.com/?r=4afcb2d42338

About

🔥 hCaptcha Component for Angular 7+

Resources

License

Packages

No packages published