54

ng-hcaptcha - An easy-to-use hCaptcha component for Angular 6+

 5 years ago
source link: https://www.tuicool.com/articles/hit/aiMnEzE
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

ng-hcaptcha - hCaptcha Component for Angular 6+

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'
        }),

        // 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>

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

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK