reCAPTCHA w wersji 2

Z tego artykułu dowiesz się, jak wyświetlać i dostosowywać widżet reCAPTCHA w wersji 2 na swojej stronie internetowej.

Widżet można wyświetlić na 2 sposoby:

Informacje o tym, jak dostosować widżet, znajdziesz w sekcji Konfiguracje. Możesz na przykład określić język lub motyw widżetu.

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

Automatyczne renderowanie widżetu reCAPTCHA

Najłatwiejszym sposobem renderowania widżetu reCAPTCHA na stronie jest dołączenie niezbędnego zasobu JavaScriptu i tagu g-recaptcha. Tag g-recaptcha jest elementem DIV o nazwie klasy g-recaptcha i kluczem witryny w Atrybut data-sitekey:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Skrypt musi być wczytywany przy użyciu protokołu HTTPS i może być uwzględniony z dowolnego bez ograniczeń.

Jednoznacznie renderuj widżet reCAPTCHA

Odroczenie renderowania można osiągnąć przez określenie funkcji wywołania zwrotnego onload i dodawania parametrów do zasobu JavaScript.

  1. Określ funkcję wywołania zwrotnego onload. Funkcja zostanie wywołana, gdy: wszystkie zależności zostały wczytane.

    <script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

  2. Wstaw zasób JavaScript, ustawiając parametr onload na nazwę funkcji wywołania zwrotnego onload i parametru render do explicit.

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

    Po wykonaniu wywołania zwrotnego możesz wywołać metodę grecaptcha.render za pomocą interfejsu 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.
data-theme motyw ciemne jasne żarówka Opcjonalnie: Motyw kolorystyczny widżetu.
rozmiar-danych rozmiar kompaktowy normalny normalny Opcjonalnie: Rozmiar widżetu.
data-tabindex indeks tabulacji 0 Opcjonalnie: Indeks tabindex widżetu i 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.

JavaScript API

Metoda Opis
grecaptcha.render(
kontener,
parametry
) 		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.
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 type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Jednoznaczne renderowanie wielu widżetów

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>