Recaptcha google on angular 6 implementation

Question

im trying to implement recaptcha2 in angular but i dont know where i put the step 3 in my code https://www.npmjs.com/package/angular-google-recaptcha im creating a form that need this,here's where i put the captcha:

<div class="form-group-log text-center but-form">
    <div class="g-recaptcha" data-sitekey="" data-callback="enableButtonEnviar">
    </div>
    <button type="submit" disabled="disabled" class="btn btn-outline-primary btn-block btn-w-240 " id="Btn-enviar" data-dismiss="modal">
        Entrar
    </button>
</div>

but doesnt display nothing. in the link says that i need to put this but i dont know where, if i put it in my login.ts only shows the captcha

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    template: `
        <recaptcha
          [(ngModel)]="myRecaptcha"
          (scriptLoad)="onScriptLoad()"
          (scriptError)="onScriptError()"
        ></recaptcha>
    `
})
export class AppComponent {
    myRecaptcha: boolean

    onScriptLoad() {
        console.log('Google reCAPTCHA loaded and is ready for use!')
    }

    onScriptError() {
        console.log('Something went long when loading the Google reCAPTCHA')
    }
}

Answer 1

Below implementation gives more in detail and to verify the captcha response is the success on the server side.

In a template-driven form, add a reference to your recaptcha element.

 <recaptcha
            [(ngModel)]="myRecaptcha"
              name="myRecaptcha"
              #recaptcha
              (scriptLoad)="onScriptLoad()"
              (scriptError)="onScriptError()"></recaptcha> 

Now pass the recaptcha ref to your form. In my case. It look like below.

<form class="login-form mt-lg" role="form" (ngSubmit)="onForgot(recaptcha)" #loginForm="ngForm">

  <recaptcha
              [(ngModel)]="myRecaptcha"
              name="myRecaptcha"
              #recaptcha
              (scriptLoad)="onScriptLoad()"
              (scriptError)="onScriptError()"></recaptcha> 
</form>

In forgot.component.ts

export class ForgotComponent implements OnInit {
   onForgot(recaptcha: any) {

        console.log(recaptcha.recaptchaAPI.getResponse());

   }
}

The getResponse() will return a token, which can be verified if the form is submitted from your site as below.

POST: https://www.google.com/recaptcha/api/siteverify

form-data 
secret: YOUR-RECAPTCHA-SECRET
response: above_received_token
remoteip: (optional)

The above call will return the status if the request is actually made from your site and by a user.

{
   "success": true,
   "challenge_ts": "2018-08-15T02:47:46Z",
   "hostname": "localhost"
}

Hope it is useful.

Answer 2

Step3 explains using Reactive Form and Template Driven Form.

In Reactive Form (inside component)

myRecaptcha = new FormControl(false);

onScriptLoad() {
   console.log('Google reCAPTCHA loaded and is ready for use!')
}

onScriptError() {
    console.log('Something went long when loading the Google reCAPTCHA')
}

In Template:

You can add this code

<recaptcha
   [formControl]="myRecaptcha"
   (scriptLoad)="onScriptLoad()"
   (scriptError)="onScriptError()"
></recaptcha>

Same is applicable for Template Driven Form.