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 uwzględnienie niezbędnego zasobu JavaScript i tagu g-recaptcha. Tag g-recaptcha to element DIV o nazwie klasy g-recaptcha i Twoim kluczu 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 z użyciem protokołu HTTPS i może być uwzględniony w dowolnym miejscu na stronie bez ograniczeń.

Jednoznacznie renderuj widżet reCAPTCHA

Aby opóźnić renderowanie, można określić funkcję wywołania zwrotnego onload i dodać parametry do zasobu JavaScript.

  1. Określ funkcję wywołania zwrotnego onload. Ta funkcja zostanie wywołana po wczytaniu wszystkich zależności.

    <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, a parametr render na explicit.

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

    Gdy wykonywane jest wywołanie zwrotne, 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 bezpośrednie
przyciążanie		 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ślne Opis
klucz-danych-witryny klucz witryny Twój klucz witryny.
motyw danych motyw ciemne jasne żarówka Opcjonalnie. Motyw kolorystyczny widżetu.
data-size rozmiar kompaktowy normalny kontrolny 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, ustaw ten parametr, by ułatwić użytkownikom nawigację.
wywołanie zwrotne danych 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.
wywołanie zwrotne po wygaśnięciu danych Wygasłe połączenie zwrotne Opcjonalnie. Nazwa funkcji wywołania zwrotnego wykonywanej, gdy odpowiedź reCAPTCHA wygaśnie i użytkownik będzie musiał ponownie przejść weryfikację.
wywołanie zwrotne o błędzie danych 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.
container
Element HTML do renderowania widżetu reCAPTCHA. Podaj identyfikator kontenera (ciąg znaków) lub samego elementu DOM.
parameters
Obiekt zawierający parametry w postaci par klucz=wartość, np. {"sitekey": "your_site_key", "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 ustawiany jest 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 ustawiany jest 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>