如何隐藏 Google Invisible reCAPTCHA 徽章

Posted 2023-03-04

【中文标题】如何隐藏 Google Invisible reCAPTCHA 徽章

【英文标题】：How to hide the Google Invisible reCAPTCHA badge

【发布时间】：2017-11-16 12:15:09

【问题描述】：

在实施新的 Google Invisible reCAPTCHA 时，默认情况下，您会在屏幕右下角看到一个小小的“受 reCAPTCHA 保护”徽章，当您滚动它时会弹出该徽章。

我想隐藏这个。

【参考方案1】：

将data-badge 属性设置为inline

<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />

并添加以下 CSS

.grecaptcha-badge 
    display: none;

【讨论】：

小心；这似乎禁用了垃圾邮件检查。

这真的会禁用垃圾邮件检查吗？如果是这样，为什么所有的赞成票？

@Zade 也许改用 opacity: 0 或 visibility: hidden ？你也有一个链接到它统计的地方吗？

用户协议规定您必须按照@Yann39 上面所说的方式通知用户。

@Helenesh 值得单独回答吗？

【参考方案2】：

Google 现在允许从 FAQ 隐藏徽章：

我想隐藏 reCAPTCHA 徽章。什么是允许的？

只要您在用户流程中明显包含 reCAPTCHA 品牌，您就可以隐藏徽章。请包含以下文字：

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

例如：

因此您可以使用以下 CSS 简单地将其隐藏：

.grecaptcha-badge  
    visibility: hidden;

不要使用display: none;，因为它似乎会禁用垃圾邮件检查（感谢@Zade）

【讨论】：

接受它，或选择其他服务。 Google 有权要求您展示其免费服务的品牌。您甚至可以重新定位徽章，使其与developers.google.com/recaptcha/docs/invisible#render_param 表格内联。

好吧，我只在我的联系人表单页面上使用这个验证码 v3。所以这是我希望这个徽章显示的唯一页面。它不适用于我网站上的其他地方。可能吗？

@AndrewTruckle 为什么不呢？

@Simon_Weaver 我现在明白系统会分析所有页面以判断是否是机器人。

@Yann39 - 请更新您的答案。可以隐藏它，例如将其添加到联系人页面：developers.google.com/recaptcha/docs/faq

【参考方案3】：

由于根据 TOU 隐藏徽章并不是真正合法的，并且现有的放置选项破坏了我的 UI 和/或 UX，因此我提出了以下自定义，它模仿了固定定位，但改为内联呈现：

您只需要在您的徽章容器上应用一些 CSS：

.badge-container 
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  width: 70px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 0 4px #ddd;
  transition: linear 100ms width;

.badge-container:hover 
    width: 256px;

我认为你可以合法地推动它。

【讨论】：

不错。我使用transform: scale(0.6) 和opacity: 0.6 进一步推动了它（实际上没有完全隐藏它）

您能否让蓝色横幅向右打开而不是向左打开？还要适应它的配色方案吗？

@VaishalPatel 在理论上是的，但有两个缺点：首先，Google 不鼓励篡改原生徽章设计；其次，您在更改中对现有设计的假设越多，就越脆弱您的解决方案变成了 - 请记住，Google 可以随时更改徽章样式和布局。

@krukid 我使用了他们默认的内联样式。

这个答案已经过时了，看FAQ。

【参考方案4】：

I saw next comment about this

如果您想将自己的 CSS 应用到徽章上，将徽章内联放置也很有帮助。但请记住，您在注册 API 密钥时同意显示 Google 的条款和条件 - 所以请不要隐藏它。 虽然可以使用 CSS 使徽章完全消失，但我们不建议这样做。

【参考方案5】：

这不会禁用垃圾邮件检查

div.g-recaptcha > div.grecaptcha-badge 
    width:0 !important;

【参考方案6】：

我的解决方案是隐藏徽章，然后在用户关注表单输入时显示它 - 因此仍然遵守 Google 的 T&C。

