javascript - ReCAPTCHA 找不到用户提供的功能：onloadCallback Angular 6 Typescript

Question

我得到：ReCAPTCHA 找不到用户提供的功能：onloadCallback

我在 index.html 中调用了 Google API

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

在 app/ 目录中的几个级别的组件中，我有一个验证页面，用户使用 reCaptcha 来验证他们是人类。

这是我的 .ts 文件的片段

public siteKeyCaptcha = 'Sgsfsdfs3212424233423424dddddddddd-' <!-- FAKE KEY-->;
public reCaptchaWidgetId = 'recaptcha1';


ngOnInit() {

    this.validationCommentSuccess = false;
    this.validationCommentDanger = false;
    this.onloadCallback = this.onloadCallback.bind(this);
    try {
        grecaptcha.render(this.reCaptchaWidgetId, {
       'sitekey': this.siteKeyCaptcha,
       'callback': 'onloadCallback'
       });
    } catch (error) {
      console.log('Error on Try Catch: ', error);
    }
    this.btnValue = 'Welcome! Prove you\'re human first then click here.';

    this.sessionStorageService.set('appInsIDSectId', this.temporaryPath);
    this.getFingerPrint().then(data => console.log('DEVICE FINGER PRINT: ', data));

    // This is needed to get the reCaptcha working or it'll say it can't find it
    this.onloadCallback(grecaptcha.getResponse());
}

这是 .html 文件中的片段

    <form id="form-validation" novalidate method="post">
      <div class="login__brand"></div>
      <h1 class="h3 my-3 text-center">Welcome to Digital Harbor</h1>
      <h2 class="h2 my-2 text-center">Click the button below to enter Set Forms</h2>


      <div id="recaptcha1" class="g-recaptcha" 
           data-expired-callback="disableBtn"
           data-sitekey='Sgsfsdfs3212424233423424dddddddddd-' <!-- FAKE KEY-->
           data-callback="enableBtn"
           data-expired-callback="expiredCallback"></div>

      <button class="mt-3 btn btn-lg btn-primary btn-block"
              id="submitValidateBtn"
              type="submit"
              (click)="validation()"
              [innerHTML]='btnValue'></button>

    </form>  

.ts 文件中的代码

  ngAfterViewInit() {

    this.submitbtn = document.getElementById('submitValidateBtn') as HTMLElement;
    // Start with a disabled Submit Button
    this.disableBtn();
      window.enableBtn = (data: any) => {
        console.log('Inside Global Callback Method Enable ', data);
        this.enableBtn();
      };
      window.disableBtn = (data: any) => {
        if (data === 'expiredmsg') {
          console.log('Inside Global Callback Method Disable ', data);
          this.submitbtn.innerText = 'Oops! Please reverify to continue.';
        }
        this.disableBtn();
      };
  }

  ngAfterViewChecked() {

  }

  public async getFingerPrint() {
    this.deviceFingerPrint = await this.httpService.getDeviceFingerprint();
    return this.deviceFingerPrint;
  }

  public onSubmit(event: any) {
    console.log('EVENT onSubmit: ', event);
    if (this.checkCaptcha && grecaptcha.getResponse(this.reCaptchaWidgetId) != "") {
      this.submitted = true;
      this.enableBtn();
    }
  }

  public verifyCallback(response: any) {
    console.log('ReCaptcha Response Verified: ', response);
    if (grecaptcha.getResponse(this.reCaptchaWidgetId).length !== 0) {
      this.checkCaptcha = false;
    } else {
      this.checkCaptcha = true;
    }
  }

  public onloadCallback(captchaResponse: string) {
    if (captchaResponse === "") {
      console.log('grecaptcha is NOT ready!');
    } else {
      console.log('grecaptcha is ready!');
      this.recaptcha.verifyUserResponse(captchaResponse);
      this.verifyCallback(captchaResponse);
    }
  }

  public expiredCallback() {
    this.submitbtn.innerText = 'EXPIRED! Click Captcha to prove you\'re human again!';
    this.submitbtn.classList.add('disableBtn');
    this.submitbtn.classList.remove('enableBtn');
    this.submitbtn.setAttribute('disabled', 'disabled');
  }

  public disableBtn(): void {
    this.submitbtn.classList.add('disableBtn');
    this.submitbtn.classList.remove('enableBtn');
    this.submitbtn.setAttribute('disabled', 'disabled');
    this.submitbtn.innerText = 'Click Captcha to prove you\'re human!';
  }

  public enableBtn(): void {
    this.onloadCallback(grecaptcha.getResponse(this.reCaptchaWidgetId));
    this.submitbtn.classList.add('enableBtn');
    this.submitbtn.classList.remove('disableBtn');
    this.submitbtn.removeAttribute('disabled');
    this.submitbtn.innerText = 'Welcome! Prove you\'re human first then click here.';
  }

我的目标是：

1. 验证验证码并启用按钮（提交）
2. 验证后，我不想在调试控制台中出现此错误。

ReCAPTCHA 找不到用户提供的函数：onloadCallback

和

ReCAPTCHA 找不到用户提供的功能：expiredCallback

问题：

那是因为 index.html 中的 JS 脚本调用在食物链上太远了，无法找到 onloadCallback 吗？

我尝试将其移动到 HTML 文件中，但 reCaptcha 小部件从不呈现

谢谢

标签： javascriptangularrecaptcha