Angular5和谷歌reCAPTCHA2

Question

当我在Angular项目中使用reCAPTCHA2时，我使用以下代码生成验证码框（我在我的真实网站中填充了网站密钥）：

  <div class="g-recaptcha" data-sitekey="mySiteKey"></div>

这给了我们像这样的验证码：

然而，当我点击另一个链接（使用Angular routerLink实现）然后返回原始页面时，CAPTCHA已经消失。

问题是用

实现验证码时

  <div class="g-recaptcha" data-sitekey="mySiteKey"></div>

Google向Google服务器发出各种请求以显示复选框。有谁知道我怎么可能解决这个问题或指出我正确的方向。

如果您需要更多信息评论，谢谢。

Answer 1

对于这里有类似问题的人来说，解决方案是：

Google建议在您的html标题部分添加以下链接：

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

现在只在加载页面时执行。 当我们转到另一个组件时，不会重新加载此链接。

我们可以使用以下指令修复它：

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appReCaptcha2]'
})
export class ReCaptcha2Directive implements OnInit {

  constructor(private elementRef: ElementRef ) { }

  ngOnInit(): void {
    const fragment = document.createRange().createContextualFragment('<script src=\'https://www.google.com/recaptcha/api.js\'></script>');
    this.elementRef.nativeElement.appendChild(fragment);
  }

}

这会动态创建脚本，因此我们得到了一个有效的reCAPTCHA。这是因为现在脚本可以从谷歌服务器加载渲染和加载reCAPTCHA所需的资源

请务必在您希望reCAPTCHA出现的表单上放置appReCaptcha2指令，<div> google为您提供如下所示的内容：

<div class="g-recaptcha" data-sitekey="your site key provided by google"></div>