Niewidoczna reCAPTCHA

Na tej stronie wyjaśniono, jak włączyć i dostosować niewidoczną reCAPTCHA na swojej stronie internetowej.

Aby wywołać niewidoczną funkcję reCAPTCHA, możesz:

Aby dowiedzieć się, jak dostosować niewidoczną funkcję reCAPTCHA, zapoznaj się z sekcją Konfiguracje. Możesz na przykład określić język lub lokalizację plakietki.

Zobacz Weryfikowanie odpowiedzi użytkownika, aby sprawdzić, czy użytkownik rozwiązał zadanie CAPTCHA.

Automatycznie powiąż wyzwanie z przyciskiem

Najprostszą metodą korzystania z niewidocznego widżetu reCAPTCHA na stronie jest dodanie niezbędnego zasobu JavaScript i dodanie kilku atrybutów do przycisku HTML. Niezbędne atrybuty to nazwa klasy „g-recaptcha”, klucz witryny w atrybucie data-sitekey oraz nazwa wywołania zwrotnego JavaScriptu do obsługi testu captcha w atrybucie data-callback.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

Skrypt musi być wczytywany z wykorzystaniem protokołu HTTPS i może być dołączany w dowolnym miejscu na stronie bez ograniczeń.

Automatyczne powiązanie wyzwania z przyciskiem lub wywołaniem wyzwania.

Odroczenie wiązania można uzyskać, określając funkcję wywołania zwrotnego onload i dodając parametry do zasobu JavaScript. Działa to tak samo jak zwykłe zadanie reCAPTCHA.

Wywołaj wyzwanie automatycznie.

Wywołanie weryfikacji reCAPTCHA można uzyskać w sposób zautomatyzowany, renderując zadanie w elemencie div z atrybutem data-size="invisible" i automatycznie wywołując wykonanie.

  1. Utwórz element div z elementem data-size="invisible".

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. Wywołaj grecaptcha.execute z metody JavaScriptu.

    grecaptcha.execute();

    Po wykonaniu wywołania zwrotnego możesz wywołać metodę grecaptcha.render z interfejsu JavaScript API.

Konfiguracja

Parametry zasobów JavaScript (api.js)

Parametr Wartość Opis
onload Opcjonalnie. Nazwa funkcji wywołania zwrotnego, która ma zostać wykonana po wczytaniu wszystkich zależności.
renderować jawny
onload		 Opcjonalnie. Określa, czy widżet ma być renderowany bezpośrednio. Domyślna wartość to onload, co powoduje wyrenderowanie widżetu w pierwszym znalezionym tagu g-recaptcha.
hl Zobacz kody języków Opcjonalnie. Wymusza renderowanie widżetu w określonym języku. Automatycznie wykrywa język użytkownika, jeśli nie jest określony.

Atrybuty tagu g-recaptcha i parametry grecaptcha.render

Atrybut tagu g-recaptcha Parametr grecaptcha.render Wartość Domyślne Opis
klucz witryny danych klucz witryny Twój klucz witryny.
plakietka danych odznaka prawy dolny róg w tekście prawy dolny róg Opcjonalnie. Zmień położenie plakietki reCAPTCHA. Atrybut „inline” pozwala umieścić go w kodzie CSS.
data-size rozmiar niewidoczne Opcjonalnie. Służy do tworzenia niewidocznego widżetu powiązanego z elementem div i wykonywania programowo.
data-tabindex indeks tabulacji 0 Opcjonalnie. Indeks tabulacji wyzwania. Jeśli inne elementy strony używają indeksu tabulacji, należy skonfigurować go w taki sposób, aby ułatwić użytkownikom nawigację.
wywołanie zwrotne danych wywołanie zwrotne Opcjonalnie. Nazwa funkcji wywołania zwrotnego, wykonywanej, gdy użytkownik prześle prawidłową odpowiedź. Do wywołania zwrotnego jest przekazywany token g-recaptcha-response.
wywołanie zwrotne przy wyczerpaniu danych wygasłe wywołanie zwrotne Opcjonalnie. Nazwa funkcji wywołania zwrotnego, która jest wykonywana, gdy odpowiedź reCAPTCHA wygaśnie i użytkownik musi ponownie przeprowadzić weryfikację.
wywołanie zwrotne błędu danych wywołanie zwrotne błędu Opcjonalnie. Nazwa funkcji wywołania zwrotnego, która jest wykonywana, gdy reCAPTCHA napotka błąd (zwykle jest to połączenie sieciowe), i nie może być kontynuowana, dopóki połączenie nie zostanie przywrócone. Jeśli określisz funkcję tutaj, Twoim obowiązkiem jest poinformowanie użytkownika, że powinien ponowić próbę.
izolowane false Opcjonalnie. Dla właścicieli wtyczek, aby nie zakłócały istniejących instalacji reCAPTCHA na stronie. Jeśli ma wartość true (prawda), ta instancja reCAPTCHA będzie częścią oddzielnej przestrzeni identyfikatorów.

JavaScript API

Metoda Opis
grecaptcha.render(
)
kontener,
parametry,
odziedzicz
) 		Renderuje kontener jako widżet reCAPTCHA i zwraca identyfikator nowo utworzonego widżetu.
Kontener
Element HTML służący do renderowania widżetu reCAPTCHA. Podaj identyfikator kontenera (ciąg znaków) lub sam element DOM.
parametry
Obiekt zawierający parametry w postaci par klucz=wartość, np. {"sitekey": "your_site_key", "theme": "light"}. Zobacz parametry grecaptcha.render.
dziedzicz
Jeśli nie określisz odpowiadającego mu parametru, użyj dotychczasowych atrybutów data-* w elemencie. Parametry będą miały pierwszeństwo przed atrybutami.
grecaptcha.execute(
opt_widget_id
) 		Automatycznie wywołaj test reCAPTCHA. Używana, jeśli niewidoczny reCAPTCHA znajduje się w elemencie div zamiast przycisku.
opt_widget_id
Opcjonalny identyfikator widżetu; domyślnie ustawiany jest pierwszy widżet, jeśli nie został on określony.
grecaptcha.reset(
)
opt_widget_id
) 		Resetuje widżet reCAPTCHA.
opt_widget_id
Opcjonalny identyfikator widżetu; domyślnie ustawiany jest pierwszy widżet, jeśli nie został on określony.
grecaptcha.getResponse(
)
opt_widget_id
) 		Pobiera odpowiedź dla widżetu reCAPTCHA.
opt_widget_id
Opcjonalny identyfikator widżetu; domyślnie ustawiany jest pierwszy widżet, jeśli nie został on określony.

Przykłady

Jawne renderowanie po wywołaniu zwrotnym onload

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Wywoływanie niewidocznego testu reCAPTCHA po weryfikacji po stronie klienta.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>