Jak ukryć plakietkę Google Invisible reCAPTCHA

157

Podczas wdrażania nowego Google Invisible reCATPTCHA, domyślnie otrzymujesz małą plakietkę „chronione przez reCAPTCHA” w prawym dolnym rogu ekranu, która wyskakuje po najechaniu na nią.

wprowadź opis obrazu tutaj

Chciałbym to ukryć.

James Law
źródło

Odpowiedzi:

218

Google pozwala teraz ukryć plakietkę z FAQ :

Chciałbym ukryć plakietkę reCAPTCHA v3. Co jest dozwolone?

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.

Na przykład:

wprowadź opis obrazu tutaj

Możesz więc po prostu ukryć to za pomocą następującego kodu CSS:

.grecaptcha-badge { 
    visibility: hidden;
}

wprowadź opis obrazu tutajNie używaj, display: none;jak się wydaje, aby wyłączyć sprawdzanie spamu (dzięki @Zade)

Yann39
źródło
24
Nie ośmieliłbym się mówić Ci, co masz robić;) Po prostu ostrzegam innych użytkowników, że usunięcie go może być nielegalne.
Yann39
16
jest to całkowicie nie do przyjęcia, ponieważ na małych ekranach, takich jak telefony komórkowe, ta plakietka zajmuje znaczną część strony internetowej.
Don Dilanga
12
Zaakceptuj to lub wybierz inną usługę. Google ma pełne prawo wymagać, abyś pokazywał markę ich bezpłatnej usługi. Możesz nawet zmienić położenie plakietki, tak aby było zgodne z formularzem developers.google.com/recaptcha/docs/invisible#render_param .
Alexander Otavka,
1
Cóż, używam tego captcha v3 tylko na mojej stronie formularza kontaktowego. Jest to więc jedyna strona, na której chcę wyświetlać tę plakietkę. Nie ma zastosowania w innym miejscu mojej witryny. Możliwy?
Andrew Truckle,
4
@ Yann39 - zaktualizuj swoją odpowiedź. Dobrze jest to ukryć i np. Dodać tylko do strony kontaktowej: developers.google.com/recaptcha/docs/faq
Sol
172

Przetestowałem wszystkie podejścia i:

OSTRZEŻENIE: display: none WYŁĄCZA sprawdzanie spamu!

visibility: hiddeni opacity: 0NIE wyłączaj sprawdzania spamu.

Kod do użycia:

.grecaptcha-badge { 
    visibility: hidden;
}

Podczas ukrywania ikony badge, Google chce Ci odwołać swoje usługi na formularzu, dodając w ten sposób:

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

Przykładowy wynik

Helenesh
źródło
6
Ta odpowiedź musi być wyżej! Zawiera wszystkie informacje niezbędne do rozwiązania w zwięzły sposób.
Björn Larsson
3
Dokładnie to, czego szukałem i działa świetnie. Również dla każdego, kto szuka dowodu, że jest to dozwolone, sprawdź tę stronę (jeśli jeszcze tego nie widziałeś w tym wątku SO) developers.google.com/recaptcha/docs/faq
Jake
Dzięki za wspomnienie o tym @Jake. Dodałem to do mojej odpowiedzi.
Helenesh
Czy ktoś znalazł udokumentowany sposób na ukrycie plakietki zamiast włamania do CSS? Google oferuje alternatywny sposób pokazania ich marki, ale nie mogę znaleźć obsługiwanej metody ukrywania ich logo.
Collin Price
38

Ustaw data-badgeatrybut nainline

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

I dodaj następujący CSS

.grecaptcha-badge {
    display: none;
}
James Law
źródło
7
Bądź ostrożny; wydaje się, że wyłącza to sprawdzanie spamu.
Zade
3
Czy to naprawdę wyłącza sprawdzanie spamu? Jeśli tak, po co te wszystkie głosy za?
Charlie Schliesser
1
@Zade może zamiast tego użyć opacity: 0lub visibility: hidden? też masz link do tego, gdzie to statystyki?
ctf0
4
Umowa użytkownika mówi, że musisz poinformować użytkowników, jak mówi @ Yann39 powyżej.
Mihail Minkov
1
@Helenesh wart osobnej odpowiedzi?
Anupam
14

Google mówi teraz: „Możesz ukryć plakietkę, o ile w przepływie użytkowników uwzględnisz markę reCAPTCHA w widoczny sposób”. Połączyć

