打字稿 – Angular 2 Recaptcha 2回调

发布时间：2020-12-17 07:19:05 所属栏目：安全来源：网络整理

导读：目前我正在尝试在Angular 2 Typescript中使用Google Recaptcha v2.我在注册表单中使用它.假设我有一个包含以下内容的表单： form id="signup-form" div class="g-recaptcha" data-callback="verifyCallback" data-sitekey="6LetChQTAAAAACq4lmSL0L1-4rv47ZPr

目前我正在尝试在Angular 2 Typescript中使用Google Recaptcha v2.我在注册表单中使用它.假设我有一个包含以下内容的表单：

<form id="signup-form">
  <div class="g-recaptcha" data-callback="verifyCallback" data-sitekey="6LetChQTAAAAACq4lmSL0L1-4rv47ZPrFKrkWOLf"></div>
</div>

在我的Signup类中,我使用以下代码在名为displayRecaptcha()的方法中显示小部件：

displayRecaptcha(){
    var doc = <HTMLDivElement>document.getElementById('signup-form');
    var script = document.createElement('script');
    script.innerHTML = '';
    script.src = 'https://www.google.com/recaptcha/api.js';
    script.async = true;
    script.defer = true;
    doc.appendChild(script);
    var d = document.createElement('script');
    d.innerHTML = `
    var verifyCallback() = function(response) {
     alert(response);
    };`
    document.querySelector('head').appendChild(d);
}

使用上面的代码,我能够显示recaptcha,但我只能使用在Javascript中定义的verifyCallback()来运行回调.因为我正在使用Typescript,无论如何使用Signup类中定义的方法而不是Javascript来使回调运行？

我不认为您将能够传递对脚本的回调引用,但是您可以通过使用typescript随后可以访问的全局变量来修补它.

@Component({...})
export class MyComponent{

  constructor(){
    window['verifyCallback'] = this.verifyCallback.bind(this);
  }

  displayRecaptcha(){
    var doc = <HTMLDivElement>document.getElementById('signup-form');
    var script = document.createElement('script');
    script.innerHTML = '';
    script.src = 'https://www.google.com/recaptcha/api.js';
    script.async = true;
    script.defer = true;
    doc.appendChild(script);
  }

  verifyCallback(response){
    alert(response);
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!