Niewidoczna reCAPTCHA

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

Aby wywołać niewidoczną usługę reCAPTCHA, wykonaj jedną z tych czynności:

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

Aby sprawdzić, czy użytkownik poprawnie rozwiązał CAPTCHA, zapoznaj się z artykułem Weryfikowanie odpowiedzi użytkownika.

Automatyczne wiązanie wyzwania do przycisku

Najprostszym sposobem użycia niewidocznego widżetu reCAPTCHA na stronie jest uwzględnienie niezbędnego zasobu JavaScriptu i dodanie kilku atrybutów do przycisku HTML. Wymagane atrybuty to nazwa klasy „g-recaptcha”, klucz witryny w atrybucie data-sitekey i nazwa funkcji zwracającej JavaScript, która obsługuje wypełnienie pola 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 użyciem protokołu HTTPS i może być uwzględniony w dowolnym miejscu na stronie bez ograniczeń.

Automatycznie powiąż wyzwanie z przyciskiem lub wywołaj wyzwanie.

Opóźnienie 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łać wyzwanie programowo.

Aby wywołać weryfikację reCAPTCHA programowo, należy wyrenderować wyzwanie w elemencie div z atrybutem data-size="invisible" i wywołać metodę execute.

  1. Utwórz element div za pomocą parametru 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 JavaScript.

    grecaptcha.execute();

    Po wykonaniu wywołania zwrotnego możesz wywołać metodę grecaptcha.render za pomocą JavaScript API.

Konfiguracja

Parametry zasobu JavaScript (api.js)

Parametr Wartość Opis
onload Opcjonalnie: Nazwa funkcji wywołania zwrotnego, która ma zostać wykonana po wczytaniu wszystkich zależności.
render explicit
onload		 Opcjonalnie: Określa, czy widżet ma być renderowany jawnie. Wartość domyślna to onload, co powoduje renderowanie 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 został określony.

Atrybuty tagu g-recaptcha i parametry grecaptcha.render

Atrybut tagu g-recaptcha Parametr grecaptcha.render Wartość Domyślny Opis
data-sitekey sitekey Twój klucz witryny.
data-badge odznaka śródtekstowy w prawym dolnym rogu bottomright Opcjonalnie: Zmień położenie plakietki reCAPTCHA. Opcja „wstawione” umożliwia umieszczenie go za pomocą kodu CSS.
data-size rozmiar niewidoczne Opcjonalnie: Służy do tworzenia niewidocznego widżetu powiązanego z elementem div i wykonywanego programowo.
data-tabindex tabindex 0 Opcjonalnie: Indeks karty wyzwania. Jeśli inne elementy strony korzystają z indeksu tabindex, powinien być on ustawiony tak, by ułatwić użytkownikom nawigację.
data-callback wywołanie zwrotne Opcjonalnie: Nazwa funkcji wywołania zwrotnego wykonywanej, gdy użytkownik prześle pomyślną odpowiedź. Token g-recaptcha-response jest przekazywany do funkcji wywołania zwrotnego.
data-expired-callback expired-callback Opcjonalnie: Nazwa funkcji wywołania zwrotnego, która jest wykonywana, gdy odpowiedź reCAPTCHA wygaśnie i użytkownik musi ponownie przejść weryfikację.
data-error-callback error-callback Opcjonalnie: Nazwa funkcji wywołania zwrotnego, która jest wykonywana, gdy reCAPTCHA napotka błąd (zwykle połączenie sieciowe) i nie będzie kontynuować, dopóki połączenie nie zostanie przywrócone. Jeśli określisz tutaj funkcję, musisz poinformować użytkownika, że powinien spróbować ponownie.
pojedyncze fałsz Opcjonalnie: Aby właściciele wtyczek nie mogli zakłócać działania istniejących instalacji reCAPTCHA na stronie. Jeśli to pole ma wartość true (prawda), instancja reCAPTCHA będzie należeć do osobnego obszaru identyfikatorów.

JavaScript API

Metoda Opis
grecaptcha.render (
kontener,
parametrów
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. Określ identyfikator kontenera (ciąg znaków) lub sam element DOM.
parameters
Obiekt zawierający parametry w postaci par klucz-wartość, np. {"sitekey": "your_site_key", "theme": "light"}. Zobacz parametry grecaptcha.render.
odziedziczone
Użyj istniejących atrybutów danych-* w elemencie, jeśli nie jest określony odpowiedni parametr. Parametry mają pierwszeństwo przed atrybutami.
grecaptcha.execute(
opt_widget_id
) 		wywołać weryfikację reCAPTCHA za pomocą kodu; Używany, jeśli niewidoczna reCAPTCHA znajduje się w elemencie div zamiast w przycisku.
opt_widget_id
Identyfikator opcjonalnego widżetu. Jeśli nie zostanie określony, domyślnie zostanie wybrany pierwszy utworzony widget.
grecaptcha.reset(
opt_widget_id
) 		Resetuje widżet reCAPTCHA.
opt_widget_id
Identyfikator opcjonalnego widżetu. Jeśli nie określono inaczej, domyślnie jest ustawiany pierwszy widżet.
grecaptcha.getResponse(
opt_widget_id
) 		Pobiera odpowiedź z widżetu reCAPTCHA.
opt_widget_id
Identyfikator opcjonalnego widżetu. Jeśli nie określono inaczej, domyślnie jest ustawiany pierwszy widżet.

Przykłady

Bezpośrednie renderowanie po wywołaniu zwrotnym przy załadowaniu

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