如何隐藏Google Invisible reCAPTCHA徽章

2020/10/25 10:21 · javascript ·  · 0评论

实施新的Google Invisible reCATPTCHA时,默认情况下,您会在屏幕右下角看到一个“ reCAPTCHA保护的”标志,当您将其悬停时会弹出。

在此处输入图片说明

我想隐藏这个。

Google现在允许从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.

例如:

在此处输入图片说明

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

.grecaptcha-badge { 
    visibility: hidden;
}

在此处输入图片说明请勿使用,display: none;因为它似乎禁用了垃圾邮件检查(感谢@Zade)

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

警告: 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>

结果示例

data-badge属性设置inline

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

并添加以下CSS

.grecaptcha-badge {
    display: none;
}

Google现在说:“只要您在用户流中明显包括reCAPTCHA品牌,就可以隐藏徽章。” 链接

由于按照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;
}

我认为这是您可以合法推动的范围。

我决定在除联系页面之外的所有页面上隐藏徽章(使用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;
}

我不是网络开发人员,因此如果出现问题,请纠正我。

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

是的,您可以做到您可以使用CSSJavaScript隐藏reCaptcha v3徽章。

  1. CSS方式使用display: nonevisibility: hidden隐藏reCaptcha批处理。简单,快速。
.grecaptcha-badge {
    display:none !important;
}
  1. Javascript方式
var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

根据Google的政策,隐藏徽章是有效的,并在此处进行了常见问题解答建议显示Google的隐私权政策和使用条款,如下所示。

Google政策和使用条款

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>

我的解决方案是隐藏徽章,然后在用户将重点放在表单输入上时显示徽章-从而仍然遵守Google的条款和条件。

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

的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选择器以定位特定的表单。

对于Wordpress上的Contact Form 7的用户,此方法对我有用:我将所有页面上的v3 Recaptcha隐藏起来,但那些带有Contact 7 Forms的页面除外。

但是此方法应该在使用唯一类选择器的任何站点上起作用,该类选择器可以使用文本输入表单元素来标识所有页面。

首先,我在CSS中添加了一个目标样式规则,该规则可以折叠图块:

的CSS

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

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

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

我的磁贴仍然会在每页上闪烁半秒钟,但这是我到目前为止发现的最好的解决方法,我希望它能遵照执行。改进建议表示赞赏。

这不会禁用垃圾邮件检查

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

如果您使用的是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/并添加以下代码段(我们正在使用此代码在每个页面上删除reCAPTCHA框):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

接下来,您将在要显示Google reCAPTCHA的页面(联系页面,登录名,注册页面…)中添加此代码段:

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

在OIW博客上查阅-如何从WordPress的联系表7中删除Google reCAPTCHA徽标(隐藏reCAPTCHA徽章)

我看到了关于此的下一条评论

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

注意:如果您选择隐藏徽章,请使用

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

在这里查看更多详细信息

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

如果您有更多联系表单页面,则可以添加更多“ nots”。

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

确保您的身体部位会像这样:

<body>

对其进行更改,使其看起来像这样:

 <body <?php body_class(); ?>>
本文地址:http://javascript.askforanswer.com/ruheyincanggoogle-invisible-recaptchahuizhang.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!