Angular 6中如何触发Invisible reCaptcha v2验证？

你调用captchaRef.execute()报错的核心原因是：captchaRef是ngx-recaptcha2组件的实例，而非Google原生的grecaptcha对象，execute方法需要通过组件暴露的recaptchaApi属性来调用。

修改后的完整代码 #

TypeScript部分

import { NgxRecaptcha2Component } from 'ngx-captcha';
import { ViewChild } from '@angular/core';

// ...

@ViewChild('captchaRef') captchaRef: NgxRecaptcha2Component;
captchaCode = '你的Google reCaptcha站点密钥';
navDisable = false;

submitRecaptcha() {
  console.log('start submit method');
  this.navDisable = true;
  // 调用recaptchaApi的execute方法触发验证
  this.captchaRef.recaptchaApi.execute();
}

submitDataRC(captchaResponse: string) {
  // 验证通过后，在此处理表单提交逻辑
  console.log('获取到的验证码Token:', captchaResponse);
  // 你的表单提交代码...
}

HTML部分（无需修改，确保配置正确）

<ngx-recaptcha2
#captchaRef
[siteKey]=captchaCode
size="invisible"
(resolved)="submitDataRC($event)"
>
</ngx-recaptcha2>

<div>
     Form goes here...
     <button
     (click)="submitRecaptcha()"
     [disabled]="navDisable"
     >Submit</button>
</div>

关键注意事项 #

• 确保已在Angular模块中正确导入ReCaptchaV2Module
• captchaCode必须是你在Google reCaptcha控制台申请的有效Invisible reCaptcha v2站点密钥
• 如果仍有问题，可在ngAfterViewInit生命周期钩子中做初始化检查，确保组件加载完成后再调用execute方法

内容的提问来源于stack exchange，提问作者Andres Felipe Ariza Calderon