# Przewodnik po niestandardowej stronie hCaptcha

## Wymagania wstępne

{% hint style="warning" %}
Upewnij się, że Netacea skonfigurowała i włączyła CAPTCHA dla Twojego konta. Upewnij się również, że standardowa strona CAPTCHA została przetestowana i może być wyświetlana przed wdrożeniem niestandardowej strony CAPTCHA.
{% endhint %}

Pod warunkiem spełnienia powyższych wymagań wstępnych, niestandardową stronę CAPTCHA można utworzyć, wykonując następujące czynności:

## Strona HTML

Aby utworzyć stronę HTML, która będzie używana do wyświetlania CAPTCHA, warto zacząć od szablonu HTML Netacea, a następnie dodać niestandardowy kod HTML. [Szablon strony](#netacea-captcha-template) można zobaczyć na dole tego dokumentu.\
\
Niestandardowa strona HTML może być zaprojektowana zgodnie z Twoimi konkretnymi wymaganiami i/lub identyfikacją wizualną firmy, jednak strona musi zawierać następujący kod.\
\
**Poniższe skrypty powinny znajdować się w elemencie head dokumentu (`<head>...</head>`):**

```html
<link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.0.0.css"/>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
```

**Dodatkowo umieść następujący kod gdzieś w treści strony (`<body>...</body>`):**

<pre class="language-html"><code class="lang-html">&#x3C;form id="frmCaptcha" action="" method="POST">
<strong>    &#x3C;div
</strong>        class="h-captcha"
        data-sitekey="{{CAPTCHA_SITE_KEY}}"
        data-callback="showButton"
    >&#x3C;/div>
    &#x3C;br />
    &#x3C;br />&#x3C;input type="submit" value="Submit" class="btn btnHidden" />&#x3C;input
        type="hidden"
        maxlength="40"
        id="hitid"
        name="hitid"
        value="{{TRACKING_ID}}"
    />
&#x3C;/form>
</code></pre>

**Poniższe skrypty muszą również zostać dodane na końcu, ale nadal w obrębie treści strony (`<body>...</body>`):**

```html
<script src="https://assets.ntcacdn.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
<script src="https://assets.ntcacdn.net/Mitigations/submit-hcaptcha-2.0.2.js"></script>
```

{% hint style="warning" %}
Należy pamiętać, że niektóre linki na stronie CAPTCHA mogą nie działać, jeśli są hostowane za witryną chronioną przez Netacea.
{% endhint %}

### Szablon CAPTCHA Netacea

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Help us verify real visitors | $customername</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />>
        <link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.0.0.css"/>
        <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    </head>
    <body>
        <div class="wrapper">
            <!-- Customer logo (Optional) If you would like your logo to appear, 
                uncomment lines 13 to 15 and add your source. -->
            <!-- <div class="logo">
                <img width="300" alt="logo" src="$logoURL"/>
            </div> -->
            <!-- End of customer logo -->

            <!-- Captcha page headings -->
            <h1>Help us verify real visitors</h1>
            <p>Please complete to continue</p>
            <!-- End of captcha headings -->

            <!-- Captcha Form -->
            <form id="frmCaptcha" action="" method="POST">
                <div
                  class="h-captcha"
                  data-sitekey="{{CAPTCHA_SITE_KEY}}"
                  data-callback="showButton"
                ></div>
                <br />
                <br /><input type="submit" value="Submit" class="btn btnHidden" /><input
                  type="hidden"
                  maxlength="40"
                  id="hitid"
                  name="hitid"
                  value="{{TRACKING_ID}}"
                />
              </form>
            <!-- End of captcha form -->

        </div>

        <!-- The following two scripts MUST be at the end of the body -->
        <script src="https://assets.ntcacdn.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
        <script src="https://assets.ntcacdn.net/Mitigations/submit-hcaptcha-2.3.0.js"></script>
        <!-- End of scripts at the end of body -->

    </body>
</html>
```

*Po ukończeniu niestandardowej strony CAPTCHA prosimy o przesłanie gotowej strony HTML CAPTCHA do Netacea. Zostanie ona przesłana na nasze serwery, a nowa strona będzie używana dla wszystkich stron CAPTCHA wyświetlanych przez rozwiązanie Netacea Bot Management.*

### Automatyczne uzupełnianie Captcha

Netacea oferuje również szablon strony Hcaptcha, w którym wyzwanie captcha jest automatycznie uzupełniane po jego rozwiązaniu przez użytkownika. Jeśli chcesz skorzystać z tego rozwiązania, użyj poniższego szablonu

```html
<!DOCTYPE html>
<html lang="en">
  <head runat="server">
    <meta
      name="viewport"
      content="initial-scale=1.0, width=device-width, maximum-scale=1.0"
    />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>Auto-submit hCaptcha Custom Page</title>
    <link
      rel="stylesheet"
      href="https://assets.ntcacdn-uat.net/Mitigations/captcha-1.0.0.css"
    />
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>###---THIS IS A CUSTOM AUTO-SUBMIT HCAPTCHA PAGE---###</h1>
            <h1>Help us verify real visitors</h1>
      </header>
      <hr><br><br>
      <h1>🤖Are you a bot?🤖</h1>
      <br>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFb1qE_jzVunCV4Rx6BMblb1WlodceKEwr3A&usqp=CAU" alt="bot-mugshot">
      <br>
        <p>Please complete this custom hCaptcha page to continue...</p>
      <form id="frmCaptcha" action="" method="POST" data-auto-submit>
        <div
          class="h-captcha"
          data-sitekey="{{CAPTCHA_SITE_KEY}}"
          data-callback="frmCaptchaCallback"
        ></div>
        <br />
        <br /><input type="submit" value="Submit" class="btn btnHidden" /><input
          type="hidden"
          maxlength="40"
          id="hitid"
          name="hitid"
          value="{{TRACKING_ID}}"
        />
      </form>
    </div>
    <script src="https://assets.ntcacdn-uat.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
    <script src="https://assets.ntcacdn-uat.net/Mitigations/hsubmit-captcha-2.3.0.js"></script>
  </body>
</html>
```
