Invisible reCAPTCHA with Angular 5

Install ng-recaptcha module and import it into the app.module.ts

npm i ng-recaptcha --save

Login to you google account here and register for an Invisible reCAPTCHA and get the client side key and add it to the siteKey field below.

app.module.ts

import {NgModule} from '@angular/core';
import {
    RECAPTCHA_SETTINGS,
    RecaptchaSettings,
    RecaptchaLoaderService,
    RecaptchaModule,
} from 'ng-recaptcha';

const globalSettings: RecaptchaSettings = {siteKey: 'sitekey here'};

@NgModule({
    declarations: [],
    imports: [
     RecaptchaModule.forRoot()
    ],
    providers: [
        {
            provide: RECAPTCHA_SETTINGS,
            useValue: globalSettings,
        } 
     ]
})

export class AppModule {
}

home.component.html

 <form>
                        <label for="email">Email:</label>
                        <input [(ngModel)]="email" type="email" name="email" id="email" autocomplete="on" />
                    <re-captcha
                            #captchaRef="reCaptcha"
                            (resolved)="resolved($event)"
                            size="invisible"></re-captcha>
                    <button (click)="onLoginClick(captchaRef)">Submit</button>
 </form>

home.component.ts

...
recaptchaStr = '';

onLoginSubmit(): void {
    }

onLoginClick(captchaRef: any): void {
        if (this.recaptchaStr) {
            captchaRef.reset();
        }
        captchaRef.execute();
    }

public resolved(captchaResponse: string): void {
        this.recaptchaStr = captchaResponse;
        if (this.recaptchaStr) {
            this.onLoginSubmit();
        }
    }
...

Read this to implement the server side part of the code.

Related