Niewidoczna reCAPTCHA

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

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

Więcej informacji o dostosowywaniu niewidocznego reCAPTCHA znajdziesz w sekcji Konfiguracje. Możesz na przykład określić język lub lokalizację plakietki.

Zapoznaj się z sekcją Weryfikowanie odpowiedzi użytkownika, aby sprawdzić, czy użytkownik rozwiązał test CAPTCHA.

Automatyczne wiązanie wyzwania do przycisku

Najłatwiejszym sposobem użycia niewidocznego widżetu reCAPTCHA na stronie jest dołączenie 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 i nazwa wywołania zwrotnego JavaScriptu służącego do realizacji polecenia 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.

Powiązanie można odroczyć, określając funkcję wywołania zwrotnego onload i dodając parametry do zasobu JavaScript. Działa to tak samo jak normalne zadanie reCAPTCHA.

Wywołuj wyzwanie programowo.

Weryfikację reCAPTCHA można wywołać automatycznie przez wyrenderowanie testu w elemencie div z atrybutem data-size="invisible" oraz automatyczne wywołanie funkcji Wykonaj.

  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.
renderowanie 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. Jeśli język użytkownika jest nieokreślony, automatycznie wykrywa język.

Atrybuty tagu g-recaptcha i parametry grecaptcha.render

Atrybut tagu g-recaptcha Parametr grecaptcha.render Wartość Domyślny Opis
data-sitekey klucz witryny Twój klucz witryny.
plakietka danych odznaka śródtekstowy w prawym dolnym rogu prawy dolny róg Opcjonalnie: Zmień położenie plakietki reCAPTCHA. „wbudowany” pozwala umieścić ją za pomocą CSS.
rozmiar-danych rozmiar niewidoczne Opcjonalnie: Służy do tworzenia niewidocznego widżetu powiązanego z elementem div i wykonywanego automatycznie.
data-tabindex indeks tabulacji 0 Opcjonalnie: Parametr Tabindex 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 wywołania zwrotnego.
data-expired-callback expired-callback Opcjonalnie: Nazwa funkcji wywołania zwrotnego wykonywanej, gdy odpowiedź reCAPTCHA wygaśnie i użytkownik będzie musiał ponownie przejść weryfikację.
data-error-callback błąd wywołania zwrotnego 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 tu funkcję, odpowiadasz za poinformowanie 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 ma wartość prawda, ta instancja reCAPTCHA będzie częścią osobnej przestrzeni 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 samego elementu DOM.
parametry
Obiekt zawierający parametry w postaci par klucz=wartość, na przykład {"sitekey": "klucz_Twojej_witryny", "theme": "light"}. Zobacz parametry grecaptcha.render.
dziedziczenie
Jeśli odpowiedni parametr nie jest określony, użyj w elemencie istniejących atrybutów data-*. Parametry będą miały pierwszeństwo przed atrybutami.
grecaptcha.execute(
opt_widget_id
) 		Programowo wywołaj test reCAPTCHA. Używana, jeśli niewidoczna reCAPTCHA jest w elemencie div zamiast przycisku.
opt_widget_id
Identyfikator opcjonalnego widżetu. Jeśli nie określono inaczej, domyślnie jest ustawiany pierwszy widżet.
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ź dla 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łuję niewidoczne wyzwanie 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>