Recaptcha google 上 Angular 6 的实现

Question

我试图以角度实现 recaptcha2，但我不知道我将步骤 3 放在我的代码 https://www.npmjs.com/package/angular-google-recaptcha 的什么位置 我正在创建一个需要这个的表单，这是我放置验证码的地方：

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

但不显示任何内容。在链接中说我需要把这个但是我不知道在哪里，如果我把它放在我的 login.ts 中只显示验证码

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

下面的实现提供了更多细节，并验证验证码响应是否在服务器端成功。

在模板驱动的表单中，添加对您的 recaptcha 元素的引用。

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

现在将 recaptcha 引用传递给您的表单。就我而言。如下所示。

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

在 forgot.component.ts 中

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

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

   }
}

getResponse() 将返回一个令牌，如果表单是从您的网站提交的，则可以验证该令牌，如下所示。

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

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

如果请求实际上是从您的站点和用户发出的，上述调用将返回状态。

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

希望有用。

Answer 2

Step3 解释使用响应式表单和模板驱动表单。

在反应形式（内部组件）

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

在模板中：

您可以添加此代码

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

同样适用于模板驱动表单。

Answer 3

用于登录的表单定义

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