CODEWITHSUNDEEP
angularrecaptcha
Karen Gm
Karen Gm

Reputation: 39

Recaptcha google on angular 6 implementation

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

Upvotes: 3

Views: 13273

Answers (3)

bheemrav mahoviya
bheemrav mahoviya

Reputation: 1

Form Define for Login

    <form [formGroup]="loginForm"  (ngSubmit)="onSubmit(loginForm)" >

      <div class="input-group mb-3">
        <mat-form-field class="login-full-width">
        <input matInput type="text" class="form-control" formControlName="userName" placeholder="Mobile Number" (keypress)="numberOnly($event)">
      </mat-form-field>

      </div>

      <div class="input-group mb-3">
        <mat-form-field class="login-full-width">
        <input matInput type="password" class="form-control" formControlName="password" placeholder="Password">
      </mat-form-field>

      </div>

      <recaptcha formControlName="myRecaptcha" (ngModel)="myRecaptcha" (scriptLoad)="onScriptLoad()"
      (scriptError)="onScriptError()" ></recaptcha>

      <div class="row">
        <div class="col-8">
          <div class="icheck-primary">
            <input type="checkbox" id="remember">
            <label for="remember">
              Remember Me 
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-4">
          <button  mat-button type="submit" [disabled]="!loginForm.valid" class="btn btn-primary btn-block">Sign In</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

Upvotes: 0

vyeluri5
vyeluri5

Reputation: 487

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.

Upvotes: 1

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

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.

Upvotes: 0

Related Questions