注意：我正在调整的 reCAPTCHA 是由 WordPress 插件生成的，因此您可能需要自己用 <div class="inv-recaptcha-holder"> ... </div> 包装 reCAPTCHA。

CSS

.inv-recaptcha-holder 
  visibility: hidden;
  opacity: 0;
  transition: linear opacity 1s;


.inv-recaptcha-holder.show 
  visibility: visible;
  opacity: 1;
  transition: linear opacity 1s;

jQuery

$(document).ready(function () 
  $('form input, form textarea').on( 'focus', function() 
    $('.inv-recaptcha-holder').addClass( 'show' );
  );
);

显然，如果需要，您可以更改 jQuery 选择器以针对特定表单。

【参考方案7】：

我决定在我的联系页面以外的所有页面上隐藏徽章（使用 Wordpress）：

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge 
    visibility: hidden !important;


/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge 
    visibility: visible !important;

我不是网络开发人员，所以如果有问题请纠正我。

编辑：更新为使用可见性而不是显示。

【讨论】：

这会起作用，但 page-id-# 是特定于您的网站的，因此任何使用它的人都需要调整 id 以适应他们想要执行显示的页面。 ||我看到有报道说这样做 display:none;也会禁用检查，但我现在不确定。

小心！这将禁用垃圾邮件检查。查看我的答案以获取更多信息

根据 Michael & Helenesh 的上述 cmets 更新

【参考方案8】：

对于 Google reCaptcha v3，FAQ 表示：

只要包含 reCAPTCHA，您就可以隐藏徽章 品牌在用户流中可见。请包含以下文字：

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

例如：

注意：如果您选择隐藏徽章，请使用

.grecaptcha-badge  visibility: hidden; 

尚不清楚它是否适用于 reCaptcha v2。我建议升级到 v3，因为它为您的访问者提供了更好的体验。

【讨论】：

仅适用于 v3！ v2 仍然需要显示徽章。 :(

@ADTC 这仍然适用吗？酱汁？

@user13160957 我更新了答案。它仍然适用于 v3。

@ADTC 我不明白为什么这只适用于 v3。能否请您提供您的信息来源的参考？

@RenéSchubert 正如我所提到的：“尚不清楚它是否适用于 reCaptcha v2。” 再次查看链接的常见问题解答，您似乎应该能够在不违反条款的情况下也在 v2 中执行此操作。 只有谷歌才能肯定回答这个问题！

【参考方案9】：

对于 Wordpress 上 Contact Form 7 的用户，此方法对我有用： 我在所有页面上都隐藏了 v3 Recaptcha，除了带有 Contact 7 Forms 的页面。

但是这种方法应该适用于您使用唯一类选择器的任何站点，该选择器可以识别具有文本输入表单元素的所有页面。

首先，我在 CSS 中添加了一个可以折叠磁贴的目标样式规则：

CSS

 div.grecaptcha-badge.hide
    width:0 !important;

然后我在标题中添加了 JQuery 脚本以在窗口加载后触发，因此“grecaptcha-badge”类选择器可用于 JQuery，并且可以添加“隐藏”类以应用可用的 CSS 样式。

$(window).load(function ()  
    if(!($('.wpcf7').length)) 
      $('.grecaptcha-badge').addClass( 'hide' );
       
);

我的磁贴仍然会在每一页上闪烁半秒，但这是我迄今为止发现的最好的解决方法，我希望能遵守。改进建议表示赞赏。

【参考方案10】：

如果您使用的是 Contact Form 7 更新和最新版本（版本 5.1.x），则需要安装、设置 Google reCAPTCHA v3 才能使用。

默认情况下，您会在屏幕右下角的每个页面上显示 Google reCAPTCHA 徽标。根据我们的评估，这正在为用户创造糟糕的体验。而且您的网站、博客会变慢一点（由 PageSpeed 分数反映），您的网站将不得不从 Google 加载额外的 1 个 javascript 库才能显示此徽章。

您可以按照以下步骤从 CF7 中隐藏 Google reCAPTCHA v3（仅在必要时显示）：

首先，您打开主题的 functions.php 文件（使用文件管理器或 FTP 客户端）。该文件位于：/wp-content/themes/your-theme/ 并添加以下 sn-p（我们正在使用此代码删除每个页面上的 reCAPTCHA 框）：

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

接下来，您将在您希望它显示 Google reCAPTCHA 的页面中添加这个 sn-p（联系页面、登录、注册页面……）：

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) 
    add_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );

