Recaptcha v3 loads on all pages with a form

Summary

I’m submitting a:

• bug report
• feature request
• question / support request
• other

Description

I have a problem when try to integrate recaptcha v3 in mi angular app, the problem is when I register the provider, captcha is displayed in all component with a form inside, any one can help me? Really is so weird…

Thanks a lot!

[psenechal]

I did a little research and this may be what is intended with v3 since it looks like it attempts to build a profile of the user’s actions to determine if they’re a bot or not.

I decided the easiest approach was just to hide the badge by default and then unhide it on pages where I want it to display. I accomplished this by adding a global style and a class specific style

// hide recaptcha badge
.grecaptcha-badge {
  visibility: hidden;
}

// only show recaptcha badge on needed pages
body.recaptcha {
  .grecaptcha-badge {
    visibility: visible;
  }
}

on components where I want to display the badge, I add a “recaptcha” class to the body in OnInit and remove it in OnDestroy. I’m using Angular Universal, so I have to check to make sure I’m in the browser

  constructor(
    @Inject(DOCUMENT) private _document: any,
    @Inject(PLATFORM_ID) private _platformId: any,
    private _recaptchaV3Service: ReCaptchaV3Service
  ) { }

  ngOnInit(): void {
    if (isPlatformBrowser(this._platformId)) {
      this._document.body.classList.add('recaptcha');
    }
  }

  ngOnDestroy(): void {
    if (isPlatformBrowser(this._platformId)) {
      this._document.body.classList.remove('recaptcha');
    }
  }

Hope that helps someone.

[DethAriel]

Hey all! I see that you’ve resolved this issue already, but I wanted to call out that this is indeed expected behavior. To help others discover this, I’ve added a small section to the project’s README, which essentially simply points to reCAPTCHA documentation. It is worth noting, however, that if you hide the badge, reCAPTCHA terms of service require you to include the branding visibility in a way that would be perceivable by your users (the FAQ link gives a good example of doing this).

Cheers!