Angular 2 Recaptcha 2 回调

Question

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

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

并且在我的注册 class 中，我使用以下代码在名为 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);
}

使用上面的代码，我能够显示验证码，但我只能使用 Javascript 中定义的 verifyCallback() 运行 回调。当我使用 Typescript 时，是否可以使用 Signup class 中定义的方法而不是 Javascript 进行回调 运行s？

Answer 1

我认为您无法将回调引用传递给脚本，但是您可以使用打字稿随后可以访问的全局变量对其进行修补。

@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);
  }
}

Answer 2

以防万一有人觉得它有用，我还想出了一个将 Google reCAPTCHA 集成到我的 Angular 表单中的解决方案，我将它作为一个库发布在这里：

https://github.com/JamesHenry/angular-google-recaptcha

它为您提供了一个非常简单的组件，可以与模板驱动或反应形式一起使用：

<recapthca [(ngModel)]="" (scriptLoad)="" (scriptError)="">

<recapthca [formControl]="" (scriptLoad)="" (scriptError)="">

这意味着您根本不需要担心注册全局回调或处理脚本加载！