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 zakłóca pracy użytkowników, więc możesz go uruchomić w dowolnym momencie, bez wpływu na działanie usług. konwersji. reCAPTCHA działa najlepiej, gdy ma największy kontekst dotyczący interakcji z Twoją witryną, które wynika z prawidłowego i nieodpowiedniego zachowania. Z tego powodu zalecamy w tym weryfikację reCAPTCHA w formularzach lub działaniach, a także w tle stron Analytics.

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

Automatyczne wiązanie wyzwania do przycisku

Najłatwiejszą metodą korzystania z reCAPTCHA w wersji 3 na stronie jest dodanie parametru zasobów JavaScript i dodać kilka 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ć Metoda execute w obiekcie grecaptcha. Aby to zrobić: musisz dodać parametr render do wczytywania skryptu reCAPTCHA.

  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 do 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 inny. Poniżej podajemy kilka przykładów użycia tego wyniku w witrynach. Tak jak w przykładach poniżej, za kulisy zamiast blokować ruch i lepiej chronić 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 na etapie przejściowym lub wkrótce po wdrożeniu mogą być inne niż w środowisku produkcyjnym. Ponieważ reCAPTCHA v3 jeszcze nigdy nie Aby przerwać przepływ użytkownika, możesz najpierw uruchomić reCAPTCHA bez podejmowania działań, a następnie zdecydować: progi, sprawdzając natężenie ruchu w konsoli administracyjnej. Według domyślnie można użyć progu wynoszącego 0, 5.

Działania

reCAPTCHA w wersji 3 wprowadza nową koncepcję: działania. Gdy podasz nazwę działania w każdym miejscu, w którym wykonujesz reCAPTCHA, włączasz te nowe funkcje:

  • Szczegółowy podział danych dotyczących 10 najczęstszych działań w konsola administracyjna
  • Adaptacyjna analiza ryzyka na podstawie kontekstu działania ze względu na nadużycia ich zachowanie może być różne.

Ważne jest, aby podczas weryfikowania odpowiedzi reCAPTCHA upewnij się, nazwa działania to oczekiwana nazwa.

Odpowiedź dotycząca weryfikacji witryny

Wyślij żądanie weryfikacji tokena odpowiedzi tak, jak w przypadku reCAPTCHA w wersji 2 lub Niewidoczna 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. Do unikaj warunków wyścigowych z użyciem marki api.js, uwzględnij api.js przed skrypty wywołujące grecaptcha lub nadal używające onload wywołanie zwrotne zdefiniowane w interfejsie API w wersji 2.
  2. Spróbuj przyciągnąć uwagę użytkownika execute do interesujących lub wrażliwych działań, takich jak Zarejestruj się, zresetuj hasło, kup lub graj.
  3. https://www.google.com/recaptcha/api.js?trustedtypes=true – do wczytuj kod zgodny z zaufanymi typami.