reCAPTCHA w wersji 3

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.

  1. Wczytaj kod JavaScript API.

     <script src="https://www.google.com/recaptcha/api.js"></script>

  2. Dodaj funkcję wywołania zwrotnego, która będzie obsługiwać token.

     <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

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

  1. Wczytaj kod JavaScript API za pomocą klucza witryny.

    <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

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

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

  1. grecaptcha.ready() uruchamia funkcję podczas wczytywania biblioteki reCAPTCHA. Aby uniknąć warunków działania wyścigu za pomocą metody api.js, umieść przed api.js skrypty, które wywołują grecaptcha, lub nadal używaj wywołania zwrotnego podczas ładowania zdefiniowanego za pomocą interfejsu API w wersji 2.
  2. Spróbuj nawiązać wywołanie execute do interesujących lub poufnych działań, takich jak rejestracja, zresetowanie hasła, zakup czy granie.
  3. Użyj https://www.google.com/recaptcha/api.js?trustedtypes=true, aby wczytać kod zgodny z typami zaufanych.