web-dev-qa-db-fra.com

Comment masquer le badge Google Invisible reCAPTCHA

Lorsque vous implémentez le nouveau reCATPTCHA invisible de Google, vous obtenez par défaut un petit badge "protégé par reCAPTCHA" en bas à droite de l'écran qui apparaît lorsque vous le survolez.

 enter image description here

J'aimerais cacher ça.

javascriptrecaptcha
60
James Law

Définissez l'attribut data-badge sur inline

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

Et ajoutez le CSS suivant

.grecaptcha-badge {
    display: none;
}
39
James Law

Bien sûr, vous pouvez le faire en utilisant CSS.

Toutefois, conformément aux conditions d'utilisation de reCAPTCHA (que vous devez avoir acceptées), vous devez informer les visiteurs de la mise en œuvre de reCAPTCHA sur votre site:

 enter image description here

Et à partir de Conditions d'utilisation de Google

Ces conditions ne vous accordent pas le droit d'utiliser une marque ou un logo utilisé dans nos services. Ne retirez pas, ne masquez pas, ne modifiez pas les informations légales les avis affichés dans ou avec nos services.

UPDATE DEC 2018 (merci @Sol)

Google permet maintenant de masquer le badge, à partir du FAQ :

Je voudrais cacher le badge reCAPTCHA v3. Qu'est-ce qui est permis?

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.

Par exemple:

 enter image description here

105
Yann39

J'ai testé toutes les approches et: 

display: none désactive la vérification du spam! 

visibility: hidden et opacity: 0 NE désactivent PAS le contrôle anti-spam. 

Code à utiliser:

.grecaptcha-badge { 
    visibility: hidden;
}

Lorsque vous masquez l'icône du badge, Google vous demande de référencer leur service sur votre formulaire en ajoutant ceci:

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

Example result

38
Helenesh

Depuis, le fait de cacher le badge n’est pas vraiment légitime selon le TOU et que les options de placement existantes cassaient mon interface utilisateur et/ou UX, j'ai proposé la personnalisation suivante qui imite le positionnement fixe, mais qui est restituée en ligne:

 Collapsible "invisible" captcha

Il vous suffit d’appliquer du code CSS sur votre conteneur de badges:

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

Je pense que c'est aussi loin que vous pouvez légalement Pousser.

11
krukid

J'ai décidé de masquer le badge sur toutes les pages sauf ma page de contact (à l'aide de 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;
}

Je ne suis pas un développeur Web, alors corrigez-moi s'il y a un problème.

EDIT: mis à jour pour utiliser la visibilité au lieu de l'affichage.

8
Leon

Google indique à présent "Vous êtes autorisé à masquer le badge tant que vous incluez la marque reCAPTCHA de manière visible dans le flux d'utilisateurs". Lien

8
codesmith

Ma solution consistait à masquer le badge, puis à l'afficher lorsque l'utilisateur se concentrait sur la saisie d'un formulaire - respectant ainsi les conditions d'utilisation de Google.

Remarque: Le reCAPTCHA que je modifiais avait été généré par un plugin WordPress, vous devrez donc peut-être envelopper le reCAPTCHA avec un <div class="inv-recaptcha-holder"> ... </div> vous-même.

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

Évidemment, vous pouvez modifier le sélecteur jQuery pour cibler des formulaires spécifiques si nécessaire.

3
Andy P

Pour les utilisateurs de Contact Form 7 sur Wordpress, cette méthode fonctionne pour moi: Je cache la v3 Recaptcha sur toutes les pages, à l'exception de celles avec Contact 7 Forms. 

Mais cette méthode devrait fonctionner sur tout site sur lequel vous utilisez un sélecteur de classe unique, capable d'identifier toutes les pages contenant des éléments de formulaire de saisie de texte. 

Tout d'abord, j'ai ajouté une règle de style cible en CSS qui permet de réduire la mosaïque:

CSS

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

Ensuite, j'ai ajouté le script JQuery dans mon en-tête à déclencher après le chargement de la fenêtre afin que le sélecteur de classe 'grecaptcha-badge' soit disponible pour JQuery et que je puisse ajouter la classe 'hide' pour appliquer le style CSS disponible. 

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

Ma vignette continuera de clignoter sur chaque page pendant une demi-seconde, mais c'est la meilleure solution de contournement que j'aie trouvée jusqu'à présent et que j'espère conforme. Suggestions d'amélioration appréciées. 

2
Matthew Dowell

cela ne désactive pas la vérification du spam

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

Si vous utilisez la mise à jour du formulaire de contact 7 et la dernière version (version 5.1.x), vous devez installer et configurer Google reCAPTCHA v3.

par défaut, le logo Google reCAPTCHA est affiché sur chaque page en bas à droite de l'écran. C'est selon notre évaluation créer une mauvaise expérience pour les utilisateurs. Et votre site Web et votre blog ralentiront un peu (refléter par PageSpeed ​​Score), votre site Web devra charger 1 bibliothèque JavaScript supplémentaire dans Google pour afficher ce badge.

Vous pouvez masquer Google reCAPTCHA v3 de CF7 (ne le montrez que si nécessaire) en procédant comme suit:

Commencez par ouvrir le fichier functions.php de votre thème (à l’aide du Gestionnaire de fichiers ou du client FTP). Ce fichier est situé dans: /wp-content/themes/your-theme/ et ajoutez l’extrait de code suivant (nous utilisons ce code pour supprimer la boîte reCAPTCHA sur chaque page):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Ensuite, vous allez ajouter cet extrait de code dans la page où vous souhaitez afficher Google reCAPTCHA (page de contact, connexion, page d’enregistrement…):

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

Reportez-vous au blog OIW - Comment faire pour supprimer le logo reCAPTCHA de Google du formulaire de contact 7 dans WordPress (masquer le badge reCAPTCHA)

2
OIW

J'ai vu le commentaire suivant à ce sujet

Il est également utile de placer le badge en ligne si vous souhaitez lui appliquer votre propre code CSS. Mais rappelez-vous que vous avez accepté d'afficher les conditions d'utilisation de Google lorsque vous vous êtes inscrit pour une clé API. Ne le cachez donc pas. Et s'il est possible de faire disparaître complètement le badge avec CSS, nous ne le recommandons pas.

1
Eugen Konkov

Une légère variante du message de Matthew Dowell qui évite le flash bref, mais qui apparaît chaque fois que le formulaire de contact 7 est visible:

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

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

J'ai ensuite ajouté ce qui suit au header.php de mon thème enfant:

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

Pour ceux qui ne comprennent pas le code ...

Il y a un plugin pour cela:

https://wordpress.org/plugins/hide-google-captcha-badge

Cela fonctionne, je ne reçois pas de spam et je reçois des courriels.

0
Amouratoglou

Formulaire de contact Recaptcha 7 et solution Recaptcha v3. 

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

Plus d'une page de formulaire de contact? 

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

Vous pouvez ajouter plus de “nots” si vous avez plus de pages de formulaire de contact. 

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

Assurez-vous que votre section du corps va aimer ceci: 

<body>

Changez-le pour qu'il ressemble à ceci: 

 <body <?php body_class(); ?>>
0
Bijaya Kumar Oli