Codesmith
źródło
2
Dotyczy tylko wersji 3! wersja 2 nadal wymaga okazania plakietki. :(
ADTC
13

Ponieważ ukrywanie plakietki nie jest tak naprawdę uzasadnione zgodnie z warunkami korzystania z usługi, a istniejące opcje umieszczania łamały mój interfejs użytkownika i / lub UX, wymyśliłem następujące dostosowanie, które naśladuje ustalone położenie, ale zamiast tego jest renderowane w tekście:

Zwijana „niewidoczna” captcha

Wystarczy, że zastosujesz CSS do kontenera odznaki:

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

Myślę, że to tak daleko, jak możesz to legalnie popchnąć.

krukid
źródło
1
Miły. Pchnąłem to jeszcze dalej (bez całkowitego ukrywania) za pomocą transform: scale(0.6)iopacity: 0.6
squarecandy
Czy jesteś w stanie otworzyć niebieski baner po prawej stronie niż po lewej? Dostosuj również jego kolorystykę?
Vaishal Patel
@VaishalPatel w teorii, tak, ale są dwie wady: po pierwsze, modyfikowanie natywnego projektu plakietki jest odradzane przez Google, a po drugie, im więcej założeń dotyczących istniejącego projektu wprowadzasz w swoich zmianach, tym bardziej kruche staje się Twoje rozwiązanie - pamiętaj o Google może dowolnie zmieniać style i układ plakietek, kiedy tylko zechce.
krukid
1
@krukid Wybrałem ich domyślny styl wbudowany.
Vaishal Patel
9

Zdecydowałem się ukryć odznakę na wszystkich stronach z wyjątkiem mojej strony kontaktowej (używając 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;
}

Nie jestem programistą stron internetowych, więc proszę, popraw mnie, jeśli coś jest nie tak.

EDYCJA: Zaktualizowano, aby używać widoczności zamiast wyświetlania.

Leon
źródło
to zadziała, ale strona-id- # jest specyficzna dla Twojej witryny, więc każdy, kto go używa, będzie musiał dostosować identyfikator, aby pasował do strony, na której chce wyświetlać. || Widziałem raporty mówiące, że robię to wyświetlanie: brak; wyłączy również sprawdzanie, ale nie jestem teraz tego pewien.
Michael Tunnell,
Ostrożny! To wyłącza sprawdzanie spamu. Sprawdź moją odpowiedź, aby uzyskać więcej informacji
Helenesh
Zaktualizowano na podstawie powyższych komentarzy Michaela i Helenesh
Leon
4

Niewielki wariant postu Matthew Dowella, który unika krótkiego błysku, ale wyświetla się, gdy widoczny jest formularz kontaktowy 7:

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

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

Następnie dodałem do pliku header.php w moim motywie potomnym:

<script>
jQuery( window ).load(function () { 
    if( jQuery( '.wpcf7' ).length ){ 
        jQuery( '.grecaptcha-badge' ).addClass( 'show' );
    }
});
</script>
Nigel Dyer
źródło
3

Moim rozwiązaniem było ukrycie plakietki, a następnie wyświetlenie jej, gdy użytkownik koncentruje się na danych wejściowych formularza - w ten sposób nadal przestrzegając warunków Google.

Uwaga: reCAPTCHA, który modyfikowałem, zostało wygenerowane przez wtyczkę WordPress, więc może być konieczne owinięcie reCAPTCHA <div class="inv-recaptcha-holder"> ... </div>własnym.

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

Oczywiście w razie potrzeby można zmienić selektor jQuery na określone formularze.

Andy P.
źródło
3

Dla użytkowników Contact Form 7 na Wordpress ta metoda działa dla mnie: ukrywam wersję v3 Recaptcha na wszystkich stronach z wyjątkiem tych z Contact 7 Forms.

Ale ta metoda powinna działać w każdej witrynie, w której używasz unikalnego selektora klasy, który może identyfikować wszystkie strony z elementami formularza wprowadzania tekstu.

Najpierw dodałem docelową regułę stylu w CSS, która może zwinąć kafelek:

CSS

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

Następnie dodałem skrypt JQuery w moim nagłówku, aby uruchamiał się po załadowaniu okna, więc selektor klasy „grecaptcha-badge” jest dostępny dla JQuery i mogę dodać klasę „hide”, aby zastosować dostępny styl CSS.

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

Mój kafelek nadal będzie migał na każdej stronie przez pół sekundy, ale jest to najlepsze obejście, jakie znalazłem do tej pory, i mam nadzieję, że będzie zgodne. Mile widziane sugestie dotyczące ulepszeń.

Matthew Dowell
źródło
2

nie wyłącza to sprawdzania spamu

div.g-recaptcha > div.grecaptcha-badge {
    width:0 !important;
}
Mqtthieu
źródło
2

Jeśli korzystasz z aktualizacji Formularza kontaktowego 7 i najnowszej wersji (wersja 5.1.x), musisz zainstalować, skonfigurować Google reCAPTCHA v3 do użycia.

Domyślnie logo Google reCAPTCHA jest wyświetlane na każdej stronie w prawym dolnym rogu ekranu. Według naszej oceny powoduje to złe wrażenia dla użytkowników. Twoja witryna, blog, nieco spowolni (odzwierciedla to wynik PageSpeed), a Twoja witryna będzie musiała załadować dodatkową 1 bibliotekę JavaScript z Google, aby wyświetlić tę plakietkę.

Możesz ukryć Google reCAPTCHA v3 przed CF7 (pokazać je tylko wtedy, gdy jest to konieczne), wykonując następujące kroki:

Najpierw otwórz functions.phpplik swojego motywu (za pomocą Menedżera plików lub klienta FTP). Ten plik znajduje się w: /wp-content/themes/your-theme/i dodaj następujący fragment (używamy tego kodu do usuwania pola reCAPTCHA na każdej stronie):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Następnie dodasz ten fragment kodu na stronie, na której ma wyświetlać Google reCAPTCHA (strona kontaktowa, login, strona rejestracji…):

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

Zapoznaj się z blogiem OIW - Jak usunąć logo Google reCAPTCHA z formularza kontaktowego 7 w WordPress (Ukryj znaczek reCAPTCHA)

OIW
źródło
2

Tak, możesz to zrobić . możesz użyć css lub javascript, aby ukryć znaczek reCaptcha v3.

  1. Sposób CSS - użyj display: nonelub visibility: hiddendo ukrycia partii reCaptcha. To łatwe i szybkie.
.grecaptcha-badge {
    display:none !important;
}
  1. Sposób Javascript
var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

Ukrycie plakietki jest ważne, zgodnie z polityką Google, a odpowiedź znajduje się w FAQ tutaj . Zaleca się wyświetlenie polityki prywatności i warunków korzystania z Google, jak pokazano poniżej.

zasady i warunki korzystania z Google

Kiran Maniya
źródło
1
„nie querySelect”, ale „querySelector”.
Keisuke Nagakawa
1
@ 永川 圭介 dzięki za powrót do literówki.
Kiran Maniya
1

Widziałem następny komentarz na ten temat

Warto również umieścić odznakę w tekście, jeśli chcesz zastosować do niej własny arkusz CSS. Pamiętaj jednak, że zgodziłeś się pokazać Warunki korzystania z usługi Google podczas rejestracji klucza API - więc nie ukrywaj tego, proszę. I chociaż możliwe jest całkowite zniknięcie plakietki za pomocą CSS, nie zalecamy tego.

Eugen Konkov
źródło
0

Uwaga: jeśli zdecydujesz się ukryć odznakę, użyj
.grecaptcha-badge { visibility: hidden; }

Możesz ukryć odznakę, o ile w przepływie użytkowników uwzględnisz branding reCAPTCHA w widoczny sposób. Prosimy o dołączenie następującego tekstu:

Ta strona jest chroniona przez reCAPTCHA i Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.

więcej szczegółów tutaj reCaptacha

Mohsin Saeed
źródło
-1

Formularz kontaktowy Recaptcha 7 i rozwiązanie Recaptcha v3.

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

Więcej niż jedna strona formularza kontaktowego?

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

Możesz dodać więcej „nie”, jeśli masz więcej stron formularza kontaktowego.

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

Upewnij się, że twoja sekcja ciała będzie się podobać:

<body>

Zmień to tak, aby wyglądało tak:

 <body <?php body_class(); ?>>
Bijaya Kumar Oli
źródło
Proszę o inne odpowiedzi, nie wyświetlaj żadnych wyłącza sprawdzanie spamu.
Helenesh
@Helenesh co to jest sprawdzanie spamu i jaki jest związek z dodaniem stylu CSS?
Berkant Ipek