Ta strona została przetłumaczona przez Cloud Translation API.

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:

automatycznie renderować widżet lub
Jednoznaczne renderowanie widżetu

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.

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>

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.
Funkcja wywołania zwrotnego onload musi być zdefiniowane przed załadowaniem interfejsu reCAPTCHA API. Aby mieć pewność, że nie ma wyścigów warunki:
- Uporządkuj skrypty z wywołaniem zwrotnym, a następnie reCAPTCHA
- Użyj parametrów async i defer w tagach „script”

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>