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:

Aby dowiedzieć się, jak dostosować widżet, zapoznaj się z artykułem 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

Najprostszym sposobem na renderowanie widżetu reCAPTCHA na stronie jest uwzględnienie niezbędnego zasobu JavaScriptu i tagu g-recaptcha. Tag g-recaptcha to element DIV z nazwą klasy g-recaptcha i kluczem witryny w atrybucie 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. Podaj 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 z 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.
render explicit
onload		 Opcjonalnie: Określa, czy widżet ma być renderowany w sposób jawny. 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-theme theme dark light light Opcjonalnie: Motyw kolorystyczny widżetu.
data-size size compact normal normal Opcjonalnie: Rozmiar widżetu.
data-tabindex tabindex 0 Opcjonalnie: Indeks karty widżetu i wyzwania. Jeśli inne elementy na stronie używają atrybutu tabindex, powinien on być ustawiony tak, aby ułatwić użytkownikom nawigację.
data-callback callback 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, 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.

JavaScript API

Metoda Opis
grecaptcha.render(
kontener,
parametry
) 		Renderuje kontener jako widżet reCAPTCHA i zwraca identyfikator nowo utworzonego widżetu.
container
  Element HTML do renderowania widżetu reCAPTCHA. Określ identyfikator kontenera (ciąg znaków) lub sam element 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ź z widżetu reCAPTCHA.
opt_widget_id
Identyfikator opcjonalnego widżetu. Jeśli nie zostanie podany, domyślnie zostanie wybrany pierwszy utworzony 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>