将 recaptcha 集成到 angular 2 / angular 4答案

【问题标题】：Integrating re-captcha in angular2 / angular4将 recaptcha 集成到 angular 2 / angular 4
【发布时间】：2018-09-11 18:20:32
【问题描述】：

背景

我正在尝试将重新验证码集成到使用 Angular 4 制作的单页应用程序中。我使用 grecaptcha.render(elt, {sitekey : 'XXX-my-public-key'}); 设置了站点密钥。

问题

当我调用grecaptcha.render() 时，我无法确定recaptcha js 是否已加载。因此，有时，我会收到此错误：

LoginComponent_Host.html:1 ERROR ReferenceError: grecaptcha is not defined

问题

在调用grecaptcha.render() 之前，如何确定重新验证码已完全加载？

以下是相关代码：

index.html

<html>
  <head>
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
</html>

login.component.html

<div #captchaDiv class="m-t"></div>

login.component.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit, AfterViewInit {

  @ViewChild('captchaDiv')
  captchaDiv: ElementRef;

  [...]

  ngOnInit(): void {
    grecaptcha.render(this.captchaDiv.nativeElement, {sitekey : 'XXX-my-public-key'});
  }

【问题讨论】：

标签： angular typescript recaptcha

【解决方案1】：

派对有点晚了，但我认为它对未来的读者仍然有意义......

我认为您缺少的是脚本标记中的async 和defer 关键字，如下面的指南所示。

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

也就是说，下面是我的完整实现，以防标签需要动态添加并定制为特定语言（这是我的需要）。我已经关注了guide on google dev portal 如何explicitly render 谷歌recaptcha。

@Component({
   template: `<div #recaptcha ></div>`
})
export class MyComponent implements AfterViewInit {
   // Get a reference to the element which will hold the recaptcha widget
   @ViewChild('recaptcha') recaptchaContainer:ElementRef;
   // Retrieve this from your config
   captchaKey:string = 'XXX-my-public-key';

   constructor(private renderer:Renderer2) {}

   ngAfterViewInit() {
      this.initRecaptcha('en');
   }

   initRecaptcha(lang:string) {
      // Check if recaptcha global variables are set, and if so, clear them.
      // This is required in case you need to reload the recaptcha in a different language.
      if (typeof grecaptcha !== 'undefined' && typeof recaptcha !== 'undefined' && typeof  ___grecaptcha_cfg !== 'undefined') {
          grecaptcha = recaptcha = ___grecaptcha_cfg = undefined;
      }

      // Clear the content of the element, and add div to be consumed by the script
      this.recaptchaContainer.nativeElement.innerHTML = `<div class="g-recaptcha" data-sitekey="${this.captchaKey}"></div>`;

      // Append the script to load
      let script = this.renderer.createElement(this.recaptchaContainer.nativeElement, 'script');
      this.renderer.setElementAttribute(script, 'innerHTML', '');
      this.renderer.setElementAttribute(script, 'src', 'https://www.google.com/recaptcha/api.js?hl=' + lang);
      this.renderer.setElementAttribute(script, 'async', 'true');
      this.renderer.setElementAttribute(script, 'defer', 'true');
   }
}

【讨论】：

【解决方案2】：

尝试使用这个 RecaptchaModule ，https://www.npmjs.com/package/ng-recaptcha

@Component({
    selector: 'my-app',
    template: `<re-captcha (resolved)="resolved($event)" siteKey="YOUR_SITE_KEY"></re-captcha>`,
}) export class MyApp {
    resolved(captchaResponse: string) {

    }
}

【讨论】：