首页 > 解决方案 > 仅在 Angular 的登录组件中显示 reCaptcha V3

问题描述

我有一个Angular应用程序。我正在尝试在我的登录页面中添加reCaptcha V3 。

一切正常,但recaptcha 徽章显示在我的应用程序的所有页面中。我只需要显示 recaptcha 徽章登录页面。

我将脚本包含在我的index.html中

<script src="https://www.google.com/recaptcha/api.js?render=MYSITEKEY"></script>

我的login.component.ts

declare var grecaptcha: any;

export class LoginComponent implements OnInit {
private REC_SITEKEY= environment.REC_SITEKEY;
ngOnInit() {

  grecaptcha.ready(() => {
    grecaptcha.execute(this.REC_SITEKEY, { action: 'validate_captcha' }).then((token) => {
      this.rec_response=token;
    });
  });
  }
  }

我知道我在index.html中调用脚本。所以徽章显示在所有页面中。但我尝试将脚本包含在login.component.html中。但它不起作用。

所以我需要隐藏除登录组件之外的所有页面的徽章。 我怎样才能做到这一点?

标签: angularrecaptcha-v3

解决方案


推荐阅读