reCAPTCHA w wersji 3 zwraca wynik każdego żądania bez utrudniania życia użytkownikowi. Jest on obliczany na podstawie interakcji z witryną i umożliwia podjęcie odpowiednich działań. Zarejestruj klucze reCAPTCHA v3 w konsoli administracyjnej reCAPTCHA.
Z tego artykułu dowiesz się, jak włączyć i dostosować reCAPTCHA v3 na swojej stronie internetowej.
Miejsce docelowe w Twojej witrynie
reCAPTCHA w wersji 3 nigdy nie zakłóca użytkownikom działania, więc można uruchomić je w dowolnym momencie bez wpływu na konwersje. reCAPTCHA działa najlepiej, gdy ma najbardziej kontekstowy kontekst dotyczący interakcji z witryną, ponieważ dochodzi do niej zarówno w sposób prawidłowy, jak i nieodpowiedni. Z tego powodu zalecamy włączenie weryfikacji reCAPTCHA w formularzach lub działaniach, a także w tle stron analizy.
Na tej samej stronie możesz wykonać reCAPTCHA na dowolną liczbę działań.
Automatyczne powiązanie wyzwania z przyciskiem
Najprostszym sposobem korzystania z reCAPTCHA v3 na stronie jest dodanie niezbędnego zasobu JavaScript i dodanie kilku atrybutów do przycisku HTML.
Wczytaj kod JavaScript API.
<script src="https://www.google.com/recaptcha/api.js"></script>
Dodaj funkcję wywołania zwrotnego, która będzie obsługiwać token.
<script> function onSubmit(token) { document.getElementById("demo-form").submit(); } </script>
Dodaj atrybuty do przycisku HTML.
<button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key" data-callback='onSubmit' data-action='submit'>Submit</button>
Automatyczne wywołanie wyzwania
Jeśli chcesz mieć większą kontrolę nad uruchamianiem reCAPTCHA, możesz użyć metody execute
w obiekcie grecaptcha
. Aby to zrobić, musisz dodać parametr render
do wczytywania skryptu reCAPTCHA.
Wczytaj kod JavaScript API za pomocą klucza witryny.
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
Wywołaj
grecaptcha.execute
dla każdego działania, które chcesz chronić.<script> function onClick(e) { e.preventDefault(); grecaptcha.ready(function() { grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) { // Add your logic to submit to your backend server here. }); }); } </script>
Natychmiast wyślij token do backendu z prośbą o weryfikację.
Interpretacja wyniku
reCAPTCHA v3 zwraca wynik (1,0 wskazuje z dużym prawdopodobieństwem na prawidłową interakcję, 0,0 to najprawdopodobniej bot). Na podstawie wyniku możesz podejmować zmienne działania w kontekście swojej witryny. Każda witryna jest inna, ale poniżej przedstawiamy kilka przykładów wykorzystania wyniku w witrynie. Tak jak w przykładach poniżej, aby lepiej chronić witrynę, zamiast blokować ruch, rób to w tle.
Zastosowanie | Rekomendacja |
---|---|
strona główna | Dzięki filtrowi danych możesz uzyskać spójny widok ruchu w konsoli administracyjnej. |
login | W przypadku niskich wyników wymagaj uwierzytelniania dwuskładnikowego lub weryfikacji e-mail, aby zapobiec atakom upychania danych logowania. |
media społecznościowe | Ogranicz zaproszenia bez odpowiedzi od użytkowników, którzy naruszają zasady, i wysyłaj ryzykowne komentarze do moderacji. |
handel elektroniczny | Wyróżnij swoje prawdziwe transakcje sprzedaży i zidentyfikuj ryzykowne transakcje. |
reCAPTCHA uczy się, sprawdzając rzeczywisty ruch w witrynie. Z tego powodu wyniki w środowisku przejściowym lub krótko po wdrożeniu mogą się różnić od wyników w środowisku produkcyjnym. Ponieważ reCAPTCHA w wersji 3 nigdy nie zakłóca przepływu użytkowników, możesz najpierw uruchomić reCAPTCHA bez podejmowania żadnych działań, a następnie wybrać progi, sprawdzając ruch w konsoli administracyjnej. Domyślnie możesz ustawić próg na wartość 0, 5.
Działania
reCAPTCHA w wersji 3 przedstawia nowy pomysł: działania. Określając nazwę działania w każdym miejscu, w którym uruchamiasz reCAPTCHA, włączasz następujące nowe funkcje:
- Szczegółowy podział danych na temat 10 najczęstszych działań w konsoli administracyjnej
- Adaptacyjna analiza ryzyka oparta na kontekście czynności, ponieważ nadużycia mogą się różnić.
Co ważne, gdy weryfikujesz odpowiedź reCAPTCHA, sprawdź, czy nazwa działania jest oczekiwana.
Odpowiedź dotycząca weryfikacji witryny
Poproś o weryfikację tokena odpowiedzi, tak jak w przypadku reCAPTCHA v2 lub niewidocznego reCAPTCHA.
Odpowiedź to obiekt JSON:
{
"success": true|false, // whether this request was a valid reCAPTCHA token for your site
"score": number // the score for this request (0.0 - 1.0)
"action": string // the action name for this request (important to verify)
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
Wskazówki
grecaptcha.ready()
uruchamia funkcję podczas wczytywania biblioteki reCAPTCHA. Aby uniknąć warunków działania wyścigu za pomocą metodyapi.js
, umieść przedapi.js
skrypty, które wywołują grecaptcha, lub nadal używaj wywołania zwrotnego podczas ładowania zdefiniowanego za pomocą interfejsu API w wersji 2.- Spróbuj nawiązać wywołanie
execute
do interesujących lub poufnych działań, takich jak rejestracja, zresetowanie hasła, zakup czy granie. - Użyj
https://www.google.com/recaptcha/api.js?trustedtypes=true
, aby wczytać kod zgodny z typami zaufanych.