实现 recaptcha 的多种形式不显示徽章

Question

描述

我已经在 angular 应用程序上实现了 ng-recaptcha。

场景：

父组件有两个子组件都实现了 recaptcha。两个子组件都在可折叠面板内。

问题：

只有当通过可折叠面板激活第二个组件时，才会显示 recaptcha 徽章。当通过第一个可折叠面板激活第一个组件时，recaptcha 将被隐藏。

问题：

有没有办法强制第一个组件也显示 recaptcha 徽章？

代码示例：

 <re-captcha #recaptcha="reCaptcha" 
            size="invisible" 
            name="captcha" 
            [(ngModel)]="formModel.captcha" 
            required 
            (resolved)="$event && callMethod($event, 'Upload')">
</re-captcha>

库版本：

ng-recaptcha: 5.0.0

Angular: 9

Typescript (tsc --version): 3.8.3

也发表在 GitHub -

GitHub - Multiple forms implementing recaptcha don't show the badge

Answer 1

显然默认情况下只显示一个徽章。参考GitHub - Multiple forms implementing recaptcha don't show the badge

Answer 2

DethAriel commented on the GitHub issue on Sep 12:

Hi @siva-saripilli, and thank you for submitting the issue!

From what I see, absence of the badge does not prevent recaptcha from functioning properly. Take a look at this example.

Open the console tab in stackblitz and observe its output while you navigate from "Crisis Center" to "Login" -- invisible recaptcha is being executed properly, which is seen by the appropriate log statements.

Now, I understand that the absence of the badge can be perceived as an inconvenience. However, the exact functionality of this badge is not controllable by ng-recaptcha library, I'm afraid -- it's part of core recaptcha functionality. Based on publicly available recaptcha API it doesn't appear to be controllable, so I'm afraid I have to close this issue as invalid.

If, however, you find that this explanation does not represent the issue you observe, feel free to open a new bug with reproduction scenario attached.