Angular5 和谷歌 reCAPTCHA2

Question

当我在我的 Angular 项目中使用 reCAPTCHA2 时，我使用以下代码生成一个验证码框(我在我的真实站点中填写了站点 key ):

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

这给了我们这样的验证码:

但是，当我点击另一个链接(使用 Angular routerLink 实现)然后返回原始页面时，验证码消失了。

问题是在用

实现验证码时

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

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

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

Answer 1

对于任何遇到类似问题的人，这里是解决方案:

Google 建议将以下链接放在您的 html header 部分:

<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 所需的资源

一定要放appReCaptcha2您希望 reCAPTCHA 与 <div> 一起出现的表单上的指令google 为您提供如下所示:

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