请参阅 OIW 博客 - 如何从 WordPress 的联系表 7 中删除 Google reCAPTCHA 徽标（隐藏 reCAPTCHA 徽章）

【参考方案11】：

Matthew Dowell 帖子的一个轻微变体，它避免了短暂的闪烁，但只要可见联系表格 7 表格就会显示：

div.grecaptcha-badge
    width:0 !important;


div.grecaptcha-badge.show
    width:256px !important; 

然后我在我的子主题的 header.php 中添加了以下内容：

<script>
jQuery( window ).load(function ()  
    if( jQuery( '.wpcf7' ).length ) 
        jQuery( '.grecaptcha-badge' ).addClass( 'show' );
    
);
</script>

【参考方案12】：

我已经测试了所有方法并且：

警告： display: none 禁用垃圾邮件检查！

visibility: hidden 和 opacity: 0 不要禁用垃圾邮件检查。

使用代码：

.grecaptcha-badge  
    visibility: hidden;

当您隐藏徽章图标时，Google 希望您通过添加以下内容在您的表单上 reference 他们的服务：

<small>This site is protected by reCAPTCHA and the Google 
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>

【讨论】：

这个答案需要更高！它以简洁的方式包含解决方案的所有必要信息。

正是我想要的，这很好用。此外，对于任何寻找允许证明的人，请检查此页面（如果您还没有在这个 SO 线程中看到它）developers.google.com/recaptcha/docs/faq

感谢您提到这个@Jake。我已将此添加到我的答案中。

有没有人发现隐藏徽章而不是 css hack 的记录方法？ Google 提供了一种显示其品牌的替代方式，但我找不到隐藏其徽章的受支持方法。

【参考方案13】：

Recaptcha 联系表格 7 和 Recaptcha v3 解决方案。

body:not(.page-id-20) .grecaptcha-badge 
    display: none;

不止一个联系表单页面？

body:not(.page-id-12):not(.page-id-43) .grecaptcha-badge 
    display: none;

如果您有更多联系表单页面，您可以添加更多“不”。

body:not(.page-id-45):not(.page-id-78):not(.page-id-98) .grecaptcha-badge 
    display: none;

确保你的身体部分是这样的：

<body>

将其更改为如下所示：

 <body <?php body_class(); ?>>

【讨论】：

请其他答案，显示无禁用垃圾邮件检查。

@Helenesh 什么是垃圾邮件检查以及它与添加 CSS 样式有何关系？

【参考方案14】：

注意：如果您选择隐藏徽章，请使用 .grecaptcha-badge visibility: hidden;

只要您在用户流程中明显包含 reCAPTCHA 品牌，您就可以隐藏徽章。请包含以下文字：

本网站受 reCAPTCHA 和 Google<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

保护

更多详情在这里reCaptacha

【讨论】：

这应该是更新/正确的答案。 display: none 本身会禁用垃圾邮件检查，如果您不输入文本 This site is protected...。

【参考方案15】：

是的，你可以做到。您可以使用 css 或 javascript 来隐藏 reCaptcha v3 徽章。

CSS 方式 使用display: none 或visibility: hidden 隐藏reCaptcha 批次。简单快捷。

.grecaptcha-badge 
    display:none !important;

Javascript 方式

var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

隐藏徽章是有效的，根据谷歌政策并在常见问题解答here 中回答。建议显示谷歌的隐私政策和使用条款，如下所示。

【讨论】：

'不是 querySelect' 而是 'querySelector'。

display: none 禁用垃圾邮件检查！