angular - Recaptcha google on angular 6 实现

Question

我正在尝试以 Angular 实现 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>

但什么都不显示。在链接中说我需要把这个但我不知道放在哪里，如果我把它放在我的登录名中。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 ref 传递给您的表单。就我而言。如下所示。

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

在忘记.component.ts

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

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

   }
}

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

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

希望有用。