Estoy creando una aplicación con Angular 12 e Ionic. He protegido el formulario de registro con el paquete ng-recaptcha ( https://github.com/DethAriel/ng-recaptcha ) que utiliza Google reCaptcha v3 ( https://developers.google.com/recaptcha/docs/v3 ) .

Mi problema es que la insignia se muestra en cada página visitada después del formulario de registro.

Por ejemplo, si me registro, la página me redirige a la página de inicio de sesión y allí también se muestra la insignia. He intentado implementar el método ngOnDestroy de esta manera:

 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); } }

Esto funciona bien, soy redirigido a la página de inicio de sesión sin mostrar la insignia, pero si trato de registrar un nuevo usuario, pierdo la protección de captcha. Es como si el componente captcha ya no se generara.

ACTUALIZAR

Para usar el captcha, solo agrego el servicio al constructor de esta manera

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

Luego lo uso cuando lo necesito así.

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

También en mi app.module tuve que agregar esto en la sección de proveedores:

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