reCAPTCHA w wersji 3

reCAPTCHA w wersji 3 zwraca wynik dla każdego żądania bez utrudniania działania użytkownika. Wynik jest obliczany na podstawie interakcji z Twoją witryną i pozwala na podjęcie odpowiednich działań w witrynie. Zarejestruj klucze reCAPTCHA w wersji 3 w konsoli administracyjnej ReCAPTCHA.

Z tego artykułu dowiesz się, jak włączyć i dostosować reCAPTCHA w wersji 3 na swojej stronie internetowej.

Miejsce docelowe w witrynie

reCAPTCHA w wersji 3 nigdy nie przerywa użytkownikom korzystania z usługi, więc możesz ją uruchamiać w dowolnym momencie bez wpływu na konwersje. reCAPTCHA działa najlepiej, gdy ma największy kontekst dotyczący interakcji z Twoją witryną, co wynika zarówno z prawidłowego, jak i nieodpowiedniego zachowania. Dlatego zalecamy stosowanie weryfikacji reCAPTCHA w formularzach lub działaniach oraz w tle stron na potrzeby analiz.

Możesz wykonać reCAPTCHA na dowolnej liczbie działań na tej samej stronie.

Automatyczne wiązanie wyzwania do przycisku

Najprostszą metodą korzystania z reCAPTCHA w wersji 3 na stronie jest dołączenie niezbędnych zasobów JavaScript i kilku atrybutów do przycisku HTML.

  1. Wczytaj interfejs JavaScript API.

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

  2. Dodaj funkcję wywołania zwrotnego do obsługi tokena.

     <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ływanie wyzwania

Jeśli chcesz mieć większą kontrolę nad tym, kiedy uruchamia się reCAPTCHA, możesz użyć metody execute w obiekcie grecaptcha. W tym celu musisz dodać do wczytywania skryptu reCAPTCHA parametr render.

  1. Wczytaj interfejs JavaScript API przy użyciu klucza witryny.

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

  2. Wywołuj funkcję grecaptcha.execute w przypadku 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 żądaniem weryfikacji.

Interpretacja wyniku

reCAPTCHA w wersji 3 zwraca wynik (prawdopodobnie prawidłową interakcję to 1,0, a 0,0 – z dużym prawdopodobieństwem, że to bot). W zależności od wyniku możesz podejmować różne działania w kontekście swojej witryny. Każda witryna jest inna, ale poniżej podajemy kilka przykładów wykorzystania wyniku w witrynach. Tak jak w poniższych przykładach, lepiej działaj za kulisami, zamiast blokować ruch, aby lepiej chronić swoją witrynę.

Przypadek użycia Rekomendacja
strona główna Sprawdzaj spójny obraz ruchu w konsoli administracyjnej podczas filtrowania danych z aplikacji wyodrębniających dane.
logowanie W przypadku niskich wyników wymagaj uwierzytelniania dwuskładnikowego lub potwierdzania adresu e-mail, aby zapobiec atakom polegającym na upychaniu danych logowania.
media społecznościowe Ogranicz zaproszenia do znajomych, na które nie ma odpowiedzi od użytkowników naruszających zasady, i wysyłaj ryzykowne komentarze do moderacji.
handel elektroniczny Wyprzedź prawdziwą sprzedaż przed botami i identyfikuj ryzykowne transakcje.

reCAPTCHA uczy się na podstawie rzeczywistego ruchu w witrynie. Z tego powodu wyniki w środowisku przejściowym lub krótko po jego wdrożeniu mogą się różnić od wyników w środowisku produkcyjnym. reCAPTCHA w ogóle nie zakłóca procesu użytkownika, więc możesz najpierw uruchomić reCAPTCHA bez podejmowania żadnych działań, a potem określić progi, analizując ruch w konsoli administracyjnej. Domyślnie możesz użyć progu na poziomie 0, 5.

Działania

reCAPTCHA w wersji 3 wprowadza nową koncepcję: działania. Jeśli podasz nazwę działania w każdym miejscu wykonywania reCAPTCHA, włączysz te nowe funkcje:

  • Szczegółowy podział danych dotyczących 10 najczęstszych działań w konsoli administracyjnej
  • Adaptacyjna analiza ryzyka na podstawie kontekstu działania ze względu na różnice w zachowaniach użytkowników.

Ważne jest, aby podczas weryfikowania odpowiedzi reCAPTCHA sprawdź, czy nazwa działania jest zgodna z oczekiwaniami.

Odpowiedź dotycząca weryfikacji witryny

Wyślij żądanie weryfikacji tokena odpowiedzi jako reCAPTCHA v2 lub Invisible 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ę po wczytaniu biblioteki reCAPTCHA. Aby uniknąć wyścigu za pomocą funkcji api.js, umieść przed skryptami wywołującymi grecaptcha symbol api.js lub nadal używaj onload callback zdefiniowanego w interfejsie API w wersji 2.
  2. Spróbuj przyciągnąć wywołanie execute do interesujących lub poufnych działań, takich jak rejestracja, zresetowanie hasła, zakup lub granie.
  3. Użyj https://www.google.com/recaptcha/api.js?trustedtypes=true, aby wczytać kod zgodny z zaufanymi typami.