# Guida alla pagina hCaptcha personalizzata

## Prerequisiti

{% hint style="warning" %}
Assicurarsi che Netacea abbia configurato e abilitato CAPTCHA per il proprio account. Inoltre, assicurarsi che la pagina CAPTCHA standard sia stata testata e possa essere servita prima di implementare una pagina CAPTCHA personalizzata.
{% endhint %}

Una volta completati i prerequisiti sopra indicati, è possibile creare una pagina CAPTCHA personalizzata procedendo come segue:

## Pagina HTML

Per creare una pagina HTML da utilizzare per servire il CAPTCHA, può essere utile partire dal Template HTML di Netacea prima di aggiungere il codice HTML personalizzato. La [pagina template](#netacea-captcha-template) è consultabile in fondo a questo documento.\
\
La pagina HTML personalizzata può essere progettata secondo i propri requisiti specifici e/o il branding aziendale, tuttavia la pagina deve includere il seguente codice.\
\
**I seguenti script devono essere inseriti all'interno dell'elemento head del documento (`<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>
```

**Inoltre, includere il seguente codice in un punto qualsiasi all'interno del body (`<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>

**Gli script seguenti devono inoltre essere aggiunti alla fine del body, ma comunque al suo interno (`<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" %}
Si noti che alcuni link all'interno della pagina CAPTCHA potrebbero non funzionare se sono ospitati dietro il sito protetto da Netacea.
{% endhint %}

### Template CAPTCHA di 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>
```

*Una volta completata la pagina CAPTCHA personalizzata, fornire la pagina HTML CAPTCHA completata a Netacea. Questa verrà caricata sui nostri server e la nuova pagina sarà utilizzata per tutte le pagine CAPTCHA servite dalla soluzione Netacea Bot Management.*

### Completamento Automatico del Captcha

Netacea offre anche un template per la pagina Hcaptcha in cui la challenge captcha viene completata automaticamente una volta che l'utente ha risolto la sfida. Se si desidera utilizzare questa soluzione, utilizzare il template seguente

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