reCAPTCHA w wersji 2

Na tej stronie objaśniono, jak wyświetlać i dostosowywać widżet reCAPTCHA w wersji 2 na swojej stronie internetowej.

Aby wyświetlić widżet, możesz:

Aby dowiedzieć się, jak dostosować widżet, zobacz Konfiguracje. Możesz na przykład określić język lub motyw widżetu.

Zobacz Weryfikowanie odpowiedzi użytkownika, aby sprawdzić, czy użytkownik rozwiązał zadanie CAPTCHA.

Automatycznie renderuj widżet reCAPTCHA

Najprostszą metodą renderowania widżetu reCAPTCHA na stronie jest dodanie niezbędnych zasobów JavaScript i tagu g-recaptcha. Tag g-recaptcha to element DIV o nazwie g-recaptcha i 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 zostać wczytany za pomocą protokołu HTTPS. Można go umieścić w dowolnym miejscu na stronie bez ograniczeń.

Wyraźnie wyrenderuj widżet reCAPTCHA

Aby opóźnić renderowanie, określ funkcję wywołania zwrotnego obciążenia i dodaj parametry do zasobu JavaScript.

  1. Określ funkcję wywołania zwrotnego onload. Ta funkcja zostanie wywołana po załadowaniu 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 jako nazwę funkcji wywołania zwrotnego, a parametr render na wartość 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 API JavaScript.

Konfiguracja

Parametry zasobu JavaScript (api.js)

Parametr Wartość Opis
Onload Opcjonalnie. Nazwa funkcji wywołania zwrotnego, która zostanie wykonana po wczytaniu wszystkich zależności.
renderowanie jednoznacznie
wczytane		 Opcjonalnie. Określa, czy widżet ma być renderowany bezpośrednio. Domyślnie jest 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 zostanie określony.

Atrybuty tagu g-recaptcha i parametry grecaptcha.render

Atrybut tagu g-recaptcha Parametr grecaptcha.render Wartość Domyślna Opis
klucz-witryny-danych klucz witryny Twój klucz witryny.
motyw graficzny motyw ciemność żarówka Opcjonalnie. Motyw kolorystyczny widżetu.
data-size rozmiar kompaktowa normalna kontrolny Opcjonalnie. Rozmiar widżetu.
indeks-danych indeks tabulacji 0 Opcjonalnie. Indeks tabulacji widżetu i wyzwania. Jeśli inne elementy strony korzystają z tablicy, ustaw ją, aby ułatwić użytkownikom nawigację.
wywołanie zwrotne danych wywołanie zwrotne Opcjonalnie. Nazwa funkcji wywołania zwrotnego wykonywanej, gdy użytkownik prześle odpowiedź. Token g-recaptcha-response jest przekazywany do wywołania zwrotnego.
wywołanie wygasło oddzwonienie wygasło Opcjonalnie. Nazwa funkcji wywołania zwrotnego wykonywanej po wygaśnięciu odpowiedzi reCAPTCHA i użytkownik musi ponownie przeprowadzić weryfikację.
wywołanie błędu błędu danych wywołanie zwrotne błędu Opcjonalnie. Nazwa funkcji wywołania zwrotnego wykonywanej, gdy reCAPTCHA napotka błąd (zwykle połączenie sieciowe), i nie może kontynuować, dopóki połączenie nie zostanie przywrócone. Jeśli określisz tu funkcję, Twoim obowiązkiem jest poinformowanie użytkownika, że powinien ponownie spróbować.

JavaScript API

Metoda Opis
grecaptcha.render(
kontener,
Parametry
) 		Renderuje kontener jako widżet reCAPTCHA i zwraca identyfikator nowo utworzonego widżetu.
container
Element HTML służący do renderowania widżetu reCAPTCHA. Podaj identyfikator kontenera (ciąg znaków) lub sam element DOM.
parametry
Obiekt zawierający parametry jako pary klucz=wartość, np. {"sitekey": "your_site_key", "theme": "light"}. Zobacz parametry grecaptcha.render.
grecaptcha.reset(
)
identyfikator_widżetu_widżetu
) 		Resetuje widżet reCAPTCHA.
opt_Widget_id
Opcjonalny identyfikator widżetu. W przypadku niesprecyzowania wartość jest ustawiana na pierwszy utworzony widżet.
grecaptcha.getResponse(
identyfikator_widżetu_widżetu
) 		Pobiera odpowiedź dla widżetu reCAPTCHA.
opt_Widget_id
Opcjonalny identyfikator widżetu. W przypadku niesprecyzowania wartość jest ustawiana na pierwszy utworzony widżet.

Przykłady

Jawne renderowanie po wywołaniu obciążenia

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

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