如何在注册页面显示 reCaptcha v3？

Question

我正在使用 Angular 12 和 Ionic 构建一个应用程序。我使用 ng-recaptcha 包（https://github.com/DethAriel/ng-recaptcha）保护注册表单，该包使用 Google reCaptcha v3（https://developers.google.com/recaptcha/docs/v3） 。

我的问题是徽章显示在注册表单后访问的每个页面中。

例如，如果我注册，页面会将我重定向到登录页面，并且徽章也会显示在那里。我尝试像这样实现 ngOnDestroy 方法：

  ngOnDestroy() : void{
    if (this.recaptchaSubscription) {
      this.recaptchaSubscription.unsubscribe();
    }
    const element = document.getElementsByClassName('grecaptcha-badge')[0];
    if(element){
      this.renderer2.removeChild(this.document.body, element.parentElement);
    }
  }

这工作正常，我被重定向到登录页面而不显示徽章，但如果我尝试注册新用户，我就会失去验证码保护。就像验证码组件不再生成一样。

更新

要使用验证码，我只需将服务添加到构造函数中，如下所示

  constructor(...
              private recaptchaV3Service: ReCaptchaV3Service,
...) { }

然后我在需要的时候就这样使用它

  onSubmit(): void{
    this.recaptchaSubscription = this.recaptchaV3Service.execute('registerCustomer').subscribe((recaptchaToken) => {
      //Do things 
  });

另外，在我的 app.module 中，我必须将其添加到提供程序部分：

  providers: [
    ReCaptchaV3Service,
    { provide: RECAPTCHA_V3_SITE_KEY, useValue: environment.captchaKey }
  ],

Answer 1

在这些情况下，我们所做的并不是从 DOM 中删除AfterViewInit徽章，只是切换可见性，因此- 显示徽章：

ngAfterViewInit() {
  const element = document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement;
  if (element) {
    element.style.visibility = 'visible';
  }
}

当然，OnDestroy我们隐藏它：

ngOnDestroy() {
  if (this.recaptchaSubscription) {
    this.recaptchaSubscription.unsubscribe();
  }
  const element = document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement;
  if (element) {
    element.style.visibility = 'hidden';
  }
}