如何隐藏Google Invisible reCAPTCHA徽章

Question

在实施新的Google Invisible reCATPTCHA时,默认情况下,当您翻转时,屏幕右下角会弹出一个"受reCAPTCHA保护"徽章.

我想隐瞒这个.

Answer 1

当然你可以用CSS做到.

但根据reCAPTCHA服务条款(您必须同意),您必须告知访问者您网站上的reCAPTCHA实施情况:

并从谷歌服务条款

这些条款不授予您使用我们服务中使用的任何品牌或徽标的权利.请勿删除,隐藏或更改我们的服务中或与我们的服务一起显示的任何法律声明.

2018年12月更新(感谢@Sol)

谷歌现在可以从FAQ中隐藏徽章:

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

You are allowed to hide the badge as long as you include the reCAPTCHA
branding visibly in the user flow. Please include the following text:

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.

例如:

Answer 2

我测试了所有方法,并且:

display: none 禁止垃圾邮件检查!

visibility: hidden并且opacity: 0不要禁用垃圾邮件检查.

使用代码:

.grecaptcha-badge { 
    visibility: hidden;
}

当您隐藏徽章图标时,Google希望您通过添加以下内容在表单上引用其服务:

<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>

Answer 3

将data-badge属性设置为inline

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

并添加以下CSS

.grecaptcha-badge {
    display: none;
}

Answer 4

Google现在说:"只要您在用户流程中明显包含reCAPTCHA品牌,就可以隐藏徽章." 链接

Answer 5

由于根据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;
}

我认为只要你能合法地推动它.

Answer 6

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

1. CSS 方式使用display: none或visibility: hidden隐藏 reCaptcha 批处理。它简单快捷。

.grecaptcha-badge {
    display:none !important;
}

2. Javascript 方式

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

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

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

我不是网站开发人员所以如果出现问题,请纠正我.

编辑:更新为使用可见性而不是显示.

Answer 8

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>

Answer 9

注意：如果您选择隐藏徽章，请使用
.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

Answer 10

这不会禁用垃圾邮件检